PSD to HTML5 / CSS3 Conversion Tutorial for Beginners

Final Result

Final Result

Details

  • Program: Adobe Dreamweaver or any other text editor
  • Technology: HTML 5, CSS 3
  • Difficulty: Beginner

Some html5 basics

Lets check some html5 updates before dive into the tutorial to make sure we will be in same page.

  1. No need to close the empty tags by /> like xHTML, just use >. Example <br /> will now replaced with <br>
  2. So form element like text input will look like this. <input type=”text”>

HTML5 form attribute that we will be using

  1. Required:This attribute don’t need any values, if included the html5 form will require that input field before sending data. If any required field is not filled up the browser will show a popup message, you don’t need to specify any javascript validation because html5 will do it for you.
    Use: <input type=”text” required>
  2. WAI-ARIA:WAI-ARIA is an incredibly powerful technology that allows developers to easily describe the purpose, state and other functionality of visually rich user interfaces – in a way that can be understood by Assistive Technology. It’s also defines a way to make Web content and Web applications more accessible to people with disabilities. More resources can be found here. How you use WAI-ARIA is using aria-*. The * will be replaced by roles. Check this article for more details and also try
    Wai-aria in html5.
  3. Pattern: Regex pattern for validating the input field.

Step 1 : Setting up the environment

File Structure

Make a folder structure like the image. I usually put a jquery file and blank scripts.js in the js folder. Also add a basic html5 file in root and name it form.html

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" >
    <meta name="author" content="Web Remix">
    <title>PSD to html5/css3</title>
    </head>
    
    <body>
    </body>
</html>

Open the html file in a browser you should see a blank white page. Let’s add scripts and a style sheet inside <head></head>.

    <link rel="stylesheet" href="styles.css" type="text/css">
	<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>

Step 2: Make the plan

When you see a psd file you should have a draft idea about how you many top level div you will use.

plan

Step 3: Start with the conversion

Open the psd file press Shift+Ctrl+Alt+E / Shift+Command+Option+E to have a flatten version of the artwork. Here is a great resource to learn photoshop shortcuts.

Flatten image

We have noise in background lets pick that up. Select the flattened layer and make a squired selection using Marquee squire tool. Size should be around 95-110px. Copy and hit ctrl+n to make a new document. Size of the new document will be automatically adjusted according to you copied area. Now paste the copied image and press Shift+Ctrl+Alt+S / Shift+Command+Option+S to save for web. For this particular pattern I will advice to save it in png24 loss less format.

pattern

Now add the pattern as background image with background color of #111 in css.

body{
	background:#111 url(images/bg-pattern.png) repeat;
}

Make the containers

Make the container in html.

	<div id="form-container">
        <div id="form-header"></div>
        <form id="form" action="post">
        	
        </form>
    </div>

Add form elements

Now add form elements and form header. We have two text input field, one password field and a submit button.

<div id="form-container">

        <div id="form-header">
            <span>Signup</span>
        </div>

        <form id="form" action="post">
        
            <input type="text" id="username" name="username" value="Username" title="Username" required aria-required="true" pattern="\S{5,}">
            <br>
            <input type="text" id="email" name="email" value="Email" title="Email" required aria-required="true" pattern="^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$">
            <br>
            <input type="password" id="password" name="password" value="Password" title="Password" required aria-required="true" pattern="\S{7,}">
            <br>
            <input id="submit" type="submit" value="Submit" name="posted">
            
        </form>
</div>

We will require all input fields and also set the aria-required=”true” and for the validation we will use regex pattern. I assume the username should be at least 5 letters and without space and pattern for this is \S{5,} and for email validation use the pattern ^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$ and pattern for the password I used \S{7,} which means no space and at least 7 character needed for password you can go more complex if you like.


Step 4: Adding CSS

Lets add css to make it prettier and most importantly same as the PSD file. It is always good idea to use some basic resets and common classes that we will need most often.


a img, input{
	outline:none;
}

/* common classes */

.float-left{
	float:left;
}

.float-right{
	float:right;
}

.clear{
	margin:0;
	padding:0;
	clear:both;
}


Styling containers

