I showed you how to take PSD designs and convert it into HTML and CSS. Given the reputation of that meticulous tutorial, I’ve determined to create a second series. Though, I’m not much of a designer. Instead, I asked Collis if he would permit me to use the design that he used for a recent tutorial for you all web design and front end developers.

1. How to Convert a PSD to XHTML

I continue to be surprised by how well Collis’s “Build a Sleek Portfolio Site From Scratch” tutorial continues to achieve. It’s been months, yet it still posts strong numbers every week. Considering that fact, I determined to create a screen cast that shows you precisely 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 tedious. It just isn’t fun to watch someone enter margin values for thirty minutes. But it’s necessary.

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.

#container #mainContent #tier2
{
	margin-bottom: 273px !important;
}

#tier3 #news
{
	position: relative;
	left: .56em;
}

#header
{
height: 158px;
}

#header #login
{
	top: 1em;
	right: 1.5em;
}

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.

Source File |  Demo

2. Converting a Design From PSD to HTML

Okay, so you’ve gained a solid grasp of HTML, CSS, and Photoshop. The next step is to convert your first PSD into a working website. Don’t worry; it’s not as hard as you might think. I can’t think of a improved way to put your skills to the test. If you need assistance, evaluation these in depth video tutorials that show you precisely how to get the job done.

The 100% HTML and CSS

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.