HTML Playground
June 26, 2009 3:13 AM   Subscribe

HTML Playground allows you to learn HTML and CSS by example.
posted by minifigs (10 comments total) 107 users marked this as a favorite
I've been meaning to learn CSS and beyond basic HTML for years. This may actually do it! Thanks!
posted by notsnot at 4:41 AM on June 26, 2009

Looks useful, but can't see anything in attributes field in Safari or FireFox (on the Mac). Am I missing something?
posted by jpburns at 5:27 AM on June 26, 2009

This is definitely a handy link to be able to give to people interested in learning HTML, thanks. The FireBug extension for FireFox is another tool along these lines; you can poke through the source code and CSS of any web page, tinker with it, and see the results in real-time. It's invaluable for fine-tuning CSS for a site design, but it would also be a good way to learn experimentally.
posted by usonian at 5:56 AM on June 26, 2009

can't see anything in attributes field

You have to click on the tag in the "example code" window. Completely non-intuitive, but a useful resource anyway.
posted by DU at 6:27 AM on June 26, 2009

Doesn't work in Safari. Works fine in Firefox.

Aren't these guys supposed to know how to write compliant HTML and CSS?

(appart from that, this is a nice resource, thanks)
posted by svenni at 7:57 AM on June 26, 2009

See also w3schools. It's what I use as a reference.

However, if you intend to learn HTML/CSS, the single most important advice is that you should use a syntax highlighting text editor. There are a million of them. Personally, I use vim (screenshot), but learning it is an adventure in and of itself. For something a little more “modern,” you can try jEdit on any operating system, ConTEXT on Windows, or Bluefish on Linux.

If you're a Mac person, you can pay for BBEdit. It's US$125. I think it appeals to the “you get what you pay for” mentality.
posted by sonic meat machine at 8:06 AM on June 26, 2009 [1 favorite]

Seconding w3schools and syntax highlighting. I use notepad++ for the latter.
posted by Edgewise at 9:36 AM on June 26, 2009

Thirding w3schools and syntax highlighting in notepad++. That's how I got started.

However, sometimes I get lazy and just use the HTML editor built into cPanel on my website. Doesn't really work for PHP/MySQL heavy applications, but I have other friends to help me with that. =P

In regards to the link. Potentially a good start for users who want instant feedback on what they put in. When I was starting to learn it (aka- just typing junk into notepad and loading it in Firefox) it was frustrating (but a good learning experience) to have to go back and see what I did wrong every time.
posted by Askiba at 11:10 AM on June 26, 2009

This is neat enough that it will be my first recommendation for those interested in learning HTML/CSS. Thanks!

I've recently switched from jEdit to Text Wrangler. I find the interface, especially file management, to be a little more intuitive, but otherwise they're pretty similar.
posted by Kwine at 1:54 PM on June 26, 2009

A nice addition to the tools list - thanks.
posted by PuppyCat at 2:19 PM on June 26, 2009

« Older Greatly exaggerated   |   Canadian War Posters Newer »

This thread has been archived and is closed to new comments