Best way to start learning HTML, CSS, and other web frontend technologies

Question

Hello. One of my friends is wanting to learn HTML for the purpose of helping me to create websites. I figured the best place to start is working with the frontend of websites.

What good online resources out there can I recommend to my friend? Most of the online HTML tutorials out there teach the deprecated way of writing HTML, such as using frames and not using CSS.

Things I'd like to see covered are really just HTML and CSS(and the proper way to intermix them), though an intro to Javascript is a definite plus.

Note: My friend is what I'd call a power user, but he has no programming experience at all.

Actually I forgot that my friend has had a bit of experience with programming. He was in one semester(and then dropped the class) of AP Computer Programming which taught Java.

Answer 1

Google actually has some pretty good content that your friend might like:
HTML, CSS, and Javascript from the Ground Up

Answer 2

You are right there are many BAD resources out there. I would get started at

http://www.w3schools.com/

also have them checkout

SmashingMagazine.com

they have a lot of resources and many are aimed at beginners and designers getting into web development.

Answer 3

http://www.w3schools.com/

Answer 4

Quite simply, build some sites just to play around with. You can read all the books, website postings, blogs, and magazines you want. But, most of what you read will slowly be forgotten unless you practice the concepts and techniques that you learn. The best way to learn any language (whether natural language or programming language) is by immersing yourself in it. Hands-on learning is the best when it comes to learning languages.

However, that doesn't stop me from surrounding myself with books on HTML, CSS, JS, etc.; Check out the books from O'Reilly especially, they are very detailed. They are not geared for beginners persay, but I would recommend them.

Book recommendations:

This is the JavaScript book I first bought: http://www.amazon.com/JavaScript-Definitive-Guide-David-Flanagan/dp/0596101996/ref=sr_1_1?ie=UTF8&s=books&qid=1284506913&sr=8-1

I actually never bought a beginner's HTML book, so I can't recommend one. The same goes for CSS. However, one CSS book you may find useful is this one which I do have and like a lot: http://www.amazon.com/CSS-Cookbook-3rd-Animal-Guide/dp/059615593X/ref=sr_1_11?s=books&ie=UTF8&qid=1284506959&sr=1-11

Answer 5

I'd say, learn from w3schools for basics but look at http://www.csszengarden.com/ for partial examples.

Answer 6

Opera produced, with the help of a bunch of (good) external contributors, the guide that I am happiest recommending: http://wsc.opera.com/

Coming in second is http://htmldog.com/

Answer 7

Have your friend pick up a cheap "learn HTML" book (such as this one). Is it dated? Yes. Will your non-programmer friend learn the basics of HTML? Yes. I can hear the groaning from the crowd, but hear me out.

As dubious a resource some of these "learn HTML" books can be, they are geared towards the layman...just like your friend. Throwing your friend towards some blogs, a W3 Schools site or (God forbid) a W3C Recommendation won't help them in the least. If your friend is starting out, then they need a little hand-holding. In my opinion, that's the true value of the book.

Since I gather that you are a web developer, your role should be to mentor your friend as they're going through the book at their pace. If they start asking about frames, tell them not to worry about it so much but it would be to their benefit if you can explain the disadvantages. Same with the blink tag and table-based layouts. Don't overwhelm your friend, but encourage and answer questions as they come naturally. I think this approach is far more useful and effective than simply throwing them at a website, and may cost you less of your time than you may imagine.

At the point that your friend has completed the book and is making some basic web pages, he or she should know if this HTML thing is something they still wish to pursue. If so, there are decent sites like A List Apart that can provide some up-to-date design and development tips. Mark Pilgrim's Dive Into HTML5 is another great resource.