Matthew James Taylor writes about CSS layouts and web design, including the three-column liquid layout and menu techniques.
HN links it for CSS layout references like the Holy Grail layout, equal-height columns, and margin-top versus bottom, with some commenters debating its advice.
Tell him to read everything here:
http://www.smashingmagazine.com/
There are many great designers out there and unfortunately not many of them working for companies with large websites, so just going out and seeing the norm these days is not going to put him ahead of the curve.
He should get familiar with Photoshop, etc. You could try Gimp, but that might scare him away. Photo/image editing is a critical piece to almost any web design at a higher level.
He needs to understand CSS in and out and understand the ins and outs of when to use certain elements. Yes we're not in 1999, and you shouldn't use tables for layout unless you need a table (grid), but understand why, and understand how you wish you were using tables sometimes because CSS can be a pain.
Check sites like this out:
http://matthewjamestaylor.com/blog/perfect-3-column.htm
and get familiar with the various kinds of layouts that can be used.
Understand lists, etc. Do a navigation bar with CSS hover effects, etc. Don't get caught up with dropdown and fly-out menus.
Open up pages in Lynx. Think about accessibility (the deaf, the blind, the partially blind that up their font sizes, etc.), but don't get tied down to overly-accessible sites either. Know your audience.
Javascript. JQuery. Love it. Learn it.
Prototype. Understand it, get used to it being out there. YUI- same thing.
Flash. Yes, you should learn about it along with HTML 5.
Then also get into User Experience. Best practices, etc. Maybe try out a…
There is one case in which I don't know how to do away without extraneous presentation divs: I want a 2-columns layout where the left column is written after the right column in my source code. Good for my eye (navigation on the left) and for search engines and text based browsers (relevant text first).
Right now, my div structure looks like this:
<body>
<header />
<div-hackw>
<div-hack1>
<div-hack2> <article /> </div-hack2>
<nav /> -- written after, displayed on the left
<div-hackw>
<footer />
<body>
http://www.loup-vaillant.fr/css/style.css
http://www.loup-vaillant.fr
inspired from http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-ems.htm (down right now).
Header, footer, nav, and article are okay (they eventually will be actual html5 tags). Hakcw, hack1 and hack2, however, are ugly. Does anyone know of a way to ditch them ?
> so the usage of margin-top should always be avoided
Not really if you consider sibling layouts, e.g.: https://matthewjamestaylor.com/css-margin-top-vs-bottom
> owl selector: performance implications - it's fairly bad from a performance POV to use it.
Arguing about "CSS performance" is futile when the real cause of bloatedness is mostly JavaScript these days (also: http://alistapart.com/article/axiomatic-css-and-lobotomized-owls).
The owl-selector can actually be quite elegant, but becomes a burden if you have lots of side-by-side blocks (which would always need to set their margin-top to 0).
Meta: I assume you're doing a website update at the moment. I prefer the blue! Though I might still use a white version on the homepage to remove emphasis from the header. Also, on you signup page it would IMO look nicer if you pinned the page footer (eg https://matthewjamestaylor.com/bottom-footer).
If you really think that then you have obviously never tried it.
Look here for the real solution, which is slightly more involved:
http://matthewjamestaylor.com/blog/perfect-3-column.htm
I give to you, The Holy Grail
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm