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

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

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.

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.

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

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

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”.

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.

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.

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.

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.

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.

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.

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.

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 :