Note—this arti­cle is OUTDATED. My choices of web­sites you can and should learn from has changed.

First off: there are many excel­lent tuto­ri­als on the net which will ful­fill all you need to learn how to cre­ate Web pages. From my expe­ri­ence (and I have learned HTML, etc. just from the net and the occa­sional book) I must empha­size one point: the most dif­fi­cult task in learn­ing designing/coding is sep­a­rat­ing the grain from the chaff. As many excel­lent tuto­ri­als as there are, there are more com­pletely use­less tuto­ri­als, which promise the moon and end up giv­ing stale cheese.

For those of you just begin­ning, I would seri­ously sug­gest http://www.w3schools.com . Don’t be con­cerned about the staid look of the web­site. The con­tent is solid gold; you get com­plete ref­er­ences, accu­rate infor­ma­tion and short and sweet tuto­ri­als with loads of exam­ples. Again, for the begin­ner: try reading/coding HTML — xHTML -> CSS -> Javascript -> PHP & SQL -> AJAX. This is roughly the order I went in (though I learned Javascript before CSS). Stuff I know that you (& I) should cover, but have no idea about where to fit in: XML and Flash. When (and if) I learn more about these, I’ll edit this post.

A few tips while cod­ing up websites:

• From the begin­ning, ensure cross browser com­pat­i­bil­ity. Whether or not you con­sider IE6 wor­thy enough to be included in the list of browsers your site appears per­fectly in, depends on your per­sonal opin­ion. There are those who would argue much more for all round acces­si­bil­ity, and those who con­sider the 8 years old (mal­func­tion­ing) browser obso­lete. Per­son­ally, I agree with the lat­ter. (Very few web­sites I design work com­pletely in IE6).
• Write code as if some­one else will grade it. Do your best to keep stuff well com­mented, neatly tabbed and avoid unsightly hacks put together at the last moment. Remem­ber, unlike cod­ing a pro­gram, where (in most cases) the code is a secret you can carry to your grave, click­ing “View Source” does allow every­one to see your slop­pi­ness. And it ain’t easy to find bugs in messy code either.
• Keep every­thing W3 com­pli­ant. Always ensure that your web­sites are xhtml, css valid. Don’t for­get to put in a !DOCTYPE.
• Try to use the best Search Engine Opti­miza­tion prac­tices from the begin­ning so that you get into a habit of using the proper ele­ments at the right places. I’m afraid I still strug­gle and acci­den­tally use [code]h1[/code] where I should have put an [code]h2[/code]. (If you don’t under­stand what I’m talk­ing about, you will, later.)
• Use sprites while han­dling images. One of the worst impres­sions I can get of a site is hav­ing non-preloaded roll-over images.
• Look at the source code of sites that you like. Won­der about how cer­tain effects might be cre­ated and then check from the source code.
• Use Fire­fox and its excel­lent plu­g­ins: Fire­bug (for look­ing quickly through a page, edit­ing to find those pesky bugs on the fly and mak­ing your life much more com­fort­able) and Web Devel­oper Tool­bar (to do the few things fire­bug doesn’t).
• At all costs, never use GUI based web­page cre­ators. Hand-code, use libraries, what­ever. Don’t use some­thing which doesn’t even give you a glimpse of the code.

Apart from the above, it’s always good to read stuff all over the web. I’ll keep putting up links here to inter­est­ing web­sites which give use­ful infor­ma­tion, but it’s bet­ter if you search for yourself.