How to Create a CSS3 & HTML5 Website Layout (Video Tutorials)

Today, here is a special treat for you, the treat is creating a website layout only using HTML5 and CSS3 from scratch, and you’ll learn it by watching video tutorials. Moreover, I’ll provide you the downloading link to the source code for this project, so you can take help from it when needed. Before going to learn this project, I’ll recommend you to watch my CSS tutorials as well as HTML tutorials for beginners.

Demo of the Layout

website-template in HTML
The website layout looks exactly like this…

This is a small project, and I hope you’ll like it, because only HTML5 and CSS3 are used to create this very simple and awesome website layout. And the important thing in this layout is; that it is created from absolutely scratch.

Creating a Website Layout in CSS3 & HTML5

Here are the few steps you can take to create a very simple and beautiful layout using HTML5 and CSS3, and we’ve just used few images in the layout to make it more shining. However, you can make it more better. Here is what you need to do:

  • Open Notepad or Notepad++ and create a page “index.html”
  • Now create another file called “style.css”
  • Create a folder on your desktop, name it as “Website Layout” & save all above files there in that folder
  • Create an “Images” folder for putting all the images used in this project
  • Now you are ready to go for this project just make sure to download the source code below the video tutorials

The above steps are just ordinary to create the basic workspace for creating a website in HTML and CSS, the folders are necessary to save all the files for this project. Now for learning this project, watch two of my video tutorials below:

Video Tutorial # 1 for creating a website in HTML & CSS

Video Tutorial # 2 for creating a website in HTML & CSS

Now you’ve watched above tutorials, and have learned how to create a very simple website layout from scratch, but if you face any difficulty while creating this layout, then simple let me know by commenting below the post, However, all the content used in this tutorial series is available to download below.

The source code, the folders and the images which were used in this project can be downloaded from below link:

After downloading the source code, just extract the file and you’ll find all the source files & folders used in this project. You can use this source code and other files for your personal use. Furthermore, if you have any confusion or issue in your project then just drop your issue in the comment section, we’ll be glad to help you out.

Similar projects like this will be shared on this blog in near future, because HTML5 is something that I truly appreciate towards making web a much better place for web designers and developers, while CSS3 is something amazing which makes it very easy to design a web layout.

Ask your questions in the comment section if you have any – and take few seconds to share this tutorial with all of your friends on social media. Thanks – See you soon next time 🙂

About Abdul Wali

Abdul Wali is a professional blogger, marketer and web developer working online for last 5 years, he's been deeply involved in PHP, Web Development, SEO and computer video tutorials in different languages i.e English, Urdu and Pashto. You can catch him on and add him on Facebook.

Check Also


Integrating Paypal Payment Code in PHP Scripts (Video Tuts)

Paypal is without doubts the most popular online payment system which is used by thousands of ...

  • Nice, Article. and nice work. This is the first Pakistani blog which provides videos along with an article even source code. Keep it up 😉

    • Thanks dear, but this is not Pakisani blog, this is English blog for English speaking users 🙂