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.

html-layout-1

html-layout-2

html-layout-3

html-layout-4

html-layout-5

html-layout-6

html-layout-7

html-layout-8

html-layout-9

html-layout-10

html-layout-11

html-layout-12

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:

Responsive Website Layout


responsive-layout-website-design
Check this block post to make your layout responsive.

Did you like this challenge?

Click on a star to rate it!

Average rating 4.5 / 5. Vote count: 130

No votes so far! Be the first to rate this post.

As you found this challenge interesting...

Follow us on social media!