Back to Unit 6

Unit 6 Website Development - Tutorial 3

3.7 Build a Right Navigation Bar Website Template

Follow each step to build a website header with the navigation buttons positioned on the right.

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 website header
  5. Add the logo image
  6. Add the company name
  7. Add the menu bar links
  8. Style the body to control the whole page
  9. Style the header layout
  10. Resize and move the logo to the left
  11. Move the company name to the left
  12. Move the menu links to the right
  13. Style the navigation buttons
  14. Add the main content area
  15. Style the main content area
  16. Add the footer
  17. Style the footer
  18. Add footer links
Step 1

Step 1 Create the project files and folders

Create a new folder for your website.

Inside the folder, create:

  • index.html
  • style.css
  • a folder called images

Inside the images folder, save your logo image as logo.png.

Folder structure

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

What this does

The folder structure keeps your webpage, stylesheet and logo image organised.

index.html will hold the webpage content.

style.css will hold the styling rules.

The images folder keeps image files separate from the code files.

Expected output

No webpage output yet. You have only created the files and folders.
Step 2

Step 2 Add the basic HTML page structure

Open index.html and add this code.

HTML to add

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

<body>

</body>
</html>

What this does

<!DOCTYPE html> tells the browser that the file is an HTML5 webpage.

<html lang="en"> starts the webpage and tells the browser the page is written in English.

<head> stores information about the webpage that is not shown directly on the page.

<meta charset="UTF-8"> helps the browser display letters and symbols correctly.

<title> sets the text shown on the browser tab.

<body> is where the visible webpage content will go.

Expected output

Blank page. This is correct because no visible content has been added yet.
Step 3

Step 3 Link the external CSS file

Inside the <head> section, add the stylesheet link.

Updated head section

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

What this does

<link> connects another file to the HTML page.

rel="stylesheet" tells the browser that the linked file is a CSS stylesheet.

href="style.css" tells the browser the name and location of the CSS file.

This means your HTML file controls the content and your CSS file controls the design.

Expected output

Blank page. The CSS is connected, but there is still no visible content.
Step 4

Step 4 Add the website header

Inside the <body> section, add a header.

HTML to add

<header>

</header>

What this does

<header> creates the top section of the webpage.

A header is normally used for the logo, company name and navigation menu.

This tutorial will style the header so the logo is on the left, the company name is in the centre and the menu buttons are on the right.

Expected output

The page may still look blank because the header has no content inside it yet.
Step 5

Step 5 Add the logo image

Inside the <header>, add the logo box and image.

HTML to add

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

What this does

<div class="logo-box"> creates a container for the logo image.

class="logo-box" gives the container a name so CSS can style it later.

<img> displays an image on the webpage.

src="images/logo.png" tells the browser to look inside the images folder for the logo file.

alt gives a text description of the image for accessibility and for when the image does not load.

Expected output

Logo preview

The preview uses an embedded placeholder image. Your own webpage will show the image saved as images/logo.png.

Step 6

Step 6 Add the company name

Under the logo box, add the company name.

HTML to add

<h1>Company Name</h1>

What this does

<h1> creates the most important heading on the page.

The text Company Name is placeholder text. Replace it with the name of your own client or website.

Expected output

Logo preview

Company Name

Step 7

Step 7 Add the menu bar links

Under the company name, add the navigation links.

HTML to add

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

What this does

<nav> creates a navigation area for page links.

<a> creates a clickable link.

href="#" is a temporary link. It keeps the link on the same page for now.

Later, replace # with a real file name such as about.html.

Expected output

Logo preview

Company Name

Home About Services Contact

Move your mouse over the links. They behave like normal links, but they do not leave this tutorial page.

Step 8

Step 8 Style the body to control the whole page

Open style.css and add this CSS.

CSS to add

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's default gap around the page.

font-family changes the font used across the webpage.

background-color changes the page background colour. The value #f2f2f2 is a light grey.

color changes the normal text colour. The value #222222 is a very dark grey.

Expected output

Logo preview

Company Name

Home About Services Contact

The page background is now light grey and the default outer gap has been removed.

Step 9

Step 9 Style the header layout

Add this CSS under the body CSS.

CSS to add

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

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

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

What this does

header selects the top header section of the webpage.

background-color changes the header background. The value #333333 is a dark grey.

color changes the text colour inside the header to white.

The padding rules add space inside the header.

display: grid; turns the header into a grid layout.

grid-template-columns: auto 1fr auto; creates three columns. The logo column and navigation column only use the space they need, and the company name uses the space in the middle.

align-items: center; vertically aligns the logo, company name and navigation area.

Expected output

Logo preview

Company Name

HomeAboutServicesContact
Step 10

Step 10 Resize and move the logo to the left

Add this CSS to make the logo smaller and place it on the left of the header.

CSS to add

