Learn How To Convert A Beautiful Website from PSD To HTML5/CSS3

- - Tutorials

In the previous web design tutorial, i showed you a few techniques on how to design a clean & beautiful agency website from scratch using adobe phoroshop, this is second part two of the tutorial, in this part i will teach you how to convert the website we designed in the previous tutorial from PSD file to HTML5/CSS3 website, we are going to use javascript libraries to animate the slider and add awesome animation effects to the website sections.

Final Result :

Final Result

Final Result

Resources :

– Images by unsplash.com
Raleway font
Wow.js
Animate.css
Responsiveslides.js
– Logos by gertvanduinen.com

Setting up our Directories and Files :

The folders and files structure are very simple, in this step we will need one main/root folder called “Heros”, in which we will put all our files and folders. inside the “Heros” folder create the following sub-folders, “css” folder for css/styling files, “js” folder for javascript files, “img” folder for all the images we are going to use and the “fonts” folder, create a new text file inside the “Heros” main folder and rename it to “index.html”, all our HTML5 markup will be placed inside the “index.html”, the image below represent the files and folders structure that we just created.

files_folders_structure

Slicing the PSD file :

First, we need to slice the PSD elements as images, so we can use them later for the web, in our case we need to slice the logo, the slider images, the projects logos we need a gray version for the normal state and a white version of the hover state like the image below, we also need the clients logos and the social media icons in the footer section, it’s very easy to slice a psd element, let’s slice the logo as an example to show you the process of slicing an element.

Open the PSD template in photoshop, right click the logo group in the layers panel and select “Duplicate Group..” from the menu that appears.

screen2

A new window will pop up, change the Destination document to “New” and press “OK”.

screen3

Next we are going to remove the blank space around the logo, go to “Image > Trim..”.

screen4

A new window will appear, for the “base on” option select “Trasparent Pixels” and for “Trim Away” option check top, left, right and bottom check boxes, then press “OK”.

screen5

Finaly go to “File > Save as for Web & Devices..” or press “alt + shift + ctrl + s”, change the file type to “PNG-24” and make sure to check the “Transparency” check box as you can see in the image below, click save and save the image in the images folder “img” we created previously.

Untitled5_2

These are the steps to slice a PSD element, follow the same steps to slice the rest of the nedded elements.

Setting the Stylesheet/css files :

In this step we are going to create the three css files we will need in this tutorial, the “reset.css” file to reset the default css applied by the browser’s, the “animate.css” by Daniel Eden for the aimations we are going to add later to our website elements and the “main.css” file for all our custom css coding, let’s create these three files.

Begin by creating a new file inside the “css” folder we created previously , name it “reset.css”, open it in your favorite text editor, i personaly use sublime text, copy and paste the css code below into it and don’t forget to save it.

Next download the “animate.css” from this link and place it in the css forlder, then create a new file name it “main.css” and place in the “css” folder as well.

Setting the Javascript files :

For the javascript files we are going to need four javascript libraries, download the following libraries and place them in the “js” folder we created previously, we will need the JQuery library(download the production version), the responsiveslides.js library to animate the slider, and the wow.js library by Matthieu Aussaguel, it’s used to reveal animations added by animate.css when you scroll down a web page.

Setting the Startup Markup :

Now open the “Index.html” we created previously in your text editor, and write the following html5 layout.

As you can see we start with a simple HTML5 document, we declared the HTML5 doctype <!DOCTYPE html>, we added a title to the page using the “<title>” tag, we defined the character encoding using the <meta> tag and the charset attribute, we also linked the stylesheet/css and javascript files we created previously to our html document, the text between “<!–” and “–>” is a just a comment, it will not be displayed in the browser, i use it just to keep my code organised, please make sure to keep the same structure in the code above.

We need to link the fonts that we will use in our website, i will use the “raleway” font, you can download it from google fonts, or you can find it in the downloadable zip file in the begening of this tutorial, we will use the Regular, Bold and Semi-Bold fonts, now open the “main.css” file in your text editor and past in it the code below.

Next we will add some general styling we will use along the way, copy and past the code below, in the “main.css” file, right below the fonts code we added in the step before.

In the css code above, we added some css styling for the heading tags(h1, h2, h3..), then we styled the “.clearfix” which we will use to clear the floated elements.

By looking at the PSD template, you will notice that the template is composed of seven sections, which are the header, the slider, the services section, the projects section, the clients section, the call to action section and the footer section, we well start by creating and styling the header section based on this composition.

Header :

html :

The header section is very simple, it consist of two element, the logo and the navigation menu, copy and the past the code below between the <body> and </body> tags.

