In this tutorial I finish up the How to Layout a Website Tutorial. If you missed the previous videos you can see them here at How to Layout a Website Pt 1, Pt 2, Pt 3 and Pt 4.
Here I’ll finish making the template used by all the individual web pages.
This time I create the template without any planning at all. I create the whole page completely out of my head. In the end I think it looks really nice.
All of the code follows the video.
In the previous tutorials How to layout a website Part 1 and Part 2 I created a website template from scratch. Here I continue that process.
As you see making a website is a process of placing each individual part of the page in a box (DIV) and then moving this boxes into the correct position.
I hope is that through repetition you will be able to recreate any design. It really isn’t that hard to make custom website templates. It just takes some practice.
In the last video / article How to Layout a Website, I showed you how to set up the header, import Google Web Fonts and the basics of CSS.
In the tutorial, I’ll show you how to make pretty complicated layouts. I show you how to overlay divs and how to make adjustments with CSS until everything looks perfect.
If you need to brush up on HTML or CSS here are video tutorials on those subjects.
The vast majority of questions I receive boil down to How to Layout a Website!
While I’m not going to say it is easy to make a website. It takes time! However, I think anyone can learn to layout a website if they grasp some core concepts.
In my next series of videos I’m going to focus on everything you need to know to layout a website using just a text editor.
I previously covered this topic in a WordPress HTML Tutorial , but this time I’ll approach it in a more step-by-step manor.