Back to Unit 6

Unit 6 Website Development - Tutorial 3

3.5 Build a Central Navigation Website Template

First add the HTML in small steps. Then style the page afterwards using small CSS chunks.

How To Use This Tutorial

Work through each step in order. Add the code shown, check the expected output, then move to the next step. The final code is visible at the bottom so you can compare your finished work.

Steps

  1. Create the project files and folders
  2. Add the basic HTML page structure
  3. Link the external CSS file
  4. Add the header HTML
  5. Add the logo HTML
  6. Add the company name HTML
  7. Add the central navigation HTML
  8. Add the main content HTML
  9. Add the footer HTML
  10. Style the body
  11. Style the header area
  12. Resize and centre the logo box
  13. Style the logo image
  14. Style the company name
  15. Add space above the navigation
  16. Style the navigation buttons
  17. Add the navigation hover effect
  18. Style the main content area
  19. Style the footer area
  20. Style the footer buttons
Step 1

Step 1 Create the project files and folders

Code

website-folder
|
|-- index.html
|-- style.css
|
`-- images
    |
    `-- logo.png

What this does

  • The folder structure keeps the HTML file, CSS file and logo image organised.

Expected output

No webpage output yet.
Step 2

Step 2 Add the basic HTML page structure

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Website Template</title>
</head>

<body>

</body>
</html>

What this does

  • This creates the basic webpage.
  • The body is where visible content will go.

Expected output

The page is blank because no visible content has been added.
Step 3

Step 3 Link the external CSS file

Code

<head>
    <meta charset="UTF-8">
    <title>Website Template</title>
    <link rel="stylesheet" href="style.css">
</head>

What this does

  • link connects the HTML file to style.css.
  • The HTML controls content and CSS controls appearance.

Expected output

The page is still blank because only the CSS file has been connected.
Step 4

Step 4 Add the header HTML

Code

<header>

</header>

What this does

  • header creates the top area of the webpage.
  • The logo, company name and main navigation will go inside it.

Expected output

The header is empty, so there is still no visible content.
Step 5

Step 5 Add the logo HTML

Code

<div class="logo-box">
    <img src="images/logo.png" alt="Company logo placeholder">
</div>

What this does

  • logo-box creates a container for the logo.
  • img displays the logo image.
  • src tells the browser where the logo image is saved.

Expected output

Step 6

Step 6 Add the company name HTML

Code

<h1>Company Name</h1>

What this does

  • h1 creates the main heading.
  • In this template, it displays the company name.

Expected output

Company Name

Step 7

Step 7 Add the central navigation HTML

Code

<nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
</nav>

What this does

  • nav creates the navigation area.
  • a creates each clickable link.
  • href keeps the link on the page for now.

Expected output

Company Name

Step 8

Step 8 Add the main content HTML

Code

<main>
    <h2>Page Heading</h2>
</main>

What this does

  • main creates the main content area.
  • h2 displays the page heading.

Expected output

Company Name

Page Heading

Step 9

Step 9 Add the footer HTML

Code

<footer>
    <p>&copy; 2026 Company Name. All rights reserved.</p>

    <nav>
        <a href="#">Privacy Policy</a>
        <a href="#">Terms</a>
        <a href="#">Contact</a>
    </nav>
</footer>

What this does

  • footer creates the bottom area.
  • p creates the copyright text.
  • The footer nav creates the footer links.

Expected output

Company Name

Page Heading

Step 10

Step 10 Style the body

Code

body {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    color: #222222;
}

What this does

  • body selects the whole visible webpage.
  • The margin rules remove the browser gap.
  • background-color changes the page background to light grey.

Expected output

Company Name

Page Heading

Step 11

Step 11 Style the header area

Code

header {
    background-color: #333333;
    color: white;

    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;

    text-align: center;
}

What this does

  • header selects the top area.
  • background-color changes the header to dark grey.
  • color changes the header text to white.
  • text-align centres the header content.

Expected output

Company Name

Page Heading

Step 12

Step 12 Resize and centre the logo box

Code

.logo-box {
    width: 120px;

    margin-top: 0;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
}

What this does

  • .logo-box selects the logo container.
  • width makes the logo box smaller.
  • margin-right and margin-left set to auto centre the logo box.

Expected output

Company Name

Page Heading

Step 13

Step 13 Style the logo image

Code

.logo-box img {
    width: 100%;
    height: auto;
    display: block;
}

What this does

  • .logo-box img selects the image inside the logo box.
  • width makes the image fill the logo box.
  • height auto stops the image stretching.

Expected output