In the HTML code above, we created the header section using the html 5 <header> tag, inside it we added a div with the class “container”, we will use the “container” class to center the layout with the browser window, the “container” div is wrapping the logo image using the <img> tag which is nested inside an anchor link <a>, right below the logo, we added the navigation menu using the html5 tag <nav> , which is wrapping an unordered list <ul> containing the navigation menu anchor links <a>, notice in the first navigation menu list item, we added the “selected” class to the anchor link <a>, we will use it later to style the current page state.

css :

We need to style the “container” class, copy and past the following code right below the fonts code we added before inside the “main.css” file.

As discussed previously the “container” class is used to center the layout with the browser window, we applied to it a fixed width of 1100px, 0px for the top and bottom margin and auto for the left and right margin in order to center it.

Now let’s style the header section.

In the css code above, we started by styling the header “head”, by giving a 100% width it will take the full screen width, a fixed height, a white background color and we positioned it relatively to the browser window, then we floated the logo “.logo” to the left with a top margin of 30px to center it vertically with the header “head”, the same thing goes with the “nav” element, we floated the navigation menu “nav” to the right and gave it a top margin of 37px.

After that we moved to the unordered list items “li”, we removed the default list style, we floated the list “li” items to the left to put all the items side-by-side, we used a left margin to get space between each menu element, for the anchor links “a” inside the list items “li”, we applied some basic css styling to it, we removed the default underline style, we applied a dark gray “5e5d5d” color to the link text, set the “raleway-regular” as the font family, set a font size and added the transition css3 property to get a nice fade effect on the hover state, we added the vendor prefixes “-o-“, “-moz-” and “webkit” to ensure that the transition property is supported by the popular browsers like safari, google chrome, opera…, then we changed the text color of the element with the “selected” class, which is used to indicate the current page in the navigation menu, we also used the pseudo element “:hover” to change the text color of the navigation menu links from gray to red when the mouse cursor is over them.

Open the “index.html” file in your browser, you should see something similar to the image below.

screen6

Slider :

Now let’s move to the slider section, in this part we will use the responsiveslides.js library we downloaded previously, to animate the slider, we are going to start by the HTML layout first, then the css styling and finally the javascript code.

html :

Copy the code below and past right below the header html code we added in the previous step.

We started by creating the slider section wrapper using the html5 <section> tag with the class “slider_wrapper”, then we added a div with the id “slides”(the id must be unique and never applied to an html element in the same page), which contains three div’s with the class “slide”, inside each “slide” div we added the slider images <img>(the images are 1700x670px), and the slider captions <h3> with the “caption” class.

css :

Now let’s add the css for to style the slider, at the end of this section you will find the complete css code for the slider section.

First, we styled the slider section with the class “.slider_wrapper”, we want it to take the full width of the browser window, we set the height to auto, we positioned it relatively then we set the overflow property value to hidden, just to clear the floated elements inside it.

After that we positioned the slides with the class “.slide” relatively to the parent element “slider_wrapper” section, then we set the float property to get each slide side-by-side.

Here we applied some css properties to the slider images “img”, to make sure the image take the full width of the screen we set the width to 100%.

We then moved to the captions “.caption” style, we set the width to 100%, we centered it horizontally using the text-align property, we used a css trick to center the “.caption” element vertically, by setting the top property value to 50% and applying the translateY() function to the transform css3 property with a value of -50%.

Now we are going to style the slider pagination, the html markup for the pagination will be added automatically inside the “slider_wrapper” section, after we initialize the slider with javascript, the html markup will look like the html code below, it consist of an unordered list <ul> containing a list items <li> with nested anchor links </a>, each link have a number refereeing to each slide.

Now it’s time to style the slider pagination.

We began by styling the unordered list “ul” element with the class “.rslides_tabs”, we absolutely positioned it, and we moved it 80px from the bottom, we set the display property to inline in order to place the list items “li” side-by-side, we also centered the anchor links inside it using the text-align property, then we applied some basic styling to the anchor links “a” inside the “li” elements, we used the test-indent property to get ride of the text numbers inside the anchor links.

The complete code for the slider section :

js :

Now open the “main.js” file inside the “js” folder, past the code below in it to initialize the slider, this code will animate the slider and will add the pagination html markup automatically to it.

Save the file, and open “index.html” in the browser, you should see something like the image bellow.

screen7

Services :

First, let’s add the html markup for the services section, copy and past the code below right below the slider html markup.

html :

