Students lay out the Course A club page in three milestones with fading support (header and menu, then a hero and a wrapping row of cards, then the table, a sign-up card and the 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. The starter is the finished Course A club page, so students who skipped Course A can still start here. Every milestone recalls earlier lessons: rules that combine and nav a, block and inline, the box, Flexbox rows, gap, justify-content, wrapping and components. Support fades on purpose: milestone 1 gives the exact code, milestone 2 an outline in comments, milestone 3 only the goals. There is no separate review step, because the whole lesson is review. 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 laid-out page and name the rule behind it.
Listen for the box that holds the items. Write the checklist on the board for the build.
Swap pages with a partner. Raise the cards' min-width on their page and say which parts fit and which do not.
For anything that squashes, ask the owner whether the row wraps and whether the card has a min-width.
Planning a whole layout from parts they already know, and putting display flex on the right box. Have them name the box that holds the items first.
| What you will see | A question to ask | The fix |
|---|---|---|
| Nothing moved in the header. | Which box holds the name and the menu, and does it have display flex? | Put display flex on the header, the box that holds them, not on the h1 or the nav. |
| The menu links are still stacked in a column. | Which box holds the links? | Put display flex on nav ul, the list that holds the li items. |
| The cards stay in one row and squash when they have no min-width. | Does the row have flex-wrap wrap, and does the card have a min-width? | Add flex-wrap wrap to .cards, and flex 1 with min-width 200px to .card. |
| The labels still sit beside their boxes. | Are labels block or inline? | Labels are inline. Add label { display: block; }. |
One possible solution for each task. Other correct programs are fine.
<style>
header {
background-color: lightblue;
padding: 8px 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
display: flex;
gap: 16px;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
}
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>
<style>
header {
background-color: lightblue;
padding: 8px 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
display: flex;
gap: 16px;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
}
h1 {
color: navy;
}
a {
color: darkblue;
}
h2 {
color: darkblue;
}
.winner {
background-color: gold;
}
footer {
background-color: lightblue;
text-align: center;
}
.hero {
background-color: lightyellow;
text-align: center;
padding: 32px;
margin: 16px 0;
}
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1;
min-width: 200px;
padding: 16px;
border: 2px solid navy;
}
</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 class="hero">
<h2>Welcome to Chess club</h2>
<p>Learn the moves, play a friend and win a trophy.</p>
<p><a href="#join">Join us today</a></p>
</section>
<section class="cards">
<div class="card">
<h3>When</h3>
<p>Every Wednesday at lunch.</p>
</div>
<div class="card">
<h3>Where</h3>
<p>In the library.</p>
</div>
<div class="card">
<h3>Who</h3>
<p>Everyone, at any level.</p>
</div>
</section>
<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>
<style>
header {
background-color: lightblue;
padding: 8px 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
display: flex;
gap: 16px;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
}
h1 {
color: navy;
}
a {
color: darkblue;
}
h2 {
color: darkblue;
}
.winner {
background-color: gold;
}
footer {
background-color: lightblue;
text-align: center;
padding: 16px;
}
.hero {
background-color: lightyellow;
text-align: center;
padding: 32px;
margin: 16px 0;
}
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1;
min-width: 200px;
padding: 16px;
border: 2px solid navy;
}
table {
width: 100%;
}
td, th {
padding: 8px;
border: 1px solid gray;
text-align: left;
}
label {
display: block;
}
</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 class="hero">
<h2>Welcome to Chess club</h2>
<p>Learn the moves, play a friend and win a trophy.</p>
<p><a href="#join">Join us today</a></p>
</section>
<section class="cards">
<div class="card">
<h3>When</h3>
<p>Every Wednesday at lunch.</p>
</div>
<div class="card">
<h3>Where</h3>
<p>In the library.</p>
</div>
<div class="card">
<h3>Who</h3>
<p>Everyone, at any level.</p>
</div>
</section>
<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 class="card">
<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;
padding: 8px 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
display: flex;
gap: 16px;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
}
h1 {
color: navy;
}
a {
color: darkblue;
}
h2 {
color: darkblue;
}
.winner {
background-color: gold;
}
footer {
background-color: lavender;
text-align: center;
padding: 16px;
}
.hero {
background-color: lightyellow;
text-align: center;
padding: 32px;
margin: 16px 0;
}
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1;
min-width: 200px;
padding: 16px;
border: 2px solid navy;
}
table {
width: 100%;
}
td, th {
padding: 8px;
border: 1px solid gray;
text-align: left;
}
label {
display: block;
}
</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 class="hero">
<h2>Welcome to Choir club</h2>
<p>Sing with friends, learn new songs and perform at the concert.</p>
<p><a href="#join">Join us today</a></p>
</section>
<section class="cards">
<div class="card">
<h3>When</h3>
<p>Every Thursday at lunch.</p>
</div>
<div class="card">
<h3>Where</h3>
<p>In the music room.</p>
</div>
<div class="card">
<h3>Who</h3>
<p>Everyone, at any level.</p>
</div>
</section>
<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 class="card">
<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 fourth card, then a second row of cards. Try justify-content: center on the cards and see what changes. Try the optional lessons on Grid and on making the page react.
Support: Let students use Reset to this task's start at each milestone, so everyone reaches milestone 3. Pair students for milestone 3: one does the table, one the form.
Name three parts of your layout and the rule behind each.
For example: the name left and the menu right is display flex with justify-content space-between on the header; the cards share one .card rule; the cards wrap because the row has flex-wrap wrap.
The finished page is a portfolio piece: students can name each part and the lesson it came from. Optional lessons follow: Grid for whole-page layouts, and Make it react for a first look at JavaScript.