Project: Multi-page site skeleton

Overview of the 5-lesson project: a multi-page site skeleton with consistent landmarks.

Project: Multi-page site skeleton

In this 5-lesson project you'll build the skeleton of a multi-page magazine site called Cheese Magazine. Each lesson adds one piece, and by the final lesson you'll have a complete skeleton with header, main, aside and footer all linked together.

You'll use:

Semantic landmarks: header, nav, main, section, article, aside, footer
address for contact details
form, label, input and textarea for a contact form
Links that navigate between pages
Comments to document the structure

Ready? Let's start.

Recap: document skeleton

Every page starts with the same basic skeleton:

<!DOCTYPE html> declares the document type
<html lang="..."> root tag and language
<head> with charset, viewport and <title>
<body> all visible content goes here

In this project every page uses this skeleton; the lang value doesn't change between pages.

Exercise Write the basic skeleton of the Cheese Magazine home page

Write the empty document skeleton: <!DOCTYPE html>, <html lang="en">, <head> with charset, viewport and <title>Cheese Magazine</title>, empty <body>.

Show example solution

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cheese Magazine</title>
  </head>
  <body>
  </body>
</html>

Test yourself

What should stay the same on every page of a multi-page site?
- Only the h1 heading
- Header, nav and footer
- All content inside main
- The page-specific title
Show answer

Header, nav and footer — Correct. Header, nav and footer repeat on every page so visitors don't get lost.
Complete the document type declaration
```
<!____ html>
```
Show answer
```
<!DOCTYPE html>
```
Match the landmark tag to its role

header

Top of site and logo
main

Primary content
footer

Bottom info
nav

Navigation links

Next lesson: Consistent header/footer

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies