HTML – Website Layout

Are you ready to build up your first website? Before using this blog post let’s go through this checklist:

1. Do you know your HTML tags?
2. Do you understand how CSS works?
3. Have you created a design for your website?
4. Have you created the folder structure for your website?
5. Have you gathered the assets / graphics for your website?

If the answer to all questions above is “yes!” then you are ready to implement your website using HTML and CSS.

The first task is to create the overall layout of your webpage.

Compare your design with the following layouts. Would one of these be suitable to implement your first webpage? If so you can check how it’s made by clicking on the pictures below to display the page in full view and check its source code.

Customising the Layout

Now that you have a layout you will need to customise the CSS to:

• Resize the width and height of the different sections to match your design, (See video tutorial below)
• Change the background colors or add gradients for each section, (See video tutorial below)
• Customise other CSS attributes to add shadows, borders, margin and padding for each section, (See video tutorial below)

Video Tutorial

Creating a standalone CSS file to reuse across multiple web pages

Check this blog post on how to use a cascading stylesheet across multiple web pages.

Adding Content

Once your layout/template is ready, you can start adding content to the different sections.
Check the following blog posts to help you do so:

• Adding Pictures


• Using CSS with Pictures


• Using CSS with Text


• Using Hyperlinks


• Adding a FavIcon


• Adding page transition effects


• Interactive Add-ons to use on your website


• Using Google Fonts

Responsive Website Layout

Check this block post to make your layout responsive.