What you'll build

You'll build a multipage website that includes everything needed for a valid HTML file.

It'll have the following features:

What you'll learn

What you'll need
  1. Open GitHub Desktop
  2. Choose the Why Web Dev repository from the menu in the top left
  3. Click the Open in Visual Studio Code button (or press Command + Shift + A on MacOS or Ctrl + Shift + A on Windows)

Now you're ready to get coding!

Remember what you learned in the semantic tags and layout projects about using body, header, nav, main, and footer.

<body>
  <header>
    ...
  </header>

  <nav>
    ...
  </nav>

  <main>
    ...
  </main>

  <footer>
    ...
  </footer>

  <style>
    ...
  </style>
</body>

On each of your 3 pages, add the semantic elements, and then wrap everything in a body element.

In general, every page should look like this:

<body>
  <header>
    ...
  </header>

  <nav>
    ...
  </nav>

  <main>
    ...
  </main>

  <footer>
    ...
  </footer>

  <style>
    ...
  </style>
</body>

Remember what you learned in the layout project about positioning the semantic elements (header, nav, main, and footer) and using the body as a container.

On each of your 3 pages, lay out the semantic elements using CSS Grid.

Note: your layout should be the same on every page to make it easier for the user, so copy/paste is your friend!

<style>
  body {
    display: grid;
    grid: " h    h    h  " 3em
          " .    m    .  " auto
          " f    f    f  " 5em
          / 1fr  5fr  1fr;
  }

  header { grid-area: h; }
  nav    { grid-area: n; }
  main   { grid-area: m; }
  footer { grid-area: f; }
</style>

Up until now, we've actually been relying on the browser (such as Chrome or Safari) to assume some stuff about our site. We've let it assume:

To write the code properly, we need to tell the browser specifically all these things.

We'll start with the doctype. It's a statement at the very beginning of the code that says what language it's written in.

On each of your 3 pages, add this line to the top.

<!doctype html>

The body element contains all the stuff that will appear on the page. However, the extra information about the page needs to go in a different place, where it won't be shown to the user. This is where the head element comes in.

The head element sits between the doctype and the body, and contains information for the browser about the page, but isn't shown to the user.

On each of your 3 pages, add a head element between the doctype and the body.

<!doctype html>

<head>
  <meta charset="UTF-8">
  <title> Your website </title>
  <link rel="icon" href="favicon.ico">
</head>

<body>
  ...

Customise

Change your title and favicon to personalise your web page.

Online validators check that your code has everything that the browser is expecting it to have. Making sure your code passes validation means that it's high quality, and will display the way you want it to in every browser.

Copy and paste all of the code from your index.html into the Markup Validation Service site.

Scroll down and you might notice a few errors listed in red! It's ok if you're intimidated by the technical language they use - we'll work through them together and just look at them one at a time.

The first error is likely mentioning that it saw a head element before the html element. Apologies, we deliberately left out the html element so that we could practice with the validator.

The html element wraps around both the head and the body element. Below is what your HTML code needs to look like on every page.

Try adding an html element to your code and the copy and pasting again into the validator.

<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title> Your website </title>
    <link rel="icon" href="favicon.ico">
  </head>

  <body>
    <header>
      ...
    </header>

    <nav>
      ...
    </nav>

    <main>
      ...
    </main>

    <footer>
      ...
    </footer>

    <style>
      body {
        display: grid;
        grid: " h    h    h  " 3rem
              " .    m    .  " auto
              " f    f    f  " 5rem
              / 1fr  5fr  1fr;
      }

      header { grid-area: h; }
      nav    { grid-area: n; }
      main   { grid-area: m; }
      footer { grid-area: f; }
    </style>
  </body>

</html>

Hopefully, you have no errors this time, but more likely you just have different ones. We'll work through them together, so try talking to the people around you to see if you can figure it out as a team.

Congratulations, the second iteration of your web page is complete.

You've taken the code provided and customised it to create your unique web page.

Along the way, you've learned about these parts of coding.

(➕ means new things in this project)

HTML code

HTML vocabulary

CSS code

CSS vocabulary

In your coding career you will often need to look up how to do things. In this section are a couple of websites to help you find information online about how to do what you want to do.

Most frequently, a good Google search will be the best option. Remember to include the keywords "HTML" and the thing you want to do, so that Google will give you the best results (skip past the ads though!).