CODE BUILDERS Lesson 4 of 6 ← All courses

Station 4 · Map Room

More Pages and Menus

One page is a start. A real website has several pages and a menu to move between them. Today your site grows!

1 Warm-up
2 Learn it
3 Spot it
4 Build it
5 Try it for real
6 Build Log
7 Quiz

About 45 minutes. You can stop and come back. Your answers are saved in this browser.

Part 1 · Warm-up

What do you remember?

Last time you styled your site with CSS. Let's warm up!

Part 2 · Learn it

Every page is a file

Each page of your website is its own .html file, all saved in the same folder. They can all share one style.css, so every page looks the same.

📁 my-website
- 📄 index.html ← Home
- 📄 about.html
- 📄 gallery.html
- 🎨 style.css
- 🖼️ my-board.png

Links join the pages

A link uses the <a> tag. The href is the filename of the page to go to:

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

A menu (also called navigation) is a group of links inside a <nav> tag. Put the same menu on every page, so people can always get anywhere.

<nav class="menu">
  <a href="index.html">Home</a>
  <a href="about.html">About me</a>
  <a href="gallery.html">Gallery</a>
</nav>

CSS: put the links in a row

.menu {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

Filename rules

Use lowercase letters: about.html, not About.html.
No spaces. Use a hyphen instead: my-pets.html.
The href must match the filename exactly, letter for letter.

Watch it work

EXAMPLE 1Building page 2 with a prompt chain

"Here is my index.html and my style.css. [paste them] I want to add an About page. First, just make the menu: add a nav with links to index.html, about.html and gallery.html."
"Now make about.html. Use exactly the same menu and the same style.css. Leave space for me to write the text myself."
"Explain what you changed, line by line. Don't change anything else in my files."

A chain from Prompt Pro, Lesson 5! Small steps, and "don't change anything else" stops the AI from rewriting the parts you already made.

EXAMPLE 2A broken link

📁 my-website
- 📄 index.html
- 📄 about.html

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

Clicking this shows an error page, because there's no file called about-me.html. The file is about.html. Fix the href (or rename the file) so they match exactly.

EXAMPLE 3Fitting a phone-sized screen

Problem: always 1000 pixels wide

.page {
  width: 1000px;
}

On a phone, this page is too wide, and you'd have to scroll sideways. Here's the fix:

Fix part 1: in the head of every page

<meta name="viewport" content="width=device-width, initial-scale=1">

Fix part 2: in style.css

.page {
  max-width: 1000px;
}
img {
  max-width: 100%;
  height: auto;
}

The meta line goes in the <head> and tells phones to use their real width. max-width means "up to this wide, but you can shrink." To test, make your browser window really narrow and check nothing gets cut off.

Byte says

A menu link to another website (one starting with https://) is a Code Check moment. Only add outside links with a grown-up's OK. Your own pages are always fine!

Part 3 · Spot it

Will This Link Work?

Look at the files in the folder, then decide if the link will work.

Link inspector! 🗺️

Part 4 · Build it

Fix the Menu

This menu is broken! The folder has three pages: index.html, about.html and gallery.html. Fix the links and add the missing one. (Links don't open in the playground. Just get the code right!)

The playground only runs inside this page. It can't open other websites or change anything on your computer. Your code is saved in this browser, on this device.

Part 5 · Try it for real

Map Room Missions

Time to use your own chatbot. Missions get harder as you go. Bronze is the one to do today. Silver and Gold are extra challenges for when you want more.

★ Bronze

Page Two

Grow your site to two pages.

Make a second page (like about.html) in your folder. A chain prompt like Example 1 can help.
Add the same menu to both pages, and link style.css on both.
Click every menu link to test it. Fix any that show an error page.

What is your second page about?

★★ SilverExtra challenge

Three-Page Site

Make it a real multi-page website.

Add a third page (or more!) from your website plan.
Check every page has the same menu and looks consistent.
Test every link on every page. Make a checklist so you don't miss any.

List your pages:

★★★ GoldExtra challenge

Phone Ready

Make your site work on a narrow screen.

Add the viewport meta line to the head of every page.
Make your browser window really narrow. Does anything get cut off or need sideways scrolling?
Fix it using max-width (or ask AI to explain how, and Code Check its answer).

What did you have to fix?

Your notes are saved right in this browser, on this device. They're never sent anywhere.

Part 6 · Build Log

Add a page to your Build Log

Add today's page to your Build Log.

🛠️ More Pages and Menus

PAGE 4 OF 6

The prompt that worked best today What I built today

Your Build Log is saved right in this browser, on this device. It's never sent anywhere.

Recap

What you just learned

✓ Each page is its own .html file in the same folder, and they can share one style.css.
✓ Links use <a href="about.html">. The href must match the filename exactly.
✓ Put the same menu (<nav>) on every page.
✓ Filenames: lowercase, no spaces, hyphens instead.
✓ For phones, add the viewport meta line, use max-width, and test with a narrow window.

Part 7 · Show what you know

Quick Quiz

10 questions, picked at random from a bigger question bank. If you take it again, you'll probably see a different mix. Let's go!

Up next

Lesson 5 · Make It Interactive

Add buttons that actually do things, with JavaScript.

Go to Lesson 5 →