How to Create a Portfolio Web Layout in HTML / CSS

On 24 Jul, 2012 By With 2 Comments

Converting PSD to HTML has been a challenge to every designer, you’re progress will depend on a couple of things, complexity of the layout, skills of the designer and how organize the PSD layers.

Today we will continue with our tutorial in which we will convert it to a working HTML  / CSS. If you miss the PSD tutorial, you can check it out here.

You can download the PSD at the bottom of this tutorial!

Before we begin, we will download a couple of things:

  1. League Gothic from fontsquirrel
  2. Kaushan Script from fontsquirrel
  3. Icons from here
  4. Social Media Icons from iconarchive
  5. Twitter Bird from iconarchive
  6. Portfolio Layout PSD from here
abbe How to Create a Portfolio Web Layout in HTML / CSS

Here’s the Demo  

Open your Photoshop and we will begin to cut the important images.

mac How to Create a Portfolio Web Layout in HTML / CSS

First we cropped the Mac Book Pro, and saved it as png.

bg How to Create a Portfolio Web Layout in HTML / CSS

Next is the background, grab the Crop Tool (C) and select a certain area on the content section. Noticed that I used Marquee Tool here, just to show you the screenshot.

Now that we have what we need, we will create our file structure. We will use a free generator for that so we can save some time, head over to instantblueprint.com.

instantblueprint.com  How to Create a Portfolio Web Layout in HTML / CSS

Choose HTML5, and the rest are defaults.

folder How to Create a Portfolio Web Layout in HTML / CSS

If you open your folder from instantblueprint, you’ll have a folder structure like this. A helpful generator tool 🙂

Next, we will code the HTML first and CSS styling on last. Open your Code editor, mine is sublime text 2 open your index.html.

This is for the header code.

Contect Section

Footer Section

CSS

The Secret of the CSS is the 960 Grid System, if you notice some  of our class is called col380, col480, col940. This is really a helpful class and can save you a lot of time, I discover this by using Bones Theme when creating wordpress themes. I hope you’ll include this on your CSS too 🙂

One more thing before we call wrap this, we need to check if we pass the W3C validator.

validator How to Create a Portfolio Web Layout in HTML / CSS

We pass! We have a warning, but it’s minor 🙂

Hope you guys learned something new about this conversion, next part is using Bones Theme to convert this into full pledge WordPress Theme. So stick around and we will cover how to create a wordpress theme on the next part.

2 Responses to “How to Create a Portfolio Web Layout in HTML / CSS”