10 Multimedia · 2026

References — Three-Source Crosswalk

Every lesson in our Term 2 unit is backed by two world-class external resources. This page maps all 22 lessons to the corresponding chapters/modules in Shay Howe's Learn to Code HTML & CSS and University of Michigan's Web Design for Everybody Coursera specialization.

How to use this page: before teaching any lesson, skim the matched Shay Howe chapter + UMich video. Students can use the same links for catch-up or deep-dive. All credit to original authors.

Primary Sources

Shay Howe

Learn to Code HTML & CSS

Free online book (12 chapters). Reference-style depth on HTML and CSS fundamentals.

Best for: deep reference content, code examples, specificity + cascade theory.

University of Michigan

Web Design for Everybody (Coursera)

5-course specialization (Intro to HTML5, CSS3, JavaScript, Responsive Design, Capstone). Video-based with Colleen van Lent & Chuck Severance.

Best for: video instruction, POUR accessibility framework, GitHub Pages workflow.

Our Hub

22 Classroom-Ready Lessons

Pedagogically structured (I Do / We Do / You Do), three-tier differentiated, with live exemplars and portfolio project.

Best for: classroom delivery, lesson timing, NSW IND5 outcome mapping.

Full 22-Lesson Crosswalk

Legend: 🔥 = full rewrite drawing from external sources · ✨ = enhanced with external content · 📚 = Deeper Reading sidebar only

Our Lesson Shay Howe Chapter UMich Module Integration
Phase 1 · Read the Web (Weeks 1–2)
L01 What is a Website? Ch 1: Building Your First Web Page HTML5 M1-L1 Evolution + M1-L2 Page Requests ✨
L02 Your First HTML Page Ch 1 (setup) HTML5 M1-L3 Editors + Codespaces ✨
L03 Lists, Links, Images Ch 8 Lists + Ch 9 Media HTML5 M2-L3 Images, M2-L4 Hyperlinks 📚
L04 Semantic HTML Ch 2: Getting to Know HTML HTML5 M2-L1 DOM + M2-L2 Semantic Tags 📚
Phase 2 · Design and Style (Weeks 3–5)
L05 Audience & Site Map (our classroom pedagogy) Capstone M1 Wireframes 📚
L06 Wireframing (our classroom pedagogy) Capstone M2 Wireframes 📚
L07 CSS Basics Ch 3: Getting to Know CSS CSS3 M1: Intro to CSS 🔥
L08 Box Model Ch 4: Opening the Box Model CSS3 M3: Box Model + Positioning 🔥
L09 Assessment 1 (Recipe Card) (assessment only) (assessment only) —
L10 Flexbox Ch 5: Positioning Content CSS3 M2: Grid + Flex 📚
Phase 3 · Build the Portfolio (Weeks 6–9)
L11 Typography Ch 6: Working with Typography CSS3 M1: Fonts 🔥
L12 Colour + WCAG Ch 7: Backgrounds (extension) HTML5 M3-L1: POUR Accessibility ✨
L13 Mobile-first + Media Queries (not covered in Shay Howe's book) Advanced Responsive Design (separate course) 📚
L14 Responsive Images, Units (advanced topic) Advanced Responsive Design 📚
L15 Hero, Nav, About (applied content) Capstone M3: Styling 📚
L16 Projects, Cards, Gallery Ch 9: Figures & Captions (applied content) 📚
L17 Transitions & Animations (not in book) (in JS/Advanced course) 📚
L18 Forms & Contact Ch 10: Building Forms (JS course covers form validation) 🔥
Phase 4 · Audit, Publish, Present (Weeks 10–11)
L19 Accessibility Audit Ch 12: Writing Your Best Code HTML5 M3-L1 POUR + M3-L2 W3C Validator ✨
L20 GitHub Pages Publish (not in book) HTML5 M3-L3: Hosting + GitHub Pages 📚
L21 Showcase + Peer Review (pedagogy-only) HTML5 M3-L4: Final Project (peer-graded) 📚
L22 Reflection & Careers (closing) HTML5 M3-L5: Where To Go From Here? 📚

What's NEW in this revised unit

4 full lesson rewrites (🔥)

  • L07 CSS Basics — now teaches cascade + specificity weights (0-0-1, 0-1-0, 1-0-0) from Shay Howe
  • L08 Box Model — now includes * { box-sizing: border-box } industry best practice
  • L11 Typography — now includes @font-face + <cite>/<q>/<blockquote> semantic elements
  • L18 Forms — now includes <fieldset>+<legend> grouping + all HTML5 input types

4 enhancements (✨)

  • L01 — Browser Wars 1-minute history hook
  • L02 — GitHub Codespaces as no-install Support-tier alternative to VS Code
  • L12 — POUR accessibility framework (Perceivable, Operable, Understandable, Robust) — WCAG in 4 letters
  • L19 — W3C HTML + CSS Validators as explicit audit step before Lighthouse

Acknowledgements

All external content is drawn from freely-available educational resources with attribution. No content has been copied wholesale — only short quotations and structural ideas that improve our pedagogy, with links back to the original complete source.