Tutorials, Roundups and Musings on Design & Front-end Development

When I first started out learning HTML and CSS, there was no shortage of tutorials all over the web explaining how to code PSDs into HTML. I surely read and followed dozens of them, but only a few really stuck with me and really helped me.

In part two of two, we’ll be taking our XHTML and our sliced up images and bringing them together into a the beautiful medley that is CSS.

In this tutorial, we’re going to be taking a PSD webpage template and coding it into XHTML and CSS. Along the way, I’m going to explain how to approach the coding of a webpage, so that hopefully, after reading, you’ll be able to apply what you’ve learned to your own designs.

Tabs are great – They’re user-friendly because they’re like the real world, and they can add a great 3D element to a design. Overlapping tabs present a special challenge to code, but with some careful planning and clever images, we’ll have some nicely interactive tabs.