HTML5 Zone is brought to you in partnership with:

I was born in 1981 in one little city. Since I was 10y/o I programmed in different languages. My first languages were basic, then C++/MFC, after .Net (C#, VB.Net, J#, ASP.Net), XSL+XML processing). In the last 5 years I worked with web languages (HTML, CSS, PHP, SQL, XML, XSL, JavaScript). After university I worked in several different companies, eventually becoming a blogger. This is my hobby too. Andrey is a DZone MVB and is not an employee of DZone and has posted 110 posts at DZone. You can read more from them at their website. View Full User Profile

How to Code a Simple Website From a PSD

07.17.2013
| 1918 views |
  • submit to reddit

Creating tutorials is really important since anyone with less knowledge can use your tricks to make awesome designs. Taking this opportunity we would like to show you how to code a simple but really cool template from a PSD file. So first of all you need to download the archive with our subject.


This is a free template for a restaurant business.

Restaurant template

When you open the archive you will see several folders one named "site" other "sources." In the sources folder you can find PSDs of the template. Feel free to play with them, or borrow some design tricks. In the "site" you will find already coded pages. So let us have a closer look at them to understand how to code a clean template. We will take as an example only the home page, in the archive it is called index.html

This very template is coded using html5/css3 technologies. Logically it is divided into three parts: header, content part and footer.

Step 1 – HTML

In the header you can find logo and main navigation

<header>
    <div class="container_12">
        <div class="grid_12">
            <h1><a href="index.html"><img src="images/logo.png" alt="EXTERIOR"></a> </h1>
            <div class="menu_block">
                <ul class="sf-menu">
                    <li><a href="index.html">Home</a></li>
                    <li class="current"><a href="index-1.html">About Us</a>
                        <ul>
                            <li><a href="#"> cuisine</a></li>
                            <li><a href="#">Good rest</a></li>
                            <li><a href="#">Services</a></li>
                        </ul>
                    </li>
                    <li><a href="index-2.html">Menu</a></li>
                    <li><a href="index-3.html">Portfolio</a></li>
                    <li><a href="index-4.html">News </a></li>
                    <li><a href="index-5.html">Contacts</a></li>
                </ul>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</header>

Main navigation is animated with jQuery plugin Superfish, it has a drop down list with submenu.

In the content part you can find jQuery carousel slider with dotted slide switcher. Below you can find it’s code:

<div class="slider-relative">
    <div class="slider-block">
        <div class="slider">
            <ul class="items">
                <li><img src="images/slide.jpg" alt=""></li>
                <li><img src="images/slide1.jpg" alt=""></li>
                <li class="mb0"><img src="images/slide2.jpg" alt=""></li>
            </ul>
        </div>
    </div>
</div>

Step 2 – CSS3

/*Slider*/
.slider-relative {
    position:relative;
    overflow:hidden;
    margin: 0 auto;
}
.items {
    display: none;
}
.slider-block {
    position:relative;
    overflow:hidden;
    height: 625px;
    margin: 0 auto;
}
.slider {
    z-index:2;
    height: 625px;
    position: absolute;
    left: 50%;
    margin-left: -800px;
    width: 1600px;
}
.slider .banner{
    position: absolute;
    z-index: 1 !important;
    background: url(../images/banner_bg.png) 0 0 repeat;
    left: 0;
    width: 210px;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    right: 0;
    top: 402px;
    width: 100%;
}
.banner h2 {
    color: #fff;
    font-size: 21px;
    line-height: 38px;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
    padding-bottom: 26px;
    text-align: center;
    padding: 11px 60px 10px ;
}
.banner h2 span {
    color: #e5ad2a;
}
.pagination {
    bottom: 0px;
    position: absolute;
    left: 50%;
    margin-left: -51px;
    z-index: 999;
}
.pagination li {
    float: left;
}
.pagination li+li {
    margin-left: 15px;
}
.pagination  li a{
    width: 24px;
    display: block;
    transition: 0s ease;
    -o-transition: 0s ease;
    -webkit-transition: 0s ease;
    height: 23px;
    background: url(../images/pagination.png) right 0 no-repeat;
}
.pagination li a:hover, .pagination li.current a {
    background-position: 0 0;
}

Step 3 – Javascript

Javascript initialization, description of base parameters, its library can found in the tms-0.4.1 file.

$(window).load(function(){
    $('.slider')._TMS({
        show:0,
        pauseOnHover:false,
        prevBu:'.prev',
        nextBu:'.next',
        playBu:false,
        duration:800,
        preset:'fade',
        pagination:true,//'.pagination',true,'
<ul></ul>

'
        pagNums:false,
        slideshow:8000,
        numStatus:false,
        banners:false,
        waitBannerAnimation:false,
        progressBar:false
    })
});

Further you can find the content part, links to subpages, product prices, etc. Also you can find the block with social media buttons and feed.

Footer is pretty standard – privacy policy, copyright etc.

As you can see there is nothing difficult in coding simple sites. All you need is a bit of patience and desire to find out something new.

All the best!

Published at DZone with permission of Andrey Prikaznov, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)