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.

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.

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!

Alex Bulat is one of those guys willing to play with words getting the message across to the end user. This post as well as many others was written with one aim in his mind – buy a chopper;) Well, also if you need a clean WordPress theme, you can ask him where you can get one.

Hello there! My name is Andrew and I have been doing web development for years. Frankly, not only web-development, and system-development too. This site is the place where I get to teach and share my experience for the web. Read more