.logo-box {
    width: 120px;
    justify-self: left;
}

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

What this does

.logo-box selects any HTML element with class="logo-box".

width: 120px; makes the logo container 120 pixels wide.

justify-self: left; places the logo box on the left side of its grid column.

.logo-box img selects the image inside the logo box.

width: 100%; makes the image fill the width of the logo box.

height: auto; keeps the image in proportion so it does not stretch.

Expected output

Company Name

HomeAboutServicesContact
Step 11

Step 11 Move the company name to the left

Add this CSS to move the company name to the left of the middle column.

CSS to add

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

    justify-self: left;
    text-align: left;
}

What this does

header h1 selects only the <h1> inside the header.

The margin rules remove extra default spacing around the heading, except margin-left: 24px; which creates a clear gap between the logo and company name.

justify-self: left; places the company name on the left side of the middle grid column.

text-align: left; aligns the heading text to the left.

Expected output

Company Name

Home About Services Contact
Step 12

Step 12 Move the menu links to the right

Add this CSS to move the navigation area to the right side of the header.

CSS to add

header nav {
    justify-self: right;
    margin-top: 0;
}

What this does

header nav selects only the navigation area inside the header.

justify-self: right; places the navigation area on the right side of its grid column.

margin-top: 0; removes extra space above the navigation area.

Expected output

Company Name

Home About Services Contact

The links are on the right, but they still look like normal links because they have not been styled as buttons yet.

Step 13

Step 13 Style the navigation buttons

Add this CSS to turn the menu links into buttons.

CSS to add

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

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

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

What this does

nav a selects every link inside a navigation area.

display: inline-block; allows each link to behave like a button while still sitting side by side.

background-color: #666666; gives each button a medium grey background.

color: white; makes the button text white.

text-decoration: none; removes the default underline from each link.

The padding rules add space inside each button so the button looks larger and easier to click.

The margin rules add space around each button so the buttons do not touch.

The border rules add a visible outline around each button.

nav a:hover styles a navigation link when the mouse moves over it.

background-color: #ffd84d; changes the hovered button to yellow.

Expected output

Company Name

Move your mouse over a menu button. The button should turn yellow.

Step 14

Step 14 Add the main content area

Go back to index.html. Under the closing </header> tag, add the main content area.

HTML to add

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

What this does

<main> creates the main content section of the webpage.

Semantic HTML uses <main> for the main information on the page.

<h2> creates a second-level heading inside the main area.

Expected output

Company Name

Page Heading

Step 15

Step 15 Style the main content area

Add this CSS to style the main content section.

CSS to add

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 section.

background-color: white; changes the main area background to white.

min-height: 400px; makes the main area at least 400 pixels tall.

The padding rules add space inside the main area so the heading is not pushed against the edges.

text-align: center; centres the text inside the main area.

main h2 selects only the <h2> inside the main section.

Expected output

Company Name

Page Heading

Step 16

Step 16 Add the footer

Go back to index.html. Under the closing </main> tag, add the footer.

HTML to add

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

What this does

<footer> creates the bottom section of the webpage.

Footers often contain copyright text, contact links, legal links and social media links.

<p> creates a paragraph for the copyright text.

&copy; displays the copyright symbol.

Expected output

Company Name

Page Heading

© 2026 Company Name. All rights reserved.
Step 17

Step 17 Style the footer

Add this CSS to style the bottom section of the webpage.

CSS to add

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 footer section at the bottom of the webpage.

background-color: #333333; changes the footer background to dark grey.

color: white; changes the footer text to white.

text-align: center; centres the footer text.

The padding rules add space inside the footer.

footer p selects the paragraph inside the footer.

Expected output

Company Name

Page Heading

© 2026 Company Name. All rights reserved.
Step 18

Step 18 Add footer links

Inside the footer, under the paragraph, add these links. Then add the CSS underneath your existing footer CSS.

HTML to add

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

CSS to add

footer nav {
    margin-top: 15px;
}

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

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

What this does

The footer <nav> creates a smaller navigation area at the bottom of the webpage.

footer nav selects only the navigation area inside the footer.

margin-top: 15px; adds space above the footer links.

footer nav a selects only links inside a <nav> that is inside the footer.

background-color: #555555; gives the footer buttons a slightly different grey background.

font-size: 14px; makes the footer link text slightly smaller than the main menu text.

The earlier nav a:hover rule still applies, so these footer buttons also turn yellow when hovered over.

Expected output

Company Name

Page Heading

© 2026 Company Name. All rights reserved.

Move your mouse over a footer button. The button should also 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>

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

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

.logo-box {
    width: 120px;
    justify-self: left;
}

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

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

    justify-self: left;
    text-align: left;
}

header nav {
    justify-self: right;
    margin-top: 0;
}

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

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

    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 {
    margin-top: 15px;
}

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

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