Students build a coloured club page in three milestones with fading support (header and menu, sections with a list, picture and results table, then a sign-up form and footer), then make it their own.
Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.
Plan 10 min · Milestone 1 15 min · Milestone 2 25 min · Milestone 3 25 min · Make it yours 15 min
Read the challenge primer "Running the final challenge", then build milestone 1 yourself and plan milestones 2 and 3 on paper.
There is nothing new in this lesson, and no layout: Course B lays this same page out. Every milestone recalls earlier lessons: tags and nesting, tag rules and colours, lists, links, pictures and alt text, classes, tables, page sections, jump links, and forms. Support fades on purpose: milestone 1 gives the exact rules, milestone 2 an outline in comments, milestone 3 only the goals. Finishing this lesson marks Challenge complete on the course page.
On the slides at these points. Students can do the whole lesson on their own; these are for the room. In the deck, the Run, Modify and Make slides have the live playground in them (the tutorial link is the backup), and the notes above are in each slide's speaker notes.
With your partner, point to each part of the finished page and name the tag or rule behind it.
Listen for the lesson each part came from. Write the checklist on the board for the build.
Swap pages with a partner. Click every menu link and every label. Say which parts work and which do not.
For anything that fails, ask the owner to compare the href with the id, or the for with the id, before changing anything.
Planning a whole page from parts they already know. Have them name the parts first and finish one milestone at a time; resist building it for them.
| What you will see | A question to ask | The fix |
|---|---|---|
| A menu link does not jump. | Does the href, after the | Make each pair match exactly, capitals included, and keep the |
| Clicking a label does nothing. | Does the label's for match the box's id? | Make them identical, for example for="name" and id="name". |
| Every table row is gold, or no row is. | Does the class go on the row's opening tag, and does the rule start with a dot? | Write <tr class="winner"> for the winners and .winner { } in the style block. |
| Part of the page suddenly looks wrong after an edit. | Which closing tag did you add or move last? | Check that every tag closes, in the right order, and that every property ends with a semicolon. |
One possible solution for each task. Other correct programs are fine.
<style>
header {
background-color: lightblue;
}
h1 {
color: navy;
}
a {
color: darkblue;
}
</style>
<header>
<h1>Chess club</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#results">Results</a></li>
<li><a href="#join">Join</a></li>
</ul>
</nav>
</header>
<main>
<!-- Milestone 2 comes next. -->
</main>
<style>
header {
background-color: lightblue;
}
h1 {
color: navy;
}
a {
color: darkblue;
}
h2 {
color: darkblue;
}
.winner {
background-color: gold;
}
</style>
<header>
<h1>Chess club</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#results">Results</a></li>
<li><a href="#join">Join</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>About the club</h2>
<p>We play chess every Wednesday at lunch in the library. All levels welcome.</p>
<p>Bring:</p>
<ul>
<li>a friend</li>
<li>a snack</li>
<li>your best opening</li>
</ul>
<img src="trophy.svg" alt="A gold trophy" width="100">
</section>
<section id="results">
<h2>Results this term</h2>
<table>
<tr><th>Player</th><th>Wins</th></tr>
<tr class="winner"><td>Ada</td><td>5</td></tr>
<tr class="winner"><td>Sam</td><td>5</td></tr>
<tr><td>Priya</td><td>3</td></tr>
</table>
</section>
</main>
<style>
header {
background-color: lightblue;
}
h1 {
color: navy;
}
a {
color: darkblue;
}
h2 {
color: darkblue;
}
.winner {
background-color: gold;
}
footer {
background-color: lightblue;
text-align: center;
}
</style>
<header>
<h1>Chess club</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#results">Results</a></li>
<li><a href="#join">Join</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>About the club</h2>
<p>We play chess every Wednesday at lunch in the library. All levels welcome.</p>
<p>Bring:</p>
<ul>
<li>a friend</li>
<li>a snack</li>
<li>your best opening</li>
</ul>
<img src="trophy.svg" alt="A gold trophy" width="100">
</section>
<section id="results">
<h2>Results this term</h2>
<table>
<tr><th>Player</th><th>Wins</th></tr>
<tr class="winner"><td>Ada</td><td>5</td></tr>
<tr class="winner"><td>Sam</td><td>5</td></tr>
<tr><td>Priya</td><td>3</td></tr>
</table>
</section>
<section id="join">
<h2>Join the club</h2>
<form>
<p><label for="name">Name</label>
<input id="name" type="text"></p>
<p><label for="group">Group</label>
<select id="group">
<option>Beginners</option>
<option>Players</option>
<option>Champions</option>
</select></p>
<button>Join</button>
</form>
</section>
</main>
<footer>
<p>Contact: chess@example.com</p>
</footer>
Open task: any program that does what the step asks.
<style>
header {
background-color: lavender;
}
h1 {
color: navy;
}
a {
color: darkblue;
}
h2 {
color: darkblue;
}
.winner {
background-color: gold;
}
footer {
background-color: lavender;
text-align: center;
}
</style>
<header>
<h1>Choir club</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#results">Results</a></li>
<li><a href="#join">Join</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>About the club</h2>
<p>We sing every Thursday at lunch in the music room. All levels welcome.</p>
<p>Bring:</p>
<ul>
<li>a friend</li>
<li>a water bottle</li>
<li>your best voice</li>
</ul>
<img src="music.svg" alt="Music notes" width="100">
</section>
<section id="results">
<h2>Concert results</h2>
<table>
<tr><th>Singer</th><th>Solos</th></tr>
<tr class="winner"><td>Ada</td><td>5</td></tr>
<tr class="winner"><td>Sam</td><td>5</td></tr>
<tr><td>Priya</td><td>3</td></tr>
</table>
</section>
<section id="join">
<h2>Join the club</h2>
<form>
<p><label for="name">Name</label>
<input id="name" type="text"></p>
<p><label for="group">Group</label>
<select id="group">
<option>Beginners</option>
<option>Singers</option>
<option>Champions</option>
</select></p>
<button>Join</button>
</form>
</section>
</main>
<footer>
<p>Contact: choir@example.com</p>
</footer>
Stretch: Add a second table, a second list, or a rule that changes the font of the headings with font-family. Then look at the Course B challenge, which lays this page out.
Support: Let students use Reset to this task's start at each milestone, so everyone reaches milestone 3. Pair students for milestone 3: one plans the form, one the footer.
Name three parts of your page and the tag, attribute or rule behind each.
For example: the menu is a nav list of links, and each href matches a section's id; the gold winners are rows with class winner and a .winner rule; the sign-up labels work because each for matches a box's id.
Course B (Layout and components) takes this same page and lays it out: menu in a row, cards, a hero, and a form styled as a card. The finished page is a portfolio piece: students can describe each part and the lesson it came from.