Lesson 2: Building Our First Multi-Page Website with HTML and CSS

Back to articles
Series: WebDev 101 Part 2
Previous

Day 2: Setting Up VS Code and Building Our First Multi-Page Website

Today, students continued building on the foundation from Day 1. We moved from a very basic HTML page into a small multi-page website using HTML, CSS, and Visual Studio Code.

The main goal was not to build a perfect website. The goal was to understand how files, folders, pages, links, and stylesheets work together.

Step 1: Installing Visual Studio Code

We started by installing Visual Studio Code, often called VS Code. VS Code is a code editor. A code editor is a program built specifically for writing and organizing code.

Students installed VS Code on their machines so they could create and edit website files more easily.

Basic Installation Steps

  1. Open a web browser.
  2. Search for Visual Studio Code download.
  3. Open the official Visual Studio Code website.
  4. Download the version for your operating system.
  5. Run the installer.
  6. Open VS Code after installation is complete.

Once VS Code was installed, students were ready to create their first website folder.

Step 2: Creating a Website Folder

Next, students created a folder called website. This folder became the project folder for the class website.

A project folder keeps related files together. For this lesson, the folder contained three files:

  • index.html — the homepage
  • about.html — a second page
  • index.css — the stylesheet used by both pages

The folder looked like this:

website/
  index.html
  about.html
  index.css

This is an important idea in web development: a website is usually made from multiple files working together.

Step 3: Understanding the Files

Each file had a specific job.

File Purpose
index.html The main homepage of the website.
about.html A second page with more information.
index.css The stylesheet that controls how the pages look.

HTML gives the page structure. CSS controls the appearance. The browser reads both files and displays the result.

Step 4: Building the Homepage

For the class example, we used DevGen as a simple organization example. The idea was to create a basic website for a technology and web development business.

The homepage used a simple structure:

  • A navigation bar
  • A main heading
  • An introduction section
  • A list of services
  • A footer

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>DevGen | Home</title>
    <link rel="stylesheet" href="index.css">
  </head>

  <body>
    <nav class="navbar">
      <div class="nav-title">DevGen</div>

      <ul class="nav-links">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
      </ul>
    </nav>

    <main>
      <section class="hero">
        <h1>Building Simple Websites for Real Organizations</h1>
        <p>DevGen helps local businesses and organizations create clean, useful websites.</p>
      </section>

      <section class="card">
        <h2>What We Do</h2>
        <p>We build websites that help people share information, promote services, and connect with their community.</p>

        <ul>
          <li>Business websites</li>
          <li>Community organization pages</li>
          <li>Simple web tools and online forms</li>
        </ul>
      </section>

      <section class="card">
        <h2>Why Websites Matter</h2>
        <p>A website gives an organization a place where people can learn who they are, what they do, and how to contact them.</p>
      </section>
    </main>

    <footer>
      <p>Created during web development class.</p>
    </footer>
  </body>
</html>

Step 5: Adding a Second Page

Students also created a second page named about.html. This file was placed in the same folder as index.html.

We copied the same navigation bar into the second page so both pages could link to each other.

about.html

<!DOCTYPE html>
<html>
  <head>
    <title>DevGen | About</title>
    <link rel="stylesheet" href="index.css">
  </head>

  <body>
    <nav class="navbar">
      <div class="nav-title">DevGen</div>

      <ul class="nav-links">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
      </ul>
    </nav>

    <main>
      <section class="hero">
        <h1>About DevGen</h1>
        <p>DevGen is a simple example of an organization website built with HTML and CSS.</p>
      </section>

      <section class="card">
        <h2>Our Goal</h2>
        <p>Our goal is to help people understand technology by building real examples one step at a time.</p>
      </section>

      <section class="card">
        <h2>What Students Practised</h2>

        <ol>
          <li>Creating files in VS Code</li>
          <li>Writing basic HTML structure</li>
          <li>Connecting a CSS file</li>
          <li>Creating links between pages</li>
          <li>Styling elements with CSS classes</li>
        </ol>
      </section>
    </main>

    <footer>
      <p>Created during web development class.</p>
    </footer>
  </body>
</html>

Step 6: Styling the Website with CSS

The CSS file controlled how both pages looked. Since both index.html and about.html linked to the same index.css file, one stylesheet could style both pages.

This is useful because it keeps the design consistent.

index.css

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #222;
}

.navbar {
  background-color: #222;
  color: white;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-title {
  font-size: 22px;
  font-weight: bold;
}

.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 18px;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.nav-links a:hover {
  text-decoration: underline;
}

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
}

