HTML Playground

June 26, 2009 3:13 AM

HTML Playground allows you to learn HTML and CSS by example.
posted by minifigs (10 comments total)

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