Learning HTML though examples
August 14, 2009 11:33 AM Subscribe
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!
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!
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, 2009
posted by hobgadling at 12:09 PM on August 14, 2009
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, 2009
psst... don't go forwarding that page around. It's just for friends.
posted by martens at 12:26 PM on August 14, 2009
Best answer: 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, 2009
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, 2009
Best answer: 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, 2009
posted by ceri richard at 12:50 PM on August 14, 2009
Best answer: 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, 2009
posted by ceri richard at 1:01 PM on August 14, 2009
Best answer: 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, 2009
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, 2009
Best answer: I've always been a fan of Webmonkey tutorials.
posted by Billegible at 2:36 PM on August 14, 2009
posted by Billegible at 2:36 PM on August 14, 2009
Best answer: 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, 2009
posted by boba at 9:13 AM on August 15, 2009
Response by poster: 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, 2009
posted by azpenguin at 11:16 PM on August 15, 2009
« Older I don't know what this Kids In The Hall sketch is... | How are they selling these televisions for so... Newer »
This thread is closed to new comments.
posted by gramcracker at 11:38 AM on August 14, 2009