How to Code a Homepage Template with HTML5 and CSS3

This tutorial has been created to guide you through the process of converting one of our most popular PSD homepage templates on Medialoot into fully coded HTML and CSS.

What We're Coding

Let's take a look at our design, we will be working with a Medialoot PSD template called Simply. Simply is a minimal homepage design with subtle colours and strong headline typography. If you aren't a Medialoot member it is still possible to follow along with the tutorial, click the preview below for a full resolution image to work from:

Understanding the Design

As you can probably see, Simply is a full width homepage design and has 7 distinct sections. We can use these sections to visually break the whole page down into a series of more manageable chunks to work with.

Setting up the Folder Structure

The first thing we need to do is create the folder structure for the project. It is fairly straightforward, all we need is an HTML file, a folder for images and a CSS file. So create a containing folder called 'simply' and two sub-folders called 'images' and 'css'. Then using a code editor create a new blank html file and save it as index.html.

Exporting the Assets

Almost all of this particular design can be easily recreated using just HTML and CSS, however we will need to extract a handful of image assets from the .psd file. To export the individual assets, open the Simply design file in Photoshop and locate the layer for the asset that you want to export. Then hold down the Alt key and click the layer visibility icon.

This will show only the selected layer, you can now go to the Image menu and select Trim... to trim the transparent pixels.

Select the Save for Web... option under the File menu and save the photographs as JPG files and any icons or images with transparency as PNG files.

Rinse. Repeat.

Here is a list of all the assets required, their filenames, extensions and image resolutions required:

This is the most basic skeleton that all html files need. It defines the document type (HTML5), the character set (UTF-8) and the title of the page.

In addition to the basic skeleton, I have also included a script called HTML5Shiv using a conditional comment 'if lt IE 9'. This will enable the use of semantic HTML5 tags such as <header>, <article> and <footer> in older versions of Internet Explorer that don't natively support HTML5.

Dissecting Our Design

As we have already split the design up into 7 distinct sections, we can now take this a step further and visually break it down into the basic structure that we will use for the HTML. Here is an image demonstrating how to do this:

You will notice that not every single element has been labelled, just the most important structural elements. The rest can be added later along with the content.

So let's put that structure into our HTML file, in-between the <body> tags:

Adding The Content

We can now add the content from the design into the HTML. We will also be adding more tags for minor elements such as paragraphs, headers, links, list items and anything that hasn't already been added:

Section 1: Header

The header consists of a logo and navigation menu. A <h1> tag is used for the logo and a span with a class of 'color' will allow us to set a different color for the full stop using CSS later. The navigation menu is a simple unordered list <UL> with 4 list items <li>, wrapped in the semantic HTML5 <nav> tags.

Section 3: Features

The 3 feature sections are each a list item in an unordered list, using CSS we will float the list items left to display them horizontally. To prevent other elements being affected by the floating we will also need a div with the class 'clear' and in the CSS later the class '.clear' will have the attribute 'clear:both'.

Section 5: Secondary Content

Similarly to the features section, we are floating each <article> left to display them horizontally. You will probably notice in this section that we have used some inline styles. I would not normally recommend this, but in this instance the background image for the articles would be classed as content rather than styling so it belongs in the HTML not CSS.

The next step is to link to some css files that we will be using. The first one is a css reset from Meyerweb that can be downloaded here: CSS Reset. Once it has been downloaded place it into the css folder and include this line of code in the <head> section of our HTML:

<link rel="stylesheet" type="text/css" href="css/reset.css">

Then we want to include a separate css file for our own custom styles. Create a new blank document with your text editor and save it as style.css, place it in the css folder and then include this line of code in the <head> section of the HTML (directly below the css reset line):

<link rel="stylesheet" type="text/css" href="css/style.css">

We will also be using a custom font from the Google Fonts library for the logo text. Including this line of code will allow us to use the 'Crete' font:

Adding the Styles

Global Styles

Some styles such as the body, headings, paragraphs and links are global attributes that apply to the whole document, so we will define these first. Most of these attributes, such as colours and fonts are simply extracted from the PSD file. The width of the wrapper is 960 pixels minus 10 pixels padding on either size. And due to using a CSS reset, attributes such as strong and small will need to defined.

Section 2: Hero Image

The #hero-image class has a height which is actually less than the dimensions of the background image, this gives you a few pixels top and bottom to play with if minor changes are needed in the future, or if you are making your design responsive.

Section 3: Features

Each of the feature elements share the #features ul li attribute but the individual .feature-1, .feature-2 and .feature-3 attributes are unique to their respective elements and define different icons for each feature.

Section 7: Footer

We split the footer into two main columns with a float: left attribute on both #footer-info and #footer-links. And use the same method to split the #footer-links section into 3 horizontal unordered lists.

Conclusion

And there we have it! By breaking the design down into sections and visualising the structure before we start coding, it is surprisingly straightforward to code a template using HTML5 and CSS3.

Don't forget that you can download the Simply template here:

Simply - Minimal Website Template

Simply is a minimal, flat single page PSD template with subtle colors and strong headline typography. This layout is designed with agencies in mind, and features a large clean header with navigation, top banner, list of features, content sections and footer.