Learning HTML5 and CSS3 [closed]

Question

Imagine somebody today, March 1 2011, has never written a webpage and would like to know what they should read to start building web pages today. They don't care about backwards compatibility, but want to build with web standards so that they will be portable amongst as many browsers as possible (Yes I'm saying I do not care if my web pages don't work with IE 4-8, Opera, Netscape, Mozilla, etc, I really don't care, because I've never used them, and that's likely true about those who will use the tools I'm building).

This person has zero biases or bad habits because they've never done it before. They're also hyperactive, so if they have to read 200 pages as to "why to use web standards" or "why web standards are better than "the old way"", they'll get discouraged and distracted and throw the book away, and go swimming. Speaking of which, my hair is wet.

They're looking for references that are engaging and concise. They're not stupid, this person is a real-live engineer who has done a tiny bit of development, a decade or two worth of systems administration, and even built a successful company or two. They just didn't go to college because they really aren't book learners, and are better at applied hands-on learning than at absorbing mounds of useless data in order to get to the two or three things they really need.

Given all of that data about the individual, and I know it's a lot about that individual (this individual is me, of course), what books or resources would you recommend?

(Zeldman's books are out because I already threw them away and then went swimming today.)

Answer 1

Some good resources to start:

• Mozilla Developer Network: For HTML, CSS, Javascript, & DOM.
• Dive into HTML5: For learning all about HTML5
• JSfiddle: For fiddling around without having to build a whole page every time.
• HTML Validator: For making sure the HTML you write is valid.
• CSS3 Preview: Run-down of some of the new features of CSS3.
• Official HTML5 spec: For when you need all the detail straight from the source.
• jQuery: Arguably the best framework for making writing javascript for websites easier.
• A List Apart: "For people who make websites". Definitely not for starting out, but good to read regularly.
• Firebug: If you're using Firefox, this is a must-have.
• Developer Tools: built in to Chrome & Safari (essentially firebug for webkit)

Also, do not use W3 Schools. Please see W3 Fools for a long list of reasons why. W3 Schools will often come up at the top of search results, but please resist the temptation to use it.

Answer 2

For someone that has never coded a webpage make sure you dont get sucked into the hype of HTML5 and CSS3 just yet. Although they have great features they all assume quiet a bit of knowledge of previous versions and all of the 'previews' will show you snippets related to enhanced interactivity rather than supported structural elements.

Stick to learning CSS2.1 and HTML4.01/XHTML which will give you a good grounding on which you can apply the new stuff later.

Im sure people will give this answer some negative feedback but if you need a JS snippet at the start of your code to enable the new HTML5 elements in one of the main stream browsers then it should be used for commercial purposes just yet.

Answer 3

I self-taught myself web design and development, and I have a background in engineering. You are comfortable with computers, so you are in good shape. To get started, I took a few online courses from http://www.hwg.org/. The courses are self-paced but moderated, and you get a lot of hands-on experience right away and you get an online community to help you bounce ideas around.

I took the HTML course, almost all the CSS courses and some JavaScript. Once you get some basic experience and learn the fundamentals, you can decide how much of the other stuff you need, for example, PHP/MySQL, or whether you need some design courses to make things pretty.

I would say, you need to put in about 80 hours of practice to master the basics, so give yourself a month of self-learning to get to that point. The reason to get to that point is that you will be fluent enough to ask good questions that will get you to a higher level.

About books, go to your local library and skim through a few books, find one that you like, buy it, skim through it and skip the parts that don't appeal to you.

Finally, if you really want to learn how to build web pages, get a good text editor and hand-code your HTML and CSS. In the long run, hand-coding is more efficient and you save quite a bit of money by not buying expensive tools like Dreamweaver. However, keep in mind that tools like Dreamweaver are often used by professionals and they serve a good purpose in production environments typically found in commercial web design firms. I actually use Dreamweaver in code view where I hand code my pages, but I have a few other editors that I use depending on the project.

Best wishes as you venture forth into a new and exciting field, and remember to have fun!