For Years 9–10: a web document is three layers, content, structure (HTML) and presentation (CSS). See each layer on its own, change one without touching the others, and find out why keeping them apart matters for whole sites, phones and screen readers. No coding needed; the HTML & CSS course puts it to work.
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)
Content, structure and presentation, and why they are kept apart.
Every web page is three layers. Content is what it says: the words, pictures and links. Structure is what each part is: HTML tags mark a heading, a paragraph, a list, the menu (nav), the main part. Presentation is how it looks: CSS rules set colours, fonts, sizes and layout.
Kept apart, each layer can change on its own. Swap the style sheet and the page looks completely different, but its structure and words are untouched. One style sheet can style every page of a site, so one change restyles them all. A screen reader ignores the look and reads the structure ("Heading level 2: This week"; "List, 3 items"), so a page that fakes a heading with big bold text sounds like plain text to a blind reader. The same structure can be laid out for a phone or a laptop.
The Code pathway's HTML & CSS course is where students write pages; these lessons are the idea, with no coding needed.
content, structure, presentation, HTML, tag, CSS, style sheet, rule, screen reader.
Cheat sheet: Open to print (A4, with board pictures) · Markdown