The html above consist of a section <section> with three classes “services” class, “container” class to center the section, and “clearfix” class to clear the floated elements inside it, we added a “section_title” div which will act like a container for the services section title <h2>, and three additional classes, “animated” and “fadeInUp” classes are both already styled inside the animate.css, we used the “fadeInUp” class to add a cool fade in effect to the services section title, you can find more effects here, the “wow” class will be used by the “wow.js” library, to reveal the animations when you scroll down to the services section.

Right below the “section_title” div, we added the “services_liste” div, it consist of an unordered list <ul> with three list items, each list item contains the service title <h3>, a short description of the service <p> and a read more link <a>, notic we applied the same three classes as the “section_title” div to the three list items <li>, but instead of the “fadeInUp” effect we used the “fadeInRight” effect, we specified a delay before the animation starts for each list item using the data-wow-delay attribute.

css :

Now lets style the services section :

As you can see the styling for services section is pretty simple and basic, we set the top and bottom padding to 100px to get enough space between the slider and the projects section which we will add later, we added a separator to separate the projects section from services section by using a bottom border, we floated the services list items “li” to the left to put the them in the same level, then we styled the services title “h3”, the services short description “p” and the read more link “a”.

js :

Now we are going to activate the wow.js, in order to reveal the animation effects we applied previously to the services section title and the list of services when we scroll down the page.

Copy and paste the javascript code above right below the slider code inside your “main.js” file, you should get the same result as the image below, the animation effects will start when you scroll down to the services section.

screen8

Projects Section :

html :

Go-ahead and past the html markup right below the services section html code.

The projects section is similar to the services section, it consist of a div with the class “section_title” wrapping the title <h2> and a more projects link <a>, notice we added a span inside the anchor link to hold the arrow, we used the html character “→” to add the little arrow, below the “section_title” div we add a “project_list” div containing an unordered list <ul>, inside each list item <li>, we put an anchor link with a span to hold the projects logo.

css :

The css above is quite simple, we started by styling the “projects” section, with a padding of 100px for the top and bottom to space the content inside it form the top and bottom, we used a bottom border as a separator, then we moved to the “more projects” link and the little arrow inside it, we set the nested links “a” inside the unordered list items “li” display property to block, then we gave it a fixed height and width to make them look like a box, we applied a nice red color to the background for the hover state, then we used the css trick we applied previously to the slider caption, to center the projects logos vertically, and finally we added the the projects logos we slices in the beginning of this tutorial for the normal and the hover effect.

Open the “index.html” file in the browser, and see the result similar to the image below.

screen9

Clients section :

html :

The client section is also similar to the services and projects section, it’s consist of a title and list of clients logos, we used the logos we sliced in the beginning of this tutorial, i think the css code below is self-explanatory, so just copy and paste it right below the project section html markup in the “index.html” file.

css :

Let’s style the client section now, the css code below for the clients section is very simple, the “section_title”” div is already styled, we removed the default list style, and floated the client logos list “li” to the left to put them in the same level.

The result should be similar to the image below.

screen10

Call To Action section :

html :

The call to action section “cta”, is made of an <h3> title with the class “cta_title”, and an anchor link <a> we will style it later to make look like a button.

css :

For the cta(call to action) section styling, we set the “.cta” section to 100%, we want it to take the full width of the screen, we used a soft gray color #fafafa for the background color and we centered elements inside it using the text-align property, then we styled the “h3” title and the anchor link “a”, to make the anchor link “a” look like a big button, we set the top and bottom padding to 20px, the left and right padding to 40px and we applied a nice red color #ff4141 to the background, we used the new css3 property border-radius to get a 2px rounded corners, we added the transition css3 property to add the fade effect to the button for the hover state, we changed the cta button “.cta_button” background red color to a softer red for the hover state using the pseudo element “:hover”.

Now save your files and open them in the browser to see the result, the screen above is the final result.

screen11

Footer :

At the first look, the footer section looks a little bit complicated, but actually it’s very simple and easy to understand, let’s start first by adding the html markup to the “index.html” file, place below the call to action section html code.

html :

We started by creating the footer section using the html5 tag <footer>, notice we added the “clearfix” class to clear the floated elements inside it, then we added a “copyright” div which will hold the logo image <img> and the copyright text paragraph <p>, right below the “copyright” div we added the “footer_links” div which contains three div’s “sm” (abbreviation of social media), “about” and “address” each div represent a column, inside the “sm” div we put a title <h3> and an unordered list <ul>, each list item <li> is wrapping a link to a social media network, the “about” div is similar to “sm” div, it consist of a title <h3> and an unordered list <ul> with nested anchor links <a> linking to inner pages, the “address” div consist of a title <h3> like the other two columns, the address text <p> and a phone number.

css :