Company Name

Page Heading

Step 14

Step 14 Style the company name

Code

header h1 {
    margin-top: 10px;
    margin-right: 0;
    margin-bottom: 10px;
    margin-left: 0;
}

What this does

  • header h1 selects the company name inside the header.
  • The margin rules control the spacing around the heading.

Expected output

Company Name

Page Heading

Step 15

Step 15 Add space above the navigation

Code

nav {
    margin-top: 15px;
}

What this does

  • nav selects navigation areas.
  • margin-top adds space above the navigation links.

Expected output

Company Name

Page Heading

Step 16

Step 16 Style the navigation buttons

Code

nav a {
    display: inline-block;
    background-color: #666666;
    color: white;
    text-decoration: none;

    padding-top: 12px;
    padding-right: 25px;
    padding-bottom: 12px;
    padding-left: 25px;

    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 5px;

    border-width: 2px;
    border-style: solid;
    border-color: #999999;

    border-radius: 5px;
}

What this does

  • nav a selects links inside navigation areas.
  • display inline-block lets the links behave like buttons.
  • background-color, padding, margin and border make the links look like buttons.

Expected output

Company Name

Page Heading

Step 17

Step 17 Add the navigation hover effect

Code

nav a:hover {
    background-color: #ffd84d;
    color: #222222;
}

What this does

  • nav a:hover changes a navigation button when the mouse moves over it.
  • background-color changes the button to yellow.

Expected output

Company Name

Page Heading

Move your mouse over a navigation button. It should turn yellow.

Step 18

Step 18 Style the main content area

Code

main {
    background-color: white;
    min-height: 400px;

    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;

    text-align: center;
}

main h2 {
    color: #333333;
}

What this does

  • main selects the main content area.
  • background-color changes it to white.
  • min-height makes the main area taller.
  • text-align centres the heading.

Expected output

Company Name

Page Heading

Step 19

Step 19 Style the footer area

Code

footer {
    background-color: #333333;
    color: white;
    text-align: center;

    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
}

footer p {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 10px;
    margin-left: 0;
}

What this does

  • footer selects the bottom area.
  • background-color changes it to dark grey.
  • color changes the footer text to white.

Expected output

Company Name

Page Heading

Step 20

Step 20 Style the footer buttons

Code

footer nav a {
    background-color: #555555;
    font-size: 14px;

    padding-top: 8px;
    padding-right: 15px;
    padding-bottom: 8px;
    padding-left: 15px;
}

What this does

  • footer nav a selects only the footer links.
  • background-color makes the footer buttons slightly darker.
  • font-size makes the footer links smaller.

Expected output

Company Name

Page Heading

Final code

Final index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Website Template</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <header>
        <div class="logo-box">
            <img src="images/logo.png" alt="Company logo placeholder">
        </div>

        <h1>Company Name</h1>

        <nav>
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Contact</a>
        </nav>
    </header>

    <main>
        <h2>Page Heading</h2>
    </main>

    <footer>
        <p>&copy; 2026 Company Name. All rights reserved.</p>

        <nav>
            <a href="#">Privacy Policy</a>
            <a href="#">Terms</a>
            <a href="#">Contact</a>
        </nav>
    </footer>

</body>
</html>

Final style.css

body {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    color: #222222;
}

header {
    background-color: #333333;
    color: white;

    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;

    text-align: center;
}

.logo-box {
    width: 120px;

    margin-top: 0;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
}

.logo-box img {
    width: 100%;
    height: auto;
    display: block;
}

header h1 {
    margin-top: 10px;
    margin-right: 0;
    margin-bottom: 10px;
    margin-left: 0;
}

nav {
    margin-top: 15px;
}

nav a {
    display: inline-block;
    background-color: #666666;
    color: white;
    text-decoration: none;

    padding-top: 12px;
    padding-right: 25px;
    padding-bottom: 12px;
    padding-left: 25px;

    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 5px;

    border-width: 2px;
    border-style: solid;
    border-color: #999999;

    border-radius: 5px;
}

nav a:hover {
    background-color: #ffd84d;
    color: #222222;
}

main {
    background-color: white;
    min-height: 400px;

    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;

    text-align: center;
}

main h2 {
    color: #333333;
}

footer {
    background-color: #333333;
    color: white;
    text-align: center;

    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
}

footer p {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 10px;
    margin-left: 0;
}

footer nav a {
    background-color: #555555;
    font-size: 14px;

    padding-top: 8px;
    padding-right: 15px;
    padding-bottom: 8px;
    padding-left: 15px;
}