Week 7: The Rough Cut Week 7

Unit: Teaching Through Story

Interaction Question: Can your story work before JavaScript starts moving it?

Learning Outcomes

  • Translate Figma section designs into semantic HTML structure (hero + story chapters + closing)
  • Apply design tokens from `tokens.css` to layout, type, and color decisions
  • Build reusable section layout patterns in `layout.css` (spacing, containers, rhythm)
  • Establish visual rhythm across sections in the browser (contrast in layout, density, pacing)
  • Adjust layouts for mobile and desktop readability
  • Test that the site remains readable and functional with JavaScript disabled
  • Write real content for the majority (or all) of their sections
  • Prepare a complete rough cut for next week's animation work
  • Integrate Project 1 theme toggle (dark mode tokens, localStorage, system preference detection) into the scrollytelling project
  • Implement GSAP entrance animations using timelines, easing, and stagger for hero and 2+ story sections

Curriculum Activities

Learn

  • Learn: Rough Cut Prep (HTML, Tokens, and Responsive Layout)
    weeks/week-7/learn/learn-7-1-rough-cut-prep.md
  • Learn: ScrollTrigger Preview
    weeks/week-7/learn/learn-7-2-scrolltrigger-preview.md

Practice

  • Practice: The Bridge
    weeks/week-7/practice/practice-7-1-the-bridge.md

Build

  • Build: The Rough Cut
    weeks/week-7/build/build-7-1-the-rough-cut.md

Reflect

  • Reflect: Visual Notes — Rough Cut Audit
    weeks/week-7/reflect/reflect-7-1-visual-notes.md

Resources

  • Week 7 Resources: The Rough Cut
    weeks/week-7/resources/week-7-resources.md

Canvas Alignment

Module: week 7

  • active Engage 6/7-1 // Learning Log
  • active Build 7-1 // Rough Cut 1
  • active Engage 6/7-1 // Learning Log
  • active Practice 7-1: The Parallax