Build web pages by typing HTML and CSS and watching the page change.
Each lesson works two ways. Students can work through the online tutorial at their own pace (it checks their answers and saves their progress in their browser), or you can teach it to the whole class from the slides, then send students into the tutorial for the Modify and Make steps.
Every lesson guide has plain-language notes, the answers to every check, a solution for every task, and slides and a worksheet for Waypoints Prepare. These guide pages are not linked from student pages, but they are not secret either: keep printed Teacher editions for answers you do not want students to find.
Whole-course cheat sheet: Open to print (every command, grouped by unit: a handout for the final challenge)
Tags label text and nest, and your first CSS rules change how it looks.
A web page is a text file. HTML is the set of labels, called tags, that say what each piece of text is. <h1> labels the main heading, <p> a paragraph, <ul> a list. Most tags come in pairs: an opening tag <p> and a closing tag </p> with a slash, wrapped around the text they label.
Tags go inside other tags, like boxes inside boxes: a <strong> word inside a <p>, list items inside a list, rows inside a table. The inner tag always closes first. Some tags also carry extra information, called attributes, inside the opening tag: a link's address, <a href="...">, or an image's file, <img src="...">.
The browser (Chrome, Safari, Edge) reads the file and draws the page. The tags say what things are; the browser decides how they look, and later CSS changes that look.
Tags are like the labels on a filing system: a folder labelled "Sports day" holds a sheet labelled "When", which holds a note labelled "important". Close each folder before the one it sits in.
Where it breaks: a filing clerk would refuse a badly labelled folder, but a browser never refuses. When the tags are wrong, it shows its best guess with no error message. A missing </strong> turns the rest of the page bold, and overlapping tags are quietly repaired. That is why students must look at the page after every change.
<h1>My page</h1> and watch the preview.<p>Line one then press Enter and type line two</p>. The page shows one line: the browser ignores line breaks in the code.<p> and </p>.<strong> around one word, then delete its </strong>. Watch the bold spread, then put it back.<p>.</strong> is missing. Find where the bold should stop.<!DOCTYPE html> and <head>?" A real page has them as a standard wrapper. In the playground they are optional, and students copy them as they are for now (the newsletter lesson shows the wrapper).<style> rule change every paragraph?" A rule names a kind of tag, so it styles every tag of that kind. Picking only some of them needs a class, a few lessons on.Once the page has structure, a CSS rule changes how a kind of tag looks: p { color: teal; } makes every paragraph teal. The rule names a tag, then lists property: value; pairs inside braces. It lives in a <style> block, and it does not change what anything is: an <h1> styled small is still the main heading. That is the three-layers idea from Digital systems: content, structure and style are separate jobs.
This unit builds the tree (headings, paragraphs, tags inside tags) and then styles it with rules on tags. The next unit adds lists, links and pictures, and classes to style only some of them. Later, JavaScript finds and changes the same tags, which is why the DOM course calls the page a tree.
Cheat sheet: Open to print (A4, with a picture of what each command draws) · Markdown
Lists, links and pictures, classes to style some of them, and a whole page to fix.
Three tags that make a page more than text. A list is <ul> (bullets) or <ol> (numbers) holding <li> items, one per item. A link is <a href="address">words</a>: the address goes in the opening tag as an attribute, and the words between the tags are what people click. A picture is <img src="file" alt="words">: src is the picture file, alt describes it, and there is no closing tag.
A class is a name you add to a tag, class="note", so a CSS rule written .note { } styles only the tags that carry it.
A link is a signpost: the words say where it leads, and the address says how to get there. Where it breaks: a signpost shows its words, not its address. Students often expect the address to appear on the page.
<ul> of three things you like. Turn it into an <ol>: the numbers appear by themselves.<img src="trophy.svg" alt="A gold trophy">. Change trophy to trophey and watch the alt words appear in place of the picture.class="best" and add .best { color: crimson; }.<ol> numbers its items itself: do not type the numbers.src does not match the file. Names must match exactly, capitals included..best), and the name must match in both places.The unit ends with a whole newsletter page to fix, using everything so far. Next come tables, the named parts of a page, links within a page, and forms.
Cheat sheet: Open to print (A4, with a picture of what each command draws) · Markdown
Tables, the named parts of a page, links within a page, and forms.
A table is rows (<tr>) of cells: <th> for a heading cell and <td> for a data cell. You write it one row at a time, and each row needs the same number of cells. The page parts <header>, <nav>, <main>, <section> and <footer> name the parts of a page; they look like plain blocks, and the names are for screen readers and search engines. An id gives one element a name no other element has, and a link written href="#name" jumps to it. A form collects answers: each <label> is joined to its box by for matching the box's id, and a <button> is the thing to press.
<nav> or <main>.A form is a paper form: labelled boxes and a place to hand it in. Where it breaks: a paper form goes somewhere. An HTML form on its own sends nothing; code behind it has to do that, and this course stops before that.
<header> and your text in <main>. Notice what does not change.id, and add a menu of # links that jumps to each.<label for="email">Email</label><input id="email" type="email">. Click the label.<header> change anything?" It names the part; it does not style it.href="results" looks for a page called results. A jump link needs #.The challenge builds a club page that uses all of these. The Layout and components course then lays the same page out in rows and cards.
Cheat sheet: Open to print (A4, with a picture of what each command draws) · Markdown
Build a whole club page from everything in the course, in milestones, then make it your own.
The challenge is one page built from everything in the course: a header with a menu of jump links, sections with a list, a picture and a results table (the winners marked with a class), a sign-up form with linked labels, and a footer. It is coloured with tag and class rules. How it is laid out comes in the next course. There is nothing new to learn in it. Students build it in three milestones, and the support fades: the first gives most of the code, the second gives an outline as comments, the third gives only the goals.
Finishing the lesson marks Challenge complete on the course page. The next course, Layout and components, takes this same page and lays it out in rows and cards.
It is like assembling flat-pack furniture you have already built the parts of: the instructions get shorter as you go. Where it breaks: some students try to build everything at once. Insist on one milestone at a time, checking the page (and Boxes view) after every change.
Open the challenge and do milestone 1. Then look at milestone 3's goals and plan, on paper, which tags and rules you would use. That plan is the conversation to have with students.
trophy.svg, medal.svg, book.svg, ball.svg, star.svg and music.svg.The page is a portfolio piece, and the next course lays it out. The same building blocks appear in every website students will meet.
Cheat sheet: Open to print (A4, with a picture of what each command draws) · Markdown
Self-paced briefs students can pick up after the lesson named on each. Students tick their own milestones and claim a badge; the page lights the skills their code uses. Badges stay in the student's browser: ask them to press Show your teacher. Open the projects page
Make a one-page guide to something you love: a hobby, a game, a band, a place. Give it a title, a few short sections, a list, a picture and links where people can find out more.
Milestones:
The pictures students can use without uploading are the course ones (star.svg, trophy.svg, music.svg, ball.svg, book.svg, medal.svg). A picture from the web needs its full address in src.
<h1>Football: my guide</h1>
<p>I have played for six years. Here is why I love it.</p>
<h2>Why it is great</h2>
<ul>
<li>Anyone can play with just a ball</li>
<li>Every game is different</li>
<li>You play as a team</li>
</ul>
<h2>My kit</h2>
<img src="ball.svg" alt="A black and white football" width="120">
<h2>Find out more</h2>
<p>Read the <a href="https://www.theifab.com/laws/">Laws of the Game</a>, or find a club near you.</p>
Make an order form for a bake sale, a school shop or a fundraiser: what to order, how many, a name, a choice of pick-up time, and a button. Every box has a label that a screen reader can read.
Milestones:
Sending is switched off in the preview (it shows a note instead), so the button doing nothing is expected. The labels milestone is the accessibility habit from lesson 9; the Your site course comes back to it.
<style>
form { font-family: sans-serif; }
label { display: inline-block; width: 110px; margin: 6px 0; }
button { margin-left: 110px; padding: 6px 14px; }
</style>
<h1>Bake sale order</h1>
<form>
<p><label for="item">What</label>
<select id="item">
<option>Cupcake</option>
<option>Brownie</option>
<option>Lemon slice</option>
</select></p>
<p><label for="count">How many</label>
<input id="count" type="number" min="1" value="1"></p>
<p><label for="who">Your name</label>
<input id="who"></p>
<p><label for="when">Pick up</label>
<select id="when">
<option>Recess</option>
<option>Lunch</option>
</select></p>
<button>Order</button>
</form>