This second part of the tutorial series will now show you how to convert the Fresh Business Layout  PSD that we produced in the first part of this tutorial series,  to HTML & CSS.

If you missed part 1 or want to know how to create the design in Photoshop, visit part 1 below:

Part 1 ->

Preview

View a working example of the website here ->

Slice the design for images and styles ready for coding
1 Before we begin coding our fresh layout site, all the images and styles which we will be using need to be sliced and saved ready for use, when we begin coding. I have provided a resource zip file for you to download if you wish to save time and have the images ready:

Download Resource File Here ->

Setup a site in your favourite coding software (In this case, I am using Adobe Dreamweaver)
2 Now you need to setup the site and the files needed for the webpage. You need to create an index.html file, then two folders, one for the CSS file and one folder for the images we will be using. You should now have a site folder like this:

In the CSS folder, create a stylesheet named style.css, like so:

Setting up the index.html and linking to the stylesheets
3 We now need to setup the index.html and style.css files, ready for us to begin coding the site. We will be coding our site in HTML 5, so we will be using the new HTML 5 tags. In order to make sure the site is cross-browser compatible, we need to link to an external stylesheet which will make sure that Internet Explorer can read these new tags.

Coding the HTML for the layout
4 Now we are going to write all of the HTML for the layout before we begin any styling. I have broken the code down into the different elements to make it easier for you to follow.

You now need to write the HTML for the banner elements of the layout:

The first part of the main content is mainly text. I have used Lorem Ipsum dummy text to fill the layout:

Next is the blog part of the HTML:

Now you need to write the HTML for the sidebar elements. In HTML 5 there is now a tag specifically for the sidebar, which is called “aside”. You can use this in your markup:

To complete the HTML, you need to add the footer elements. Again HTML 5 has a new tag for the footer, which is called “footer”.

Coding the CSS for the layout
5 You now need to write the CSS for the layout. Again follow the order of the elements when writing the styles. These first styles are for the basic styles such as defining the font, size colour etc:

Here is the CSS for the header elements:

Now you need to write the CSS for the navigation elements

Here is the CSS for the search form:

Now you need to write the CSS for the banner elements:

Now the main content CSS styles:

Next, are the blog styles:

Just the single CSS style for the sidebar element:

Now you need to style the services elements of the layout:

To complete the sidebar styling, add the recent projects CSS styles:

To finish the CSS add the footer styles:

Thats the tutorial series completed! Thanks for following along and if you have any questions, feel free to leave a comment. You can download the site zip file below:

Download Site Files ->