.hero {
  background-color: white;
  border: 1px solid #ccc;
  padding: 24px;
  margin-bottom: 20px;
}

.hero h1 {
  margin-top: 0;
}

.card {
  background-color: white;
  border: 1px solid #ccc;
  padding: 18px;
  margin-bottom: 16px;
}

.card h2 {
  margin-top: 0;
}

footer {
  border-top: 1px solid #ccc;
  text-align: center;
  padding: 16px;
  color: #555;
}

Step 7: Understanding the Navigation Bar

The navigation bar used the <nav> element. A nav is used for links that help users move around a website.

<nav class="navbar">
  <div class="nav-title">DevGen</div>

  <ul class="nav-links">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
</nav>

The links used relative paths:

<a href="about.html">About</a>

A relative path means the browser looks for the file based on where the current file is located. Since index.html and about.html are in the same folder, the link can simply point to about.html.

Relative Paths vs. Absolute Paths

We also discussed the difference between relative paths and absolute paths.

Path Type Example Meaning
Relative path about.html Look for the file relative to the current file.
Absolute path C:/Users/Student/Desktop/website/about.html Look for the file at one exact location on one computer.

Relative paths are usually better for websites because the project folder can move to another computer or server and still work correctly.

Absolute paths can break when a project is moved because the folder structure may not match anymore. This becomes especially important when a website is deployed, which means placed somewhere other people can access it.

Student Projects

Students then worked on their own basic websites. Each student chose a different organization, topic, or idea.

Some examples included:

  • A page about road complaints and local infrastructure
  • A soccer club page
  • A chess introduction page
  • A basic history page about North Battleford

Students were limited to HTML and CSS. This was intentional. At this stage, the goal is to become comfortable with structure and styling before adding programming logic.

Reference Sheets

Students were also given two reference sheets:

Reference sheets are useful because beginners do not need to memorize every tag or CSS property immediately. Professional developers also look things up constantly. The important skill is knowing what to look for and how to test it.

How the Computer Handles Our Files

We also spent some time talking about how computers store and load information.

Storage Devices

Storage devices, such as SSDs and HDDs, keep files even when the computer is turned off. This is called persistent storage.

For example, when students saved index.html, about.html, and index.css, those files were stored on the computer's drive.

RAM

RAM is fast temporary storage. It helps the computer work with programs and files quickly while the computer is running.

However, RAM is not persistent. If the power goes out, the information in RAM is lost.

When students opened VS Code, the program was loaded into RAM. When they opened a file, the computer read the file from storage and loaded it so they could edit it.

CPU

The CPU is the part of the computer that performs instructions. One way to imagine it is as a middle person with a calculator, constantly moving between different parts of the computer, processing instructions, and deciding what happens next.

This is not a perfect technical explanation, but it is a useful beginner picture: storage remembers, RAM holds active work, and the CPU processes instructions.

Local Files vs. Real Websites

Right now, students are developing locally. That means the files are stored on the same computer they are using.

When they open index.html, the browser reads the file directly from the local computer.

Real websites usually work differently. When someone types a web address into a browser, the browser asks another computer for files. That other computer is called a server.

The basic idea is:

  1. The user enters a web address.
  2. The browser sends a request over the network.
  3. A server receives the request.
  4. The server sends back files or data.
  5. The browser displays the result.

This connects directly to what students are already doing. A website still uses files like HTML and CSS, but in real applications those files may come from another computer instead of the local machine.

A Brief Look at Binary and Decimal

Near the end of class, we briefly touched on number systems.

Humans usually count using decimal, also called base 10. Decimal uses ten digits:

0 1 2 3 4 5 6 7 8 9

Computers work at a lower level using binary, also called base 2. Binary uses two digits:

0 1

The same number can be represented in different number systems. For example:

Decimal Binary
0 0
1 1
2 10
3 11
4 100
5 101

This was only a short introduction, but it helped show that computers represent information differently than humans usually do.

Main Takeaways

Today, students practised several important web development ideas:

  • Installing and using VS Code
  • Creating a project folder
  • Making multiple HTML pages
  • Connecting one CSS file to multiple pages
  • Using a navigation bar
  • Using relative paths between pages
  • Understanding the difference between local files and real websites
  • Learning the basic roles of storage, RAM, and the CPU

The most important progress today was that students moved from a single page into a small website with multiple connected files. That is a major step toward understanding how real websites are organized.

In this series
  1. 1. Lesson 1: Thinking Like a Builder
  2. 2. Lesson 2: Building Our First Multi-Page Website with HTML and CSS