Week 5: The Blueprint Week 5

Unit: Teaching Through Story

Interaction Question: What's the story you want to tell, and what does it look like?

Learning Outcomes

  • Choose a personal metaphor that maps JavaScript concepts to familiar experience
  • Design a scrollytelling site layout in Figma with 5–7 narrative sections
  • Create a complete design system in Figma (primitives, semantic tokens, typography, spacing)
  • Set up Figma variables with modes (light/dark if applicable)
  • Export Figma variables to CSS custom properties (`tokens.css`)
  • Map each JS concept learned so far to a chapter in their metaphor
  • Evaluate a metaphor's clarity by explaining it to a partner

Curriculum Activities

Engage

  • Engage: The Pitch
    weeks/week-5/engage/engage-5-1-the-pitch.md

Learn

  • Learn + Practice: GSAP Express
    weeks/week-5/learn/learn-5-1-gsap-express.md

Practice

  • Codepen Starter Html
    weeks/week-5/practice/switch-tutorial-practice/codepen-starter-html.html
  • Index
    weeks/week-5/practice/switch-tutorial-practice/index.html

Build

  • Build: The Blueprint
    weeks/week-5/build/build-5-1-the-system.md

Reflect

  • Reflect: Visual Notes — The Metaphor Map
    weeks/week-5/reflect/reflect-5-1-visual-notes.md

Resources

  • Week 5 Resources: The Blueprint
    weeks/week-5/resources/week-5-resources.md

Canvas Alignment

Module: week 5 The Blueprint // ScrollyTelling part 1

  • active BRIEF
  • active PROJECT BRIEF: Lost in the Scroll
  • active Scrollytelling Inspiration: 25 Sites
  • active PRACTICE AND LEARNING
  • active switch practice
  • active Learn 5-1 // Green Sock Animation Platform
  • active Practice 5-2 // GSAP SVG
  • active PROJECT RELATED
  • active Metaphor Alignment
  • active scrollytelling research
  • active Build 5 // The System
  • active LEARNING LOG
  • active Reflect: week 5 -- Visual Notes