Common Layouts

HTMLCSSCommon LayoutsPage Layout

Introduction

Let’s look at common layouts you’ll find on the web. One of the first things to note is that with almost any layout, there will be multiple ways of solving the same problem.

Page Layout

Let’s look at a website called Rightmove, which is used to find properties to buy or rent. The home page has a relatively simple structure, as you can see here:

Rightmove
Figure: Rightmove

Using rectangles, we can start to see how the page is laid out. There are essentially four main sections for the page:

  • a navigation section for which we’d use the HTML5 <nav> element.
  • a search section with a call-to-action.
  • a content section with links to articles etc.
  • a footer.
Rightmove 2
Figure: Rightmove 2

If we drill down into the content section, we can see that it has a two-column layout, and one of the columns has a three-column layout inside it. This nesting of columns is relatively standard across the web, and it is vital to understand how these sections nest and interact with the other sections around them.

Nesting columns
Figure: Nesting columns

Now let’s take out the content and view the orange rectangles for the whole page. The background for the sections has been filled in to make it easier to see.

Outline
Figure: Outline

Let’s build the layout using CSS Grids.

Activities

💻 WATCH

This tutorial video is on building a common layout, this time using Flexbox. (5m)

Lesson Task

Brief

There are practice questions in the master branch of this repo.

Attempt the answers before checking them against the answers in the answers branch of the repo.