To find out the width of the form lets go back to photoshop and grab the slice tool and draw a box which cover the full width of the form. Now double click the slice to see the width of the slide. The width is 588px. Also find the form background color (#1d1d1d) by eyedropper tool.

Lets add styles to the container and give it nice border radius with a nice 70% black (#000) glow with rgba. Remember the width 588px and center it using margin:auto;. For vertical centering lets use margin top for now. We will add some javascript later for perfect centering.

#form-container{
	width:588px;
	margin:auto;
	margin-top:10%;
	border:1px solid #000;
	background:#1d1d1d;
    
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
    
	font-family:'Myriad Pro', Arial, Helvetica, sans-serif;
	
	-moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .7);
	-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .7);
	box-shadow: 0 0 1px 1px rgba(0, 0, 0, .7);
}
step 4-2

Styling Header

When we look at the header its simply have a linear gradient and rounded border about 10pixel with top left and top right side. That can easily done by css3

#form-header{
	font-size:24px;
	color:#e0e0e0;
	text-transform:uppercase;
	height:30px;
	background: #111111;
	border-bottom:1px solid #000;
	padding: 20px 30px;
	
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	-moz-border-top-left-radius:10px;
	-moz-border-top-right-radius:10px;
	-webkit-border-top-left-radius:10px;
	-webkit-border-top-right-radius:10px;
	
	-moz-box-shadow: inset 0px 2px 1px #2a2a2a;
	-webkit-box-shadow: inset 0px 2px 1px #2a2a2a;
	box-shadow: inset 0px 2px 1px #2a2a2a;
	
	/* Firefox 3.6+ */ 
	background: -moz-linear-gradient(100% 100% 90deg, #101010, #181818); 
	/* Safari 4-5, Chrome 1-9 */ 
	/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */ 
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#181818), to(#101010)); 
	/* Safari 5.1+, Chrome 10+ */ 
	background: -webkit-linear-gradient(#181818, #101010); 
	/* Opera 11.10+ */ 
	background: -o-linear-gradient(#181818, #101010);
	 /* for IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#181818', endColorstr='#101010');
}

Now we have our nice header same as the photoshop file!

step 4-3

Styling Form Elements – From Input

Before styling the form elements lets add some padding to the form.

form{
	padding:30px;
}

Lets style form text and password input field. When looking at the photoshop version we will see inner shadow which can be done by css3 box-shadow property with inset keyword. We also have a white shadow which gives us a nifty 3d look, we also use box-shadow for that. There is also a gradient and 10px of border radius with black border.

form input[type=text], form input[type=password]{
	background:#0e0e0e;
	border:1px solid #000;
	padding: 10px;
	color:#444444;
	font-size:24px;
	margin-bottom:20px;
	font-weight:bold;
	width:510px;
	
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	
	-moz-box-shadow: 1px 1px #343434,  inset 5px 5px 5px black;
	-webkit-box-shadow: 1px 1px #343434, inset 5px 5px 5px black;
	box-shadow: 1px 1px #343434, inset 5px 5px 5px black;
	

	/* Firefox 3.6+ */ 
	background: -moz-linear-gradient(100% 100% 90deg, #171717, #0d0d0d); 
	/* Safari 4-5, Chrome 1-9 */ 
	/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */ 
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0d0d0d), to(#171717)); 
	/* Safari 5.1+, Chrome 10+ */ 
	background: -webkit-linear-gradient(#0d0d0d, #171717); 
	/* Opera 11.10+ */ 
	background: -o-linear-gradient(#0d0d0d, #171717);
	 /* for IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0d0d0d', endColorstr='#171717');
}

The form will look like this.

step 4-4

Styling Submit Button

Referring to the PSD file we have two state for the submit button. Normal and the mouse down state. For most of the effects we will use css3. But we will need to use images for Color ovals. Lets save those color ovals as image first. Select both submit button groups and align center and Align both button state so they overlap exactly.

Submit button

Now rasterize the button layers and save the color ovals with same image dimension. Now we can add css and add those ovals as background image.

styling submit button

Lets start syling. We need to float the button right according to design. After floating we also need to add a blank div to html and set its css clear property both. I have made a class called .clear for frequent use. Add the blank div after the submit button.

<input id="submit" type="submit" value="Submit" name="posted">
<div class="clear"></div>

Now add these css.

form #submit{
	float:right;
	background:#111 url(images/submit-bubble.png) center left no-repeat;
	color:#e0e0e0;
	border:1px solid #000;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	padding:8px 25px;
	font-family:'Myriad Pro', Arial, Helvetica, sans-serif;
	font-size: 24px;
	padding-left: 40px;
	
	-moz-box-shadow: inset 0px 2px 1px #2a2a2a;
	-webkit-box-shadow: inset 0px 2px 1px #2a2a2a;
	box-shadow: inset 0px 2px 1px #2a2a2a;
	cursor:pointer;
}

form #submit:hover:active{
	background:#111 url(images/submit-bubble-click.png) center left no-repeat;
	color:#FFF;
	
	-moz-box-shadow: 1px 1px #343434, inset 2px 2px 1px #000;
	-webkit-box-shadow: 1px 1px #343434, inset 2px 2px 1px #000;
	box-shadow: 1px 1px #343434, inset 2px 2px 1px #000;
	padding-top:9px;
	padding-bottom:7px;
}

Notice how we target the mouse down state, using pseudo class :hover and :active together which should work on all modern browsers. If you don’t like this method you can surely do it via jQuery.


Styling Validation

Html5 and CSS3 you can target the validation pseudo classes :valid, :invalid and style them accordingly. Let us add some red glow when user inputs not validate and green glow when user inputs valid information.

input:focus:invalid {	
	-moz-box-shadow: 0 0 3px 2px #ff2400,  inset 5px 5px 5px black;
	-webkit-box-shadow: 0 0 3px 2px #ff2400, inset 5px 5px 5px black;
	box-shadow: 0 0 3px 2px #ff2400, inset 5px 5px 5px black;

	/* Firefox 3.6+ */ 
	background: -moz-linear-gradient(100% 100% 90deg, #171717, #0d0d0d); 
	/* Safari 4-5, Chrome 1-9 */ 
	/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */ 
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0d0d0d), to(#171717)); 
	/* Safari 5.1+, Chrome 10+ */ 
	background: -webkit-linear-gradient(#0d0d0d, #171717); 
	/* Opera 11.10+ */ 
	background: -o-linear-gradient(#0d0d0d, #171717);
}

input:focus:valid {
	-moz-box-shadow: 0 0 3px 2px #24a900,  inset 5px 5px 5px black;
	-webkit-box-shadow: 0 0 3px 2px #24a900,  inset 5px 5px 5px black;
	box-shadow: 0 0 3px 2px #24a900,  inset 5px 5px 5px black;
	
	/* Firefox 3.6+ */ 
	background: -moz-linear-gradient(100% 100% 90deg, #171717, #0d0d0d); 
	/* Safari 4-5, Chrome 1-9 */ 
	/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */ 
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#171717), to(#0d0d0d)); 
	/* Safari 5.1+, Chrome 10+ */ 
	background: -webkit-linear-gradient(#171717, #0d0d0d); 
	/* Opera 11.10+ */ 
	background: -o-linear-gradient(#0d0d0d, #171717);
}

Now you should get nice styling green glow when adding valid info and red when adding wrong info.

style validation

Step 5: Adding some javascript

At this stage we are done with html and css. Now I will add some javascript that I use most often with form elements. First of all watermark the default text so when user click the input box the text goes away.


$=jQuery.noConflict();
    
$(document).ready(function(){
	//add .hide class to all input field you want the watermark
	$(".hide").watermark();
    
    // Center vertically
	var div = $("#form-container");
	div.css("margin-top" , ( $(window).height() - div.height() ) / 2+$(window).scrollTop() + "px");
    
});

jQuery.fn.watermark = function(){
	var $ = jQuery;
	$(this).focus(function() {
		$(this).filter(function() {
			// Check to see if we have a blank field or the default text
			return $(this).val() === "" || $(this).val() === $(this).attr("title") || $(this).val() === "Your message here...";
		}).val("")/*.css("color", "#808080")*/;
	});

		// When we click off of the field, we expect it to replace the watermark,
		// unless we have entered text
	$(this).blur(function() {
		$(this).filter(function() {
			// Check to see if the field is blank
			return $(this).val() === "";
		})/*.css("color", "#d0d0d0")*/.val($(this).attr("title"));
	});
}


Final Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" >
<meta name="author" content="Web Remix">
<title>PSD to html5/css3</title>
    <link rel="stylesheet" href="styles.css" type="text/css">
	<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>
</head>

<body>
	<div id="form-container">

        <div id="form-header">
            <span>Signup</span>
        </div>

        <form id="form" action="post">
        
            <input type="text" class="hide" id="username" name="username" value="Username" title="Username" required aria-required="true" pattern="\S{5,}">
            <br>
            <input class="hide" type="text" id="email" name="email" value="Email" title="Email" required aria-required="true" pattern="^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$">
            <br>
            <input class="hide" type="password" id="password" name="password" value="Password" title="Password" required aria-required="true" pattern="\S{7,}">
            <br>
            <input id="submit" type="submit" value="Submit" name="posted">
            <div class="clear"></div>
        </form>
</div>
</body>
</html>

CSS

/* CSS Document */

body{
	background:#111 url(images/bg-pattern.png) repeat;
}

a img, input{
	outline:none;
}

#form-container{
	width:588px;
	margin:auto;
	margin-top:10%;
	border:1px solid #000;
	background:#1d1d1d;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	font-family:'Myriad Pro', Arial, Helvetica, sans-serif;
	font-weight:500;
	
	-moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .7);
	-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .7);
	box-shadow: 0 0 1px 1px rgba(0, 0, 0, .7);
	
}

#form-header{
	font-size:24px;
	color:#e0e0e0;
	text-transform:uppercase;
	height:30px;
	background: #111111;
	border-bottom:1px solid #000;
	padding: 20px 30px;
	
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	-moz-border-top-left-radius:10px;
	-moz-border-top-right-radius:10px;
	-webkit-border-top-left-radius:10px;
	-webkit-border-top-right-radius:10px;
	
	-moz-box-shadow: inset 0px 2px 1px #2a2a2a;
	-webkit-box-shadow: inset 0px 2px 1px 2a2a2a;
	box-shadow: inset 0px 2px 1px 2a2a2a;
	
	/* Firefox 3.6+ */ 
	background: -moz-linear-gradient(100% 100% 90deg, #101010, #181818); 
	/* Safari 4-5, Chrome 1-9 */ 
	/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */ 
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#181818), to(#101010)); 
	/* Safari 5.1+, Chrome 10+ */ 
	background: -webkit-linear-gradient(#181818, #101010); 
	/* Opera 11.10+ */ 
	background: -o-linear-gradient(#101010, #181818);
	 /* for IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#181818', endColorstr='#101010');	
}

form{
	padding:30px;
}

form input[type=text], form input[type=password]{
	background:#0e0e0e;
	border:1px solid #000;
	padding: 10px;
	color:#444444;
	font-size:24px;
	margin-bottom:20px;
	font-weight:bold;
	width:510px;
	
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	
	-moz-box-shadow: 1px 1px #343434,  inset 5px 5px 5px black;
	-webkit-box-shadow: 1px 1px #343434, inset 5px 5px 5px black;
	box-shadow: 1px 1px #343434, inset 5px 5px 5px black;
	

	/* Firefox 3.6+ */ 
	background: -moz-linear-gradient(100% 100% 90deg, #171717, #0d0d0d); 
	/* Safari 4-5, Chrome 1-9 */ 
	/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */ 
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0d0d0d), to(#171717)); 
	/* Safari 5.1+, Chrome 10+ */ 
	background: -webkit-linear-gradient(#0d0d0d, #171717); 
	/* Opera 11.10+ */ 
	background: -o-linear-gradient(#171717, #0d0d0d);
	 /* for IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0d0d0d', endColorstr='#171717');
}

form #submit{
	float:right;
	background:#111 url(images/submit-bubble.png) center left no-repeat;
	color:#e0e0e0;
	border:1px solid #000;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	padding:8px 25px;
	font-family:'Myriad Pro', Arial, Helvetica, sans-serif;
	font-size: 24px;
	padding-left: 40px;
	
	-moz-box-shadow: inset 0px 2px 1px #2a2a2a;
	-webkit-box-shadow: inset 0px 2px 1px #2a2a2a;
	box-shadow: inset 0px 2px 1px 2a2a2a;
	cursor:pointer;
}

form #submit:hover:active{
	background:#111 url(images/submit-bubble-click.png) center left no-repeat;
	color:#FFF;
	
	-moz-box-shadow: 1px 1px #343434, inset 2px 2px 1px #000;
	-webkit-box-shadow: 1px 1px #343434, inset 2px 2px 1px #000;
	box-shadow: 1px 1px #343434, inset 2px 2px 1px #000;
	padding-top:9px;
	padding-bottom:7px;	
}

input:focus:invalid {	
	-moz-box-shadow: 0 0 3px 2px #ff2400,  inset 5px 5px 5px black;
	-webkit-box-shadow: 0 0 3px 2px #ff2400, inset 5px 5px 5px black;
	box-shadow: 0 0 3px 2px #ff2400, inset 5px 5px 5px black;

	/* Firefox 3.6+ */ 
	background: -moz-linear-gradient(100% 100% 90deg, #171717, #0d0d0d); 
	/* Safari 4-5, Chrome 1-9 */ 
	/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */ 
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0d0d0d), to(#171717)); 
	/* Safari 5.1+, Chrome 10+ */ 
	background: -webkit-linear-gradient(#0d0d0d, #171717); 
	/* Opera 11.10+ */ 
	background: -o-linear-gradient(#0d0d0d, #171717);
}

input:focus:valid {
	-moz-box-shadow: 0 0 3px 2px #24a900,  inset 5px 5px 5px black;
	-webkit-box-shadow: 0 0 3px 2px #24a900,  inset 5px 5px 5px black;
	box-shadow: 0 0 3px 2px #24a900,  inset 5px 5px 5px black;
	
	/* Firefox 3.6+ */ 
	background: -moz-linear-gradient(100% 100% 90deg, #171717, #0d0d0d); 
	/* Safari 4-5, Chrome 1-9 */ 
	/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */ 
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#171717), to(#0d0d0d)); 
	/* Safari 5.1+, Chrome 10+ */ 
	background: -webkit-linear-gradient(#171717, #0d0d0d); 
	/* Opera 11.10+ */ 
	background: -o-linear-gradient(#0d0d0d, #171717);
}


/* common classes */

.float-left{
	float:left;
}

.float-right{
	float:right;
}

.clear{
	margin:0;
	padding:0;
	clear:both;
}

jQuery/Javascript

// JavaScript Document

$=jQuery.noConflict();
    
$(document).ready(function(){
	//add .hide class to all input field you want the watermark
	$(".hide").watermark();
	
	// Center vertically
	var div = $("#form-container");
	div.css("margin-top" , ( $(window).height() - div.height() ) / 2+$(window).scrollTop() + "px");
	
});

jQuery.fn.watermark = function(){
	$(this).focus(function() {
		$(this).filter(function() {
			// Check to see if we have a blank field or the default text
			return $(this).val() === "" || $(this).val() === $(this).attr("title") || $(this).val() === "Your message here...";
		}).val("")/*.css("color", "#808080")*/;
	});

		// When we click off of the field, we expect it to replace the watermark,
		// unless we have entered text
	$(this).blur(function() {
		$(this).filter(function() {
			// Check to see if the field is blank
			return $(this).val() === "";
		})/*.css("color", "#d0d0d0")*/.val($(this).attr("title"));
	});
}

Always feel free to comment if you have any questions :)

No TweetBacks yet. (Be the first to Tweet this post)

About Sisir

Hello! I am a freelance graphic designer, developer and engineer based on Bangladesh. I like my PC, my coffee cup and Internet.

,

15 Responses to PSD to HTML5 / CSS3 Conversion Tutorial for Beginners

  1. Shaon July 25, 2011 at 1:18 pm #

    nice job dude!

    very helpful for the amature like me!

  2. dreamweaver training uk August 4, 2011 at 11:02 pm #

    hey! nice!! check us out too, all about DreamWeaver and computers! later!!

  3. AseEsa January 8, 2012 at 12:18 pm #

    Great tutorial!

  4. tableau design February 3, 2012 at 3:44 pm #

    nice post!
    i cant share this link : https://web.tutremix.com/tutorials/psd-to-html5-css3-conversion-tutorial-for-beginners
    am i doing it wrong ?

  5. website submission February 27, 2012 at 4:09 pm #

    Excellent tutorial , its really useful for fresh html5 developers

  6. Medical Cases July 4, 2012 at 1:42 am #

    [MARKED AS SPAM BY ANTISPAM BEE | CSS Hack]
    Thanks and good blog.

  7. Djb January 23, 2013 at 7:08 pm #

    Really nice tutorial!! Very useful! :)

  8. djb February 9, 2013 at 8:57 pm #

    Great tutorial!

  9. leela April 17, 2013 at 11:59 am #

    I like it.

  10. lazar May 31, 2013 at 1:57 pm #

    You’ve done a great work!!…good job

  11. JF-17 October 17, 2013 at 3:06 pm #

    I have downloaded the source but there is no PSD file available in the downloaded files. Can you please share the link from where I can get the PSD file for this tutorial. Thanks in advance.

Trackbacks/Pingbacks

  1. Css Made Easy: Beginner-to-pro Css Training | 7Wins.eu - June 28, 2013

    [...] CSS Website Design Tutorial – #3 Professional Website Layout | GiWeb.org WordPress Training | Zach Swinehart | Making the techy stuff simple.PSD to HTML5 / CSS3 Conversion Tutorial for Beginners | Web Remix [...]

Leave a Reply

css.php