How to Code Simple Website From a PSD?

How to Code Simple Website From a PSD?

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 simple but really cool template from PSD. So first of all you need to download the archive with our subject.

---

This is a free template for restaurant business.

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,'

'
        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!