Learning HTML though examples

August 14, 2009 11:33 AM

What are some good webpages for a HTML beginner to look at for code examples?

I'm working on learning HTML, and I'm finding plenty of resources for learning how to write code. However, I'm one of those people that always learns better by actually seeing things in action, looking under the hood, and seeing how everything goes together. The problem I run into right now is that while I've been trying to look at the source code on the websites I visit, most of them have such a massive amount of code that it's a little overwhelming to make sense of what does what. (MeFi's code isn't that bad, however.) What would be some good, simple pages to look at and learn how things are being done these days? (For example, pages with good clean divisions, or pages that use tables that don't look like they're from 1997, if anyone actually still uses tables any more.) Any other clues you could give a n00b would also be appreciated. Thanks!

posted by azpenguin to computers & internet (13 comments total)

w3schoosl.com.
posted by gramcracker at 11:38 AM on August 14

ahem, w3schools.com.
posted by gramcracker at 11:38 AM on August 14 [1 favorite has favorites]

These two are great resources:

Blooberry HTML Reference
Blooberry CSS Reference

Additionally, I recommend you get Firefox and add the Firebug extension and the Web Developer Toolbar. Firebug lets you change code on-the-fly and see the results in the browser, among other things. Web Developer Toolbar lets you investigate CSS selectors, highlight items, and do all kinds of nifty things.
posted by odinsdream at 11:49 AM on August 14 [4 favorites has favorites]

Seconding W3 Schools. In my professional life as a web developer I basically have one tab open to there at all times to double check my memory and I learned most of what I know about HTML, CSS and JavaScript from their examples.
posted by hobgadling at 12:09 PM on August 14

This was on the blue a while ago.
posted by shoebox at 12:14 PM on August 14

I'm fairly new to html & css myself, and I whipped up this simple page by hand a few months ago.

psst... don't go forwarding that page around. It's just for friends.
posted by martens at 12:26 PM on August 14

Install these 2 Firefox add-ons:

Chris Pederick's WebDeveloper

Karmatics' Aardvaark

Both will give you huge amounts of information about the code while you're viewing the page.
posted by ceri richard at 12:47 PM on August 14

Also, Russ Weakley at MaxDesign has some excellent step by step tutorials that will take you through building 1, 2 and 3 column layouts.
posted by ceri richard at 12:50 PM on August 14

As for well coded sites, look for people who write about standards and accessibility such as Roger Johansson at 456BereaSt.com, A List Apart, Zeldman, Andy Clarke, Simon Collison, etc.
posted by ceri richard at 1:01 PM on August 14

2nding A List Apart, mentioned above.

Also, I recommend the Firebug plug-in for Firefox. I haven't used ceri richard's recommendations, so maybe those do it, too, but it's very useful. You can open up the firebug panel on the bottom portion of the screen and poke around the website you're looking at. You can see the styles applied to an element that you click, and change them on the fly. It has a nice little graphic explaining what the element's margin, border, and padding are which is invaluable. You can also see any element's children or parent.

Lastly, you can check out my personal website, which I'm coding by hand. It's php, but the HTML the server outputs should be pretty simple. At this exact moment, the homepage looks a little odd because I'm playing around with something, but it should be a good beginner's level web page, since I haven't spent a lot of time on it yet.

One summer, me and some friends also coded up Course Picker by hand, so that might be another good example, although significantly more complicated.
posted by losvedir at 2:33 PM on August 14

I've always been a fan of Webmonkey tutorials.
posted by Billegible at 2:36 PM on August 14

As others have mentioned, definitely grab Firebug. Check out the CSS Zen Garden for some great examples of really clean HTML spiffed up with CSS.
posted by boba at 9:13 AM on August 15

Wow, guys, you've given me enough stuff to keep me busy for a nice long time! Thanks to all of you... now to continue scheming on my web page ideas that are floating around in my head. Also, I'm a graphic artist at a newspaper, so you might say that picking up more and current skills could come in handy at any time :) Again, thanks.
posted by azpenguin at 11:16 PM on August 15