Old-timer web designer looking to get back up to speed with HTML5

May 11, 2012 4:23 PM

I need to do a bit of web design and I haven't done any since people were still using tables to position things. Point me to a good book and/or online tutorial to help me put together a relatively contemporary-looking site.

More background: I am a competent back-end coder (i.e., I can write in Perl, C, do database design, etc.), but the last time I wrote a front-end page for people to, you know, look at, the div tag was a newfangled thing. So, I'm looking for web design tips that are currently useful for someone with that background. At the moment, a static site for viewing on laptops is OK; I don't need Web 2.0 / AJAX functionality or a mobile version or mobile app or anything like that (yet).

I'm willing to buy a good book but would be happy to hear about online tutorials. For instance, I will start with w3cschools.com, but would love other ideas as well.

posted by Joey Buttafoucault to computers & internet (14 answers total)

Hard Boiled Webdesign and HTML 5 For Web Designers for books.

CSS Tricks for a website. I particularly like his screencasts. I'd start with him. He's a natural teacher, and super smart.
posted by backwards guitar at 4:33 PM on May 11, 2012

Oh, and w3schools is pretty poorly regarded. I don't personally use them, so I can't vouch, but I would look at CSS Tricks first.
posted by backwards guitar at 4:34 PM on May 11, 2012

Coming from a similar background, I found CSS Mastery to be an excellent book for understanding how to design with CSS.
posted by Brak at 4:37 PM on May 11, 2012

Thanks for the ideas so far! I had recalled w3cschools being decent back in the day, so... yeah. Good to get the updates.
posted by Joey Buttafoucault at 4:55 PM on May 11, 2012

Okay, well, this may be really specific to me, but I really just needed to have a pretty complete inventory of CSS properties and whatnot, to teach myself and experiment. (I don't like structured learning.) And I use... this. Oh it's ridiculous. And yet it works for me!
posted by RJ Reynolds at 5:01 PM on May 11, 2012 [1 favorite]

FWIW, tables aren't entirely passé.
posted by homodachi at 5:01 PM on May 11, 2012 [3 favorites]

Twitter bootstap makes it easy.
posted by cgg at 5:04 PM on May 11, 2012 [2 favorites]

As a front-end developer, I usually point folks over to Mozilla Developer Network. MDN CSS Documentation has a good reference guide and decent tutorial.
posted by xtine at 5:12 PM on May 11, 2012

Also, w3schools is very bad resource. Check w3fools for reasons why.
posted by xtine at 5:13 PM on May 11, 2012 [1 favorite]

You won't learn much from Twitter Bootstrap, but it is a nice foundation to build a site on.

Devguru CSS2 is what I used back in the day. Similar to RJ Reynolds link.
posted by backwards guitar at 5:29 PM on May 11, 2012

That w3fools link, xtine posted is excellent. There are very good learning resources linked from that page. See especially the W3C's Web Education Group and the aforementioned Mozilla Developer Network.

Have a look at A List Apart, even though it may seem like a bit much. Start with an article like, For a Future-Friendly Web or Fluid Grids.

I also recommend looking at the CSS Zen Garden for some idea of what's possible with with straight HTML+CSS.

But please, for the love of God, don't give up and use tables.
posted by ob1quixote at 6:11 PM on May 11, 2012 [1 favorite]

Tables are great for tabular data. For layout, not so much.

Can I Use is helpful if you can't remember what does and doesn't support a certain selector or property.
posted by fifteen schnitzengruben is my limit at 6:52 PM on May 11, 2012

Ummm...from the third sentence of that "tables aren't entirely passé" link:

The hacks and conditional comments ruin our clean markup. (emphasis mine).

If you're doing CSS this way, you're doing it wrong.
posted by Brak at 10:12 AM on May 12, 2012

HTML5 is a user-friendly book. There is a book by the same author dealing with HMTL5 for mobile devices, too.
posted by _cakes at 6:54 AM on May 18, 2012