First, we used top and bottom padding of 100px to space the footer area, then we floated the “.copyright” div to left and the “.footer_links” div to right, we applied some basic style for the text paragraph “p” inside the “.copyright” div.

We floated the “.footer_links” div to the right, to put it side-by-side with the “copyright” div, then we set a fixed width for the div’s with the class “columns” and floated them to left to put them in the same level, after that we set the margin-right to 40px to get enough space between each column, we used the css3 property :last-child to remove the right margin from the last column inside the “footer_links” div, and we applied some styling the title “.columns_title” of each column.

In this piece of code, we began by styling the unordered lists “ul” inside the “.footer_links” div, we removed the default list style, we set the display property to block to place each list item under the other, with a bottom space of 30px, then we styled the nested anchor links “a”, and added the hover state effect.

We add the social media icons we sliced previously, to each social network by using the pseudo element “:before”.

Lastly, we applied some css styling to the address text “p” and the phone number, we applied the “raleway-regular” font using the font-family property, and used the letter-spacing to space the text characters, we also applied the “raleway-bold” font to the phone number, and set the font-weight property to bold.

Save the files and see the result, below is the final result.

screen12

We are done.

The final result is a beautiful website template, with cool effects we added thanks to the “animate.css”, “Jquery.js” and “wow.js” library, we hope you have learned something new from this tutorial on how to convert a psd file to HTML5/CSS3 template, if you have any questions or suggestions please let us know in the comment section below.

Get Free Update !

Join our mailing list today and receive exclusive web design tutorials and high quality free web resources.

  • alios

    Is there a reason you define js file top on the page not bottom of body?

    • Thanks for your comment @alios, in our case the only reason is to keep the HTML layout organised and easy to understand by beginners.

  • Quoc Nguyen

    how do you slice normal state and hover state? also there are 3 slide images but i am able to slice 1 image? sorry i am kind of noob in this area 🙁

    • Hi @disqus_Llk0EVE02u:disqus we don’t slice the normal & hover state, we style them using the css pseudo class ‘:hover’. You can download more images from unsplash.com and use them for the slider.

  • nayelnoorani

    First up, thanks for the BRILLIANT example you’ve put up here. Very easy to work through and I’ve learned a lot by just following and searching for things I didn’t understand. Hats off to you.

    I have a few questions along the way. Some questions are probably very basic, so please do bear with me.

    1. Why do you use a separate container within the header tag? Applying the width styling to the header tag and removing the width:100% line appears to achieve the same effect. Wouldn’t cutting out the extra tag reduce file size without compromising design?

    2. I learn that the *zoom property targets IE 7 only. If that understanding is correct, can I eliminate that line from my code, assuming I’m not concerned with IE9-?

    3. Why does the header nav ul li {} styling appear twice?

    • Hi @nayelnoorani:disqus , than you for your amazing comment, Here are the answers for your questions:

      1. You can use the method you suggested, it will only work in our example(or in general if you have the same header & body background color), but you will get similar result to the attached image if you use a different header background color, that’s why we prefer to use a container inside the header tag.

      2. Yes you are right, you can remove it.

      3. It’s just a mistake from our side, we removed the second “header nav ul li {}”, thank you for pointing it out.

      Let us know if you need more explanation.

      • Al Hassan

        Great, great tutorial! Thanks for making it extremely clear.

        One thing, I do not see the step where you created the main.js file? Maybe that’s why my slider is tiling instead of well, sliding. Also, what did you name the dots on the slider?

        Cheers.

        oops! wrong tree.

  • Hello, have a reason for no declarate the class “caption” on the index.html h3 tags in this example?

  • klajdi

    Hi..how can use fixed potion to my header?

  • hisabudin siddiqui

    I started to create the template according your instruction . but i found that i used the same code as you but my layout is not like your design . firstly in header portion logo is not adjusted with margin and menu also . nd lot of this type of problem . and can pls tell me that we use reset.css as copy paste or we type it like general css . I didnt understand most of the property which are used in reset .css . where we use it ? can you help me pls ?

  • Dendra I. Maulana

    Thansk for this tutorial, very helpfull to me, and i share this tutorial to my friend to learn in pixelhint :))

    • You are welcome @dendramaulana:disqus 🙂

  • Dalmatinac

    Its a nice tutorial, I learned some tricks. Twitter Bootstrap grid would work fine for this website layout, and save some time.

    • Thank you @sancopansa:disqus for your comment.

  • Shaquille Yang

    Great article! It helps me understand how a beautiful website is accomplished. I will read the other tutorials in this site! Great thanks!

    • Glad you liked the tutorial @shaquilleyang:disqus , make sure to subscribe to our newsletter to get notified when we publish new tutorials.