After chatting for a while, it turns out that the sixth form college curriculum is still teaching web design using tables, something that most of the web design community left back in the late 1990’s with their PS1, baggy jeans, Quantum Leap and love for the Levellers. I thought it would be a good idea to try and give these guys a bit of a push in the right direction…

So, this series is for you Ryan, and any of your student mates who want to get ahead of the game and get yourself in a better position for a job in the web design industry.

Something to get you on your way…

There are thousands of tutorials out there about designing web layouts with Photoshop, GIMP etc, and whether you’re coding in tables or CSS, you’ll probably need to do this to an extent. With the progress made with CSS3, not all design needs to be done in imaging software, and a lot of layout and designing can be done within the browser.

I learnt coding xHTML and CSS by doing, not reading. I would think the majority of people looking to get into web design would also learn this way too. It’s a hardwired thing that most creative people learn this way. What I’ve supplied below are some sample layouts, fully commented, that you can download and play around with. They’re coded using using best practices both in xHTML and CSS, so you can see how to code in a way that both agencies and developers like to see, and are also good for search engine optimisation (a growing concern for businesses everywhere).

Because of a lack of current browser support for HTML5, and the fact that it’s still in development, everything I’m supplying below is in xHTML 1.0 transitional. Most of the CSS you’ll find will be CSS2, but they’ll also be a sprinkling of CSS3 (even though it’s not supported in Internet Explorer 6-8, almost all other browsers have at least 50% support. You can find css3 browser support here).

So what have we got below? What I’ve supplied below is a basic 2 column xhtml layout that you can look at, download and play around with. I’ve commented as much as I can to help you understand whats going on:

Here’s the sample html page and here’s the corresponding CSS