Header
We have launched our new Privacy Policy. You can read more about it here.
Advertisement

How to Convert a PSD to XHTML

by

I continue to be amazed by how well Collis' "Build a Sleek Portfolio Site From Scratch" tutorial continues to perform. It's been months, yet it still posts strong numbers every week. Considering that fact, I decided to create a screencast that shows you exactly how to convert a PSD into perfect XHTML/CSS.

Part 1: Slicing the PSD and Creating the XHTML

Part 2: CSS

I won't lie to you. This video is a bit boring. It just isn't fun to watch someone enter margin values for thirty minutes. :) But it's essential.

Part 3: Implementing a Bit of Javascript

Part 4: Kicking IE6's Butt

Could we really call ourselves web developers if we didn't have to fight with IE6? And is it a coincidence that "6" is also the number associated with the devil? Who knows.

Mostly, the site looks just fine in IE6, but we should change a few quirks. Create a new stylesheet and call it "ie6.css". Place it in your CSS folder. Then paste in the following.

There's nothing that we really need to go over. Mostly, I'm adjusting the positioning of a few elements.

The last step is to reference our new stylesheet in the head tag of our document.

The PSD

The PSD

The Website: 100% XHTML and CSS

The PSD

I hope this helped you. Everyone has their own way of doing things; So I'd be interested to hear your thoughts. This tutorial was a huge undertaking. I'd appreciate a Digg if you found it to be beneficial.

  • Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Advertisement