Today I’m going to show You how to code a PSD template into html and css with a little bit of javascript. Template is very easy to code. Shouldn’t take You a long time to code. Also there is nice looking carousel on the header of the site. In the package You have coded project and psd file, which give You opportunity to code it yourself.
What will be needed in this tutorial?
- PSD file
- Text editor
- Couple hours of Your time
- jQuery plugins
For the PSD project I used these files
Step 1
First of all create Your folder structure. We will need images folder, js folder, html and our css file.
Step 2
Now we have to make some images from the psd file. I won’t be following through this. There is a couple ways to do the croping. After croping my structure looks like this
As You can see there are all icons, headers, li, background for ‘read more’ button, logo, separator and backgrounds for the site sections. You can crop the images with Your own way.
Step 3
Now it’s time for download a jquery plugins. First will be jQuery Easing Plugin. You can download it here [link:http://gsgd.co.uk/sandbox/jquery/easing/]. Second will be jQuery Roundabout from here [link:http://fredhq.com/projects/roundabout/]. Now when You have it paste them into Your js folder.
Step 4
Open Your text editor and create and add some basic html code for start.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Global Technologies</title> <link rel="stylesheet" type="text/css" href="style.css" media="all" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.roundabout.min.js"></script> </head> <body> <!-- Your content will go here --> </body> </html>
As you can see it’s the base for our template. You can now add a link to style.css and Your scripts. Remember to put jquery library before easing and roundabout scripts.
Step 5
Now lets add some more html structure to our site.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Global Technologies</title> <link rel="stylesheet" type="text/css" href="style.css" media="all" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.roundabout.min.js"></script> </head> <body> <div id="header"> <div id="logo"> </div><!-- logo end --> <div id="nav"> </div><!-- nav end --> </div><!-- header end --> <div id="slider-container"> <div id="slider"> </div><!-- slider end --> </div><!-- slider-container end --> <div id="content"> <div id="content-left"> </div><!-- content-left end --> <div id="content-right"> </div><!-- content-right end --> </div><!-- content end --> <div id="boxes-container"> <div id="boxes"> </div><!-- boxes end --> </div><!-- boxes-container end --> <div id="footer-container"> <div id="footer"> </div><!-- footer end --> </div><!-- footer-container end --> </body> </html>
Ok, so now we have our structure for the content on our site. The main sections in here are header, slider, content and footer sections. Becouse of the construction of the site there isn’t one main wrapper. In our case we need each of our sections to have separate wrapper.
Step 6
Now we have to add some random content. First lets add h1 in the logo and our navigation
<div id="header"> <div id="logo"> <h1>Global Technologies</h1> </div><!-- logo end --> <div id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Support</a></li> <li><a href="#">Contact</a></li> </ul> </div><!-- nav end --> </div><!-- header end -->
Step 7
Our next step in here will be slider section. Just add ul with proper id and the list of the images You want to have in your carousel.
<div id="slider-container"> <div id="slider"> <ul id="myRoundabout"> <li><img src="images/1.png" alt="" /></li> <li><img src="images/2.png" alt="" /></li> <li><img src="images/3.png" alt="" /></li> <li><img src="images/4.png" alt="" /></li> </ul> </div><!-- slider end --> </div><!-- slider-container end -->
Step 8
Next add some random text in our content-left section
<div id="content-left"> <ul> <li> <img src="images/icon-comp.jpg" alt="comp" /><p>Nullam nec quam sit amet sapien imperdiet placerat. Aliquam vulputate tellus a diam sollicitudin eget tempus enim mollis. Phasellus nec urna mollis turpis placerat bibendum.</p> </li> <li> <img src="images/icon-globe.jpg" alt="globe" /><p>Nullam nec quam sit amet sapien imperdiet placerat. Aliquam vulputate tellus a diam sollicitudin eget tempus enim mollis. Phasellus nec urna mollis turpis placerat bibendum.</p> </li> <li> <img src="images/icon-tools.jpg" alt="tools" /><p>Nullam nec quam sit amet sapien imperdiet placerat. Aliquam vulputate tellus a diam sollicitudin eget tempus enim mollis. Phasellus nec urna mollis turpis placerat bibendum.</p> </li> </ul> </div><!-- content-left end -->
Step 9
Do the same thing in content-right
<div id="content-right"> <h1>Curabitur sagittis massa eu magna suscipit nec</h1> <p>In euismod egestas dui, vel lacinia est posuere nec. Sed ullamcorper, dolor id ornare elementum, sem diam tempus sem, sed cursus elit odio nec nisi. Vestibulum eu nulla mauris.</p> <p>Donec mauris neque, ultrices ac mollis laoreet, semper sed neque. Aliquam euismod volutpat urna et porta. Praesent viverra venenatis urna id venenatis. Nulla pulvinar ornare varius. Vivamus vestibulum ultricies suscipit. Nam libero turpis, semper sit amet bibendum sit amet.</p> <p>Mauris vitae felis quis erat ultricies semper sit amet vitae nunc. Aliquam ligula orci, sagittis nec congue et, porttitor vel est.</p> </div><!-- content-right end -->
Step 10
Now it’s time for our boxes
<div id="boxes-container"> <div id="boxes"> <ul> <li class="box free"> <h2><span>Free!</span></h2> <ul> <li>Sed lacinia mauris sed mi</li> <li>Curabitur accumsan nisi</li> <li>Praesent eget est at</li> <li>Donec a est ipsum, eget</li> <li>Nullam et lectus ac nibh</li> <li>Phasellus in nibh id au</li> <li>Mauris sodales nibh sed</li> <li>Vivamus et orci nisl, at</li> </ul> <a href="#">Read more</a> </li> <li class="box basic"> <h2><span>Basic</span></h2> <ul> <li>Sed lacinia mauris sed mi</li> <li>Curabitur accumsan nisi</li> <li>Praesent eget est at</li> <li>Donec a est ipsum, eget</li> <li>Nullam et lectus ac nibh</li> <li>Phasellus in nibh id au</li> <li>Mauris sodales nibh sed</li> <li>Vivamus et orci nisl, at</li> </ul> <a href="#">Read more</a> </li> <li class="box advanced"> <h2><span>Advanced</span></h2> <ul> <li>Sed lacinia mauris sed mi</li> <li>Curabitur accumsan nisi</li> <li>Praesent eget est at</li> <li>Donec a est ipsum, eget</li> <li>Nullam et lectus ac nibh</li> <li>Phasellus in nibh id au</li> <li>Mauris sodales nibh sed</li> <li>Vivamus et orci nisl, at</li> </ul> <a href="#">Read more</a> </li> <li class="box professional"> <h2><span>Professional</span></h2> <ul> <li>Sed lacinia mauris sed mi</li> <li>Curabitur accumsan nisi</li> <li>Praesent eget est at</li> <li>Donec a est ipsum, eget</li> <li>Nullam et lectus ac nibh</li> <li>Phasellus in nibh id au</li> <li>Mauris sodales nibh sed</li> <li>Vivamus et orci nisl, at</li> </ul> <a href="#">Read more</a> </li> </ul> </div><!-- boxes end --> </div><!-- boxes-container end -->
Step 11
And last but not least our footer
<div id="footer-container"> <div id="footer"> <ul> <li class="links"> <ul> <li>Copyright © 2011 Mtuts</li> </ul> <li class="links"> <ul> <li><a href="#">Sed lacinia mauris sed mi</a></li> <li><a href="#">Curabitur accumsan nisi</a></li> <li><a href="#">Praesent eget est at</a></li> <li><a href="#">Donec a est ipsum, eget</a></li> <li><a href="#">Nullam et lectus ac nibh</a></li> <li><a href="#">Phasellus in nibh id au</a></li> <li><a href="#">Mauris sodales nibh sed</a></li> <li><a href="#">Vivamus et orci nisl, at</a></li> </ul> </li> <li class="links"> <ul> <li><a href="#">Sed lacinia mauris sed mi</a></li> <li><a href="#">Curabitur accumsan nisi</a></li> <li><a href="#">Praesent eget est at</a></li> <li><a href="#">Donec a est ipsum, eget</a></li> <li><a href="#">Nullam et lectus ac nibh</a></li> <li><a href="#">Phasellus in nibh id au</a></li> <li><a href="#">Mauris sodales nibh sed</a></li> <li><a href="#">Vivamus et orci nisl, at</a></li> </ul> </li> <li class="links"> <ul> <li><a href="#">Sed lacinia mauris sed mi</a></li> <li><a href="#">Curabitur accumsan nisi</a></li> <li><a href="#">Praesent eget est at</a></li> <li><a href="#">Donec a est ipsum, eget</a></li> <li><a href="#">Nullam et lectus ac nibh</a></li> <li><a href="#">Phasellus in nibh id au</a></li> <li><a href="#">Mauris sodales nibh sed</a></li> <li><a href="#">Vivamus et orci nisl, at</a></li> </ul> </li> </ul> </div><!-- footer end --> </div><!-- footer-container end -->
Step 12
Ok so now You should have all the text in. The final html, for now, should look like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Global Technologies</title> <link rel="stylesheet" type="text/css" href="style.css" media="all" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.roundabout.min.js"></script> </head> <body> <div id="header"> <div id="logo"> <h1>Global Technologies</h1> </div><!-- logo end --> <div id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Support</a></li> <li><a href="#">Contact</a></li> </ul> </div><!-- nav end --> </div><!-- header end --> <div id="slider-container"> <div id="slider"> <ul id="myRoundabout"> <li><img src="images/1.png" alt="" /></li> <li><img src="images/2.png" alt="" /></li> <li><img src="images/3.png" alt="" /></li> <li><img src="images/4.png" alt="" /></li> </ul> </div><!-- slider end --> </div><!-- slider-container end --> <div id="content"> <div id="content-left"> <ul> <li> <img src="images/icon-comp.jpg" alt="comp" /><p>Nullam nec quam sit amet sapien imperdiet placerat. Aliquam vulputate tellus a diam sollicitudin eget tempus enim mollis. Phasellus nec urna mollis turpis placerat bibendum.</p> </li> <li> <img src="images/icon-globe.jpg" alt="globe" /><p>Nullam nec quam sit amet sapien imperdiet placerat. Aliquam vulputate tellus a diam sollicitudin eget tempus enim mollis. Phasellus nec urna mollis turpis placerat bibendum.</p> </li> <li> <img src="images/icon-tools.jpg" alt="tools" /><p>Nullam nec quam sit amet sapien imperdiet placerat. Aliquam vulputate tellus a diam sollicitudin eget tempus enim mollis. Phasellus nec urna mollis turpis placerat bibendum.</p> </li> </ul> </div><!-- content-left end --> <div id="content-right"> <h1>Curabitur sagittis massa eu magna suscipit nec</h1> <p>In euismod egestas dui, vel lacinia est posuere nec. Sed ullamcorper, dolor id ornare elementum, sem diam tempus sem, sed cursus elit odio nec nisi. Vestibulum eu nulla mauris.</p> <p>Donec mauris neque, ultrices ac mollis laoreet, semper sed neque. Aliquam euismod volutpat urna et porta. Praesent viverra venenatis urna id venenatis. Nulla pulvinar ornare varius. Vivamus vestibulum ultricies suscipit. Nam libero turpis, semper sit amet bibendum sit amet.</p> <p>Mauris vitae felis quis erat ultricies semper sit amet vitae nunc. Aliquam ligula orci, sagittis nec congue et, porttitor vel est.</p> </div><!-- content-right end --> </div><!-- content end --> <div id="boxes-container"> <div id="boxes"> <ul> <li class="box free"> <h2><span>Free!</span></h2> <ul> <li>Sed lacinia mauris sed mi</li> <li>Curabitur accumsan nisi</li> <li>Praesent eget est at</li> <li>Donec a est ipsum, eget</li> <li>Nullam et lectus ac nibh</li> <li>Phasellus in nibh id au</li> <li>Mauris sodales nibh sed</li> <li>Vivamus et orci nisl, at</li> </ul> <a href="#">Read more</a> </li> <li class="box basic"> <h2><span>Basic</span></h2> <ul> <li>Sed lacinia mauris sed mi</li> <li>Curabitur accumsan nisi</li> <li>Praesent eget est at</li> <li>Donec a est ipsum, eget</li> <li>Nullam et lectus ac nibh</li> <li>Phasellus in nibh id au</li> <li>Mauris sodales nibh sed</li> <li>Vivamus et orci nisl, at</li> </ul> <a href="#">Read more</a> </li> <li class="box advanced"> <h2><span>Advanced</span></h2> <ul> <li>Sed lacinia mauris sed mi</li> <li>Curabitur accumsan nisi</li> <li>Praesent eget est at</li> <li>Donec a est ipsum, eget</li> <li>Nullam et lectus ac nibh</li> <li>Phasellus in nibh id au</li> <li>Mauris sodales nibh sed</li> <li>Vivamus et orci nisl, at</li> </ul> <a href="#">Read more</a> </li> <li class="box professional"> <h2><span>Professional</span></h2> <ul> <li>Sed lacinia mauris sed mi</li> <li>Curabitur accumsan nisi</li> <li>Praesent eget est at</li> <li>Donec a est ipsum, eget</li> <li>Nullam et lectus ac nibh</li> <li>Phasellus in nibh id au</li> <li>Mauris sodales nibh sed</li> <li>Vivamus et orci nisl, at</li> </ul> <a href="#">Read more</a> </li> </ul> </div><!-- boxes end --> </div><!-- boxes-container end --> <div id="footer-container"> <div id="footer"> <ul> <li class="links"> <ul> <li>Copyright © 2011 Mtuts</li> </ul> <li class="links"> <ul> <li><a href="#">Sed lacinia mauris sed mi</a></li> <li><a href="#">Curabitur accumsan nisi</a></li> <li><a href="#">Praesent eget est at</a></li> <li><a href="#">Donec a est ipsum, eget</a></li> <li><a href="#">Nullam et lectus ac nibh</a></li> <li><a href="#">Phasellus in nibh id au</a></li> <li><a href="#">Mauris sodales nibh sed</a></li> <li><a href="#">Vivamus et orci nisl, at</a></li> </ul> </li> <li class="links"> <ul> <li><a href="#">Sed lacinia mauris sed mi</a></li> <li><a href="#">Curabitur accumsan nisi</a></li> <li><a href="#">Praesent eget est at</a></li> <li><a href="#">Donec a est ipsum, eget</a></li> <li><a href="#">Nullam et lectus ac nibh</a></li> <li><a href="#">Phasellus in nibh id au</a></li> <li><a href="#">Mauris sodales nibh sed</a></li> <li><a href="#">Vivamus et orci nisl, at</a></li> </ul> </li> <li class="links"> <ul> <li><a href="#">Sed lacinia mauris sed mi</a></li> <li><a href="#">Curabitur accumsan nisi</a></li> <li><a href="#">Praesent eget est at</a></li> <li><a href="#">Donec a est ipsum, eget</a></li> <li><a href="#">Nullam et lectus ac nibh</a></li> <li><a href="#">Phasellus in nibh id au</a></li> <li><a href="#">Mauris sodales nibh sed</a></li> <li><a href="#">Vivamus et orci nisl, at</a></li> </ul> </li> </ul> </div><!-- footer end --> </div><!-- footer-container end --> </body> </html>
Step 13
Now open your style.css file and add some main styles
* {
margin:0;
padding:0;
}
body {
background: #f1f1f1;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#header, #content, #boxes, #footer, #slider {
width: 960px;
margin: 0 auto;
}
Step 14
Now add some styling for header section
#header {
height: 100px;
}
#logo h1 {
float: left;
width: 290px;
height: 91px;
background: url(images/logo.jpg);
text-indent: -9999px;
}
#nav {
float: right;
width: 670px;
}
#nav ul {
margin: 50px 0 0 10px;
float: right;
}
#nav ul li {
display: inline;
margin: 0 5px;
}
#nav a {
color: #000;
text-decoration: none;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
letter-spacing: -1px;
line-height: 22px;
padding: 6px 12px;
}
#nav a:hover {
background: red;
color: #ffffff;
text-shadow: 1px 1px 0 #000000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #5CA1E2; /* old browsers */
background: -moz-linear-gradient(top, #5CA1E2 0%, #1467B1 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5CA1E2), color-stop(100%,#1467B1)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5CA1E2', endColorstr='#1467B1',GradientType=0 ); /* ie */
}
In nav I used a little bit of css3 features like border-radius and gradients. In older browsers instead of this there will be a blue rectangle as a link background after hover. You can always use images for the background but for this tutorial I choose a css3 option.
Step 15
Now add some styles for our slider section
#slider-container {
height: 350px;
background: #000000 url(images/slider-bg.jpg) top center no-repeat;
}
#myRoundabout {
list-style: none;
width: 600px;
height: 300px;
margin: 0 auto;
}
#myRoundabout li {
margin-top: 40px;
}
.roundabout-holder {
width: 600px;
height: 250px;
}
.roundabout-moveable-item {
height: 301px;
width: 300px;
cursor: pointer;
}
.roundabout-moveable-item img {
width: 100%;
}
.roundabout-in-focus {
cursor: auto;
}
Nothing much to say here. Some of my styles and some of the styles from the Roundabout author. If You worry about images in the slider You can comment the slider content in the html.
Step 16
Now add some styles for content section
#content {
padding: 45px 10px;
width: 960px;
}
#content-left {
width: 420px;
float: left;
padding-right: 30px;
font-size: 12px;
line-height: 1.5em;
}
#content-left li {
list-style: none;
margin-bottom: 50px;
}
#content-left img {
float: left;
margin-right: 25px;
width: 90px;
height: 80px;
}
#content-right {
width: 480px;
padding-left: 30px;
float: right;
background: url(images/separator.jpg) center left no-repeat;
}
#content-right h1 {
font-size: 22px;
font-weight: bold;
letter-spacing: -1px;
text-shadow: 1px 1px 0 #ccc;
}
#content-right p {
margin: 15px 0 35px 0;
font-size: 14px;
line-height: 1.5em;
}
<h1>Step 17</h1>
Now it's time for our boxes section
1
#boxes-container {
background: #f1f1f1 url(images/box-bg.jpg) repeat-x top center;
clear: both;
overflow: hidden;
}
#boxes > ul {
margin: 20px 0;
list-style: none;
}
#boxes li.box {
width: 220px;
margin: 0 10px;
float: left;
}
.box h2 {
width: 220px;
height: 76px;
text-align: right;
}
.box h2 span {
line-height: 80px;
font-size: 16px;
letter-spacing: -1px;
text-transform: uppercase;
color: #fff;
}
.free h2 span, .basic h2 span {
margin-right: 50px;
}
.advanced h2 span {
margin-right: 30px;
}
.professional h2 span {
margin-right: 20px;
}
.free h2 {
background: url(images/box1header.jpg) no-repeat;
}
.basic h2 {
background: url(images/box2header.jpg) no-repeat;
}
.advanced h2 {
background: url(images/box3header.jpg) no-repeat;
}
.professional h2 {
background: url(images/box4header.jpg) no-repeat;
}
.box ul li {
font-size: 12px;
text-transform: uppercase;
letter-spacing: -1px;
margin: 10px 0 10px 20px;
list-style-image: url(images/li.png);
}
.box a {
height: 68px;
width: 220px;
background: url(images/readmore.jpg);
display: block;
text-indent: -9999px;
}
In this step remember to add overflow: hidden to #boxes-container. Thanks to this our background image will appear. If You skip this comment You probably won’t see the background image.
Step 18
And now add some styles for footer
#footer-container {
clear: both;
background: #f0f0f0 url(images/footer-bg.jpg) repeat-x top center;
margin-top: 27px;
overflow: hidden;
}
#footer {
padding: 30px 0;
color: #444444;
}
#footer ul {
list-style: none;
padding-bottom: 20px;
}
#footer a {
color: #444444;
text-decoration: none;
}
#footer a:hover {
color: #000000;
}
#footer .links {
width: 220px;
float: left;
margin: 0 10px;
}
#footer .links li {
margin: 10px 0;
}
And we have done in here. Out template should look like this
As I said earlier don’t worry about the pictures. We will fix them now.
Step 19
The last step for us will be adding some script in the head of our html file. We have to turn on the Roundabout plugin
<script>
$(document).ready(function() {
$('ul#myRoundabout').roundabout({
minScale: 0.2, // tiny!
easing: 'easeInOutExpo'
});
});
</script>
Just add this code after
<script type="text/javascript" src="js/jquery.roundabout.min.js"></script>
Should look like this
<script type="text/javascript" src="js/jquery.roundabout.min.js"></script>
<script>
$(document).ready(function() {
$('ul#myRoundabout').roundabout({
minScale: 0.2, // tiny!
easing: 'easeInOutExpo'
});
});
</script>
</head>
Finished!
And that’s it. Now we have our template ready to go. You can now add more things like photos, text, change colors, adding some more javascript etc.
Hope You like this. Thanks for reading and hope to see you all in the next tutorial.
I really like it that all the tutorials only make the Home page, but what if you would also show us (for learning purposes only of course ) how also to code the About us page.
Hi. Maybe in the next tutorial I will code about page and maybe contact page also. We will see.
Thank you for this amazing tutorial. It was helpful seeing I am new to HTML. I got stuck at step 19 with creating the roundabout. Anyway thank you.
What exactly made you stuck?
You add first the script roundabout.min.js and then You paste trigger (function) to make it work.
You add both (script and trigger) between
and .You just add trigger after roundabout.min.js. You can always download tutorial files and check them in text editor to see how it’s done.
I read your site frequently and I just thought I’d say keep up the terrific work!
Thank you very much for a clear and detailed explanation, really useful. Thanks again
Thanks have a nice application
Just wanted to say great stuff. I’m learning quite a bit from this.
Nice tutorial thanks for share
Thank you very much for a clear and detailed explanation, really useful. Thanks again
Our chrome materials are conductive and 100% suitable for further electroplating (coating) (gold, platinum, silver, copper) Chromspray