Unit 6 Website Development - Tutorial 3

3.6 Build a Sidebar 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

Create the project files and folders
Add the basic HTML page structure
Link the external CSS file
Add the header HTML
Add the layout and main content HTML
Add the sidebar navigation HTML
Add the footer HTML
Style the body
Style the header area
Resize and centre the logo box
Style the logo image
Style the company name
Create the sidebar layout
Style the sidebar area
Style the sidebar buttons
Add the sidebar button hover effect
Style the main content area
Style the footer area
Style the footer buttons
Add the footer button hover effect

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>
    <div class="logo-box">
        <img src="images/logo.png" alt="Company logo placeholder">
    </div>

    <h1>Company Name</h1>
</header>

What this does

header creates the top area.
logo-box creates a container for the logo.
img displays the logo image.
h1 displays the company name.

Expected output

Company Name

Step 5

Step 5 Add the layout and main content HTML

Code

<div class="page-layout">
    <aside>

    </aside>

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

What this does

page-layout creates a wrapper for the sidebar and main area.
aside creates the sidebar.
main creates the main content area.

Expected output

Company Name

Page Heading

Step 6

Step 6 Add the sidebar 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 link.
href keeps the link on the page for now.

Expected output

Company Name

Home About Services Contact

Page Heading

Step 7

Step 7 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

Home About Services Contact

Page Heading

Step 8

Step 8 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 9

Step 9 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 10

Step 10 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 11

Step 11 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 12

Step 12 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 13

Step 13 Create the sidebar layout

Code

.page-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: 400px;
}

What this does

display grid changes page-layout into a grid.
grid-template-columns creates a 220px sidebar and a main area that fills the remaining space.

Expected output

Company Name

Page Heading

Step 14

Step 14 Style the sidebar area

Code

aside {
    background-color: #444444;

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

What this does

aside selects the sidebar.
background-color changes the sidebar to dark grey.
The padding rules add space inside the sidebar.

Expected output

Company Name

Page Heading

Step 15

Step 15 Style the sidebar buttons

Code

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

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

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

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

    border-radius: 5px;
}

What this does

aside nav a selects links inside the sidebar.
display block makes each link appear on its own line.
background-color and padding make the links look like buttons.

Expected output

Company Name

Page Heading

Step 16

Step 16 Add the sidebar button hover effect

Code

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

What this does

aside nav a:hover changes a sidebar 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 sidebar button. It should turn yellow.

Step 17

Step 17 Style the main content area

Code

main {
    background-color: white;

    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.
text-align centres the page heading.

Expected output

Company Name

Page Heading

Step 18

Step 18 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 19

Step 19 Style the footer buttons

Code

footer nav a {
    display: inline-block;
    background-color: #555555;
    color: white;
    text-decoration: none;
    font-size: 14px;

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

    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

footer nav a selects links inside the footer.
display inline-block lets the footer links behave like small buttons.

Expected output

Company Name

Page Heading

Step 20

Step 20 Add the footer button hover effect

Code

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

What this does

footer nav a:hover changes a footer 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 footer button. It should turn yellow.

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>
    </header>

    <div class="page-layout">
        <aside>
            <nav>
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Services</a>
                <a href="#">Contact</a>
            </nav>
        </aside>

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

    <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;
}

.page-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: 400px;
}

aside {
    background-color: #444444;

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

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

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

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

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

    border-radius: 5px;
}

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

main {
    background-color: white;

    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 {
    display: inline-block;
    background-color: #555555;
    color: white;
    text-decoration: none;
    font-size: 14px;

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

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

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

    border-radius: 5px;
}

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