Settings

Theme

HTML and CSS Learning Tool Recommendations

10 points by PizzaPanther 14 years ago · 11 comments · 1 min read


What's the best tools for teaching a designer type person HTML and CSS? Book recommendations or online tools would be great. An online tool that lets you build HTML and CSS, and learn in process the would be awesome too.

fourmii 14 years ago

There are so many tools, websites and books out there at the moment. Firstly, I would recommend your start on HTML5/CSS3 instead of looking at older stuff.

A very cool, high level site: http://diveintohtml5.info/

Smashing Magazine's website is pretty cool too and they have some good ebooks and printed books on HTML5/CSS3.

Look at http://www.html5rocks.com/en/ for sample code and tutorials.

Some tutorials on tripwire: http://www.tripwiremagazine.com/2010/07/30-very-useful-html5...

There are tons, too many to list. You should also look at Meetup for local HTML, front-end, web dev meetups. They've been super useful for me, especially meeting some of the dev community...

Have fun!

md1515 14 years ago

I just started on the same path as you (although I am not a designer). You have a distinct advantage so you're good to go. I used this resource initially despite the date (pre-HTML5)

http://www.w3schools.com/html/default.asp

I would also recommend finding someone who is knowledgeable about HTML and CSS. I have a "mentor" of sorts and he is both challenging me and helping me. I would also suggest just choosing sample sites to create once you have a grasp. Make a web design with all the features that look really cool and don't take the easy way out. Design it just like you want and figure out the way to code it. Good luck!

Pheter 14 years ago

I used 'CSS: The Missing Manual' to learn how to build CSS based layouts several years back. It obviously doesn't cover CSS3 (unless it has been updated). Reading it from cover to cover was enough for me to get started, and then going back to it occasionally (and google) as a reference.

It's sitting in a stack of books that I need to dispose of so if you're interested then I'll send it your way.

Edit: Although the book doesn't cover CSS3, the book teaches you what you will learn anyways (as CSS3 builds on existing concepts (as well as adding some new ones)); so you don't have to worry about learning outdated 'dis-information' (I think!).

PizzaPantherOP 14 years ago

Thanks for all the replies. I'm looking for something a little less geeky though. These are all great resources I could understand as a programmer, but I need to teach a designer HTML/CSS. I think "CSS: The Missing Manual" is more up the alley I'm looking for but is kind of long.

dlf 14 years ago

Hey, I'm a little late to the party but I created a page on my blog of the process I used to learn HTML & CSS. You can check it out here:

http://dlfrancisco.posterous.com/pages/learn-code

Enjoy!

bmajz 14 years ago

You may want to give http://www.teamtreehouse.com a shot. They have some pretty solid videos and also allow you access to their very active Facebook community. Worth trying out for a month at least.

  • fonzie 14 years ago

    I echo this. The stuff on there is mostly rock solid as it is and they keep adding new material. They keep you motivated by awarding you badges as you go through the learning process. Pretty sweet team behind it too; attentive and responsive to feedback.

lix2333 14 years ago

Go to noexcuselist.com and look at the programming section.

Lots of quality sites listed, a lot of them targeting beginners

Tangaroa 14 years ago

Once you understand the basics of HTML and CSS syntax, I recommend reading the CSS box model specification. It will tell you exactly how layout is supposed to work, and you will be able to understand the various tutorials as derivatives of that model. The CSS spec is a good read in general for learning the styling features.

Other good resources include A List Apart for tutorials and Peter Paul Koch's web site for discussions of cross-browser interoperability.

Keyboard Shortcuts

j
Next item
k
Previous item
o / Enter
Open selected item
?
Show this help
Esc
Close modal / clear selection