Build: The Rough Cut

Points: 50 Time Estimate: 60–90 minutes Prerequisite: Week 6 Blueprint + Motion Map

TL;DR

Translate your Figma Blueprint into a working HTML/CSS site: build the full page structure, apply your tokens, and get all sections styled and readable in the browser.

Submit

Push to GitHub → Submit your GitHub Pages URL to Canvas.

Overview

Week 6 was for planning the Blueprint: mapping motion and visual design decisions.

This week, you start building in code.

The goal is to establish a Rough Cut: semantic HTML structure, token-driven CSS, and all of your sections styled and working in the browser. It doesn't need to be pixel-perfect — but every section should be built, readable, and using your design tokens.

What You're Building This Week

A first live version of your scrollytelling site with:

• Linked CSS files (variables.css and styles.css)
• A semantic page structure
• All sections (hero + story chapters) translated from Figma
• Real content (or near-final draft content) in every section

Requirements

Core

Files

• index.html

• styles/variables.css

• styles/styles.css

• scripts/main.js

• CSS files linked in the correct order (variables → styles)

• Semantic HTML structure in place (<main>, <section>, heading hierarchy)

• All sections (hero + 5–7 story chapters) built from your Figma designs

• Tokens applied for colors, type, and spacing (not hardcoded everywhere)

• Site is readable on desktop and mobile widths

• Real text (not lorem ipsum) in every section

• Page works without JavaScript errors (JS can be mostly empty this week)

Stretch Goals

• Hover/focus transitions added in styles.css
• GSAP CDN linked and main.js scaffolded for animations
• Dark mode tokens tested in-browser
• Section-to-section visual contrast (backgrounds, layout shifts) working across all chapters

Step-by-Step

Step 1: Set Up the File Structure in GitHub

Use the project starter structure (or match it manually):

week-7
  lost-in-the-scroll
    index.html
    styles/
      variables.css
      styles.css
    scripts/
      main.js
    assets/

Link your CSS in this order:

<link rel="stylesheet" href="styles/variables.css">
<link rel="stylesheet" href="styles/styles.css">

Why this order matters variables.css defines your design tokens first. styles.css uses those tokens for layout and components.

Step 2: Build the Semantic Skeleton

Start with <main>, then add one <section> per story chapter.

<main>
  <section class="section--hero" id="hero">
    <div class="section__content">
      <h1>Story title</h1>
      <p>Hero hook text...</p>
    </div>
  </section>

  <section class="section--chapter" id="first-contact">
    <div class="section__content">
      <h2>First chapter title</h2>
      <p>Real story content...</p>
    </div>
  </section>
</main>

Tip Don't worry about perfect spacing yet. Get the content and structure in place first.

Step 3: Apply Tokens to Layout

In styles.css, build your section rhythm with tokens:

body {
  margin: 0;
  background: var(--color-surface-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
}

.section {
  min-height: 100svh;
  padding: var(--space-xl) var(--space-md);
}

.section__content {
  width: min(72rem, 100%);
  margin-inline: auto;
}

Focus on:

• Readable line length
• Consistent spacing
• Clear visual hierarchy
• Section-to-section contrast (not everything looking identical)

Step 4: Translate All Sections from Figma

Work through your Figma blueprint section by section. A suggested order:

• Hero — establish the visual tone
• Your strongest story section — build confidence
• A section with a contrasting layout — test variety in your system
• Remaining chapters — fill out the full scroll

Use your Figma blueprint as a guide, but make browser-friendly decisions if needed. Rough cut first, precision later.

Warning If the page looks nothing like your Figma, that's normal at this stage. Start with hierarchy and spacing. Fine visual polish comes after structure is solid.

Step 5: Add Basic Interaction States

Add CSS transitions to links, buttons, and cards. These are simple state changes — the scroll-driven animation work happens later with GSAP.

a {
  transition: color 0.2s ease-out;
}

a:hover {
  color: var(--color-accent);
}

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

Step 6: Quick Test Pass

Before submitting:

✓ Checkpoint — Resize to mobile width. Scroll the page top-to-bottom. Check heading hierarchy. Open console and confirm no JS errors.

Evaluation

Troubleshooting

My CSS variables aren't working

Check file order. variables.css must load before any file that uses var(...).

The page looks nothing like Figma

That's normal at first. Start with hierarchy and spacing. Fine visual polish comes after structure is solid.

Everything is too cramped on mobile

Your horizontal padding and type sizes are probably too large. Add smaller spacing/type values for narrow screens.

I keep hardcoding values because it's faster

Warning It is faster now, slower later. Use tokens for repeated values so the build stays consistent when you revise sections.

Learn: Rough Cut Prep (HTML, Tokens, and Responsive Layout)

Points: — (not graded, but required before Day 2) Time Estimate: 20–30 minutes

TL;DR

Re-open your Blueprint + Motion Map, review semantic HTML + tokens + responsive layout basics, and come to class ready to translate your Figma sections into a working HTML/CSS site.

What to Do

1. Re-open Your Week 6 Files (Required — 5 min)

Have these open before class:

• Your Figma Blueprint (all section frames)
• Your Motion Map board (Milanote)
• Your metaphor/narrative map notes

Goal: You should be able to answer:

• Which 5–7 sections are in your site?
• What is the hero layout?
• Which section needs the most space?
• Which elements are likely to need special treatment later (polish/motion/showpiece)?

2. Review Semantic HTML Structure (Required — 5–10 min)

Read/skim:

• MDN: HTML elements reference
• MDN: <main>
• MDN: <section>

Focus on:

• Proper heading hierarchy (h1 once, then h2s for sections)
• Landmarks (main, header, footer if you use them)
• Meaningful structure before styling

3. Review CSS Custom Properties + Layout Basics (Required — 10 min)

Read/skim:

• MDN: Using CSS custom properties
• MDN: min()
• web.dev: Responsive web design basics

Focus on:

• Using variables/tokens in real layout CSS
• Container widths and readable line length
• Mobile-first adjustments (spacing/type/layout)

4. Review Baseline Accessibility Checks (Required — 5 min)

Read:

• WebAIM Contrast Checker

Bring this mental model into class:

• The site must be readable before animation exists
• Contrast and hierarchy matter in the rough cut, not just the final polish
• Motion/accessibility refinements continue in the upcoming Polish Pass

What to Notice

1. Blueprint → Build is translation, not tracing Your Figma file tells you visual intent. HTML/CSS should preserve hierarchy and rhythm, not pixel-copy every detail immediately.

2. The rough cut is about structure + readability This week is not about perfect polish. It is about getting the whole story on the page with good structure and a functional visual system.

3. Browser layout is a design stage You are still designing while you build. The browser will reveal spacing and hierarchy issues that Figma hides.

4. Accessibility starts before animation Semantic structure and contrast belong in the rough cut — not as a late cleanup.

Bring to Class

• Your section order finalized (5–7 sections)
• A draft title + subtitle for the hero
• Real text (or rough real text) for at least 2 sections
• Your tokens.css export (or manual CSS variables list from Figma)

Learn: ScrollTrigger Preview

Points: — (not graded, but required before Week 8 Day 1) Time Estimate: 20 minutes

TL;DR

Work through the interactive ScrollTrigger tutorial. Experience three scroll animation patterns by scrolling through them. Come to class knowing the difference between trigger, scrub, and pin.

What to Do

1. Complete the ScrollTrigger Patterns Tutorial (Required — 20 min)

ScrollTrigger Patterns Tutorial

Work through all three parts. For each:

• Read the pattern explanation and the "How It Works" box
• Scroll through the live demo slowly — feel the concept, don't just read about it
• Copy the code block (you will use these patterns next week)
• Check each checkpoint when you understand the concept
• Write a brief reflection connecting the pattern to your project

2. Save Your Reflections

The tutorial saves your responses automatically. Before you leave, click "Copy All My Responses" at the bottom. Paste them into a note for reference in class.

What to Notice

1. Trigger vs. Scrub — Basic trigger fires once. Scrub ties progress to scroll position. Feel the difference as you scroll through each demo.

2. Scrub and easing — Notice that scrub uses ease: 'none'. Your scroll speed provides its own easing. Adding complex easing on top feels overcooked.

3. Pin extends height — When a section pins, GSAP adds extra scroll distance to the page. The page gets longer. That extra distance IS the animation's timeline.

4. Markers — The code examples include markers: true for debugging. You'll use these constantly next week to fine-tune trigger positions.

5. start and end — These define the trigger zone. The format is always "trigger-edge viewport-position". Understanding this syntax is the key to ScrollTrigger.

Bring to Class

• The three ScrollTrigger patterns memorized: trigger, scrub, pin + timeline
• An idea for which Long Way Down sections use which pattern
• Your copied reflections from the tutorial
• Questions about anything that felt unclear — we'll address them before the lab

Practice: The Bridge

Points: 10 Time Estimate: 30–45 minutes (in-class, Day 2)

TL;DR

Port your Project 1 theme toggle into your scrollytelling site. Add dark mode tokens, a toggle button, and localStorage persistence — so your storytelling site respects user preferences from day one.

Submit

Push to GitHub. Submit your GitHub Pages URL to Canvas.

Overview

You built a theme system in Project 1: Signal & State. Your scrollytelling site doesn't have one yet. Today you bring it over.

This isn't starting from scratch — you already know how this works. You're porting tested code into a new project and adapting it to your scrollytelling design tokens. Think of it like moving furniture into a new apartment: same pieces, different layout.

Getting the theme toggle in now means your site respects user preferences before you start adding GSAP animations in Build 7-2. The prefers-reduced-motion check you'll add next pairs naturally with the prefers-color-scheme detection you're adding today.

What You're Building

A working dark mode toggle in your scrollytelling site:

• Dark mode token overrides in your tokens.css
• A toggle button with proper accessibility
• JavaScript that handles detection, switching, and persistence

What You're Learning

Requirements

Core

• Toggle button added to your site with aria-label
• data-theme attribute used on <html> element
• Dark mode token overrides added to tokens.css
• At least 5 tokens swap between light/dark (surfaces, text, accent — minimum)
• localStorage saves and loads theme preference
• System preference detected for first-time visitors (matchMedia)
• Toggle works repeatedly (light → dark → light)

Stretch Goals

• Smooth color transitions between modes (transition: background-color 0.3s, color 0.3s)
• Toggle icon changes with mode (sun/moon)
• Section-specific background tokens differentiated in dark mode
• "System" option that clears localStorage and follows OS

Step-by-Step Guide

Step 1: Add Dark Mode Tokens

Open your tokens.css (or variables.css). You already have light mode tokens. Add dark mode overrides using the data-theme attribute selector:

/* ========================================
   LIGHT MODE (default)
   ======================================== */
:root {
  --color-surface-primary: #ffffff;
  --color-surface-secondary: #f5f5f5;
  --color-text-primary: #111111;
  --color-text-secondary: #555555;
  --color-accent: #3b82f6;
}

/* ========================================
   DARK MODE
   ======================================== */
[data-theme="dark"] {
  --color-surface-primary: #1a1a1a;
  --color-surface-secondary: #2a2a2a;
  --color-text-primary: #f0f0f0;
  --color-text-secondary: #aaaaaa;
  --color-accent: #60a5fa;
}

Use your own token names and values. The example above is a starting point — your scrollytelling site has its own palette. At minimum, swap: primary surface, secondary surface, primary text, secondary text, and accent.

Step 2: Add the Toggle Button

Add this to your HTML. A good spot: inside your <header> or <nav>, or fixed-positioned so it's always accessible.

<button class="theme-toggle" aria-label="Toggle dark mode">
  <span class="theme-toggle__icon" aria-hidden="true">&#9790;</span>
</button>

Style it so it's visible but not distracting:

.theme-toggle {
  position: fixed;
  top: var(--space-sm, 1rem);
  right: var(--space-sm, 1rem);
  z-index: 100;
  background: var(--color-surface-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-text-secondary);
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

// Instead of: document.body.classList.toggle('dark')
// Use: document.documentElement.dataset.theme = 'dark'

Step 3: Add Theme JavaScript

Create a new file scripts/theme.js or add this to the top of your main.js — before any animation code.

// ========================================
// THEME SYSTEM — Ported from Project 1
// ========================================

// 1. Check for saved preference (runs immediately)
const savedTheme = localStorage.getItem('theme');

if (savedTheme) {
  document.documentElement.dataset.theme = savedTheme;
} else {
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  document.documentElement.dataset.theme = prefersDark ? 'dark' : 'light';
}

// 2. Toggle on click
const themeToggle = document.querySelector('.theme-toggle');

themeToggle.addEventListener('click', function () {
  const current = document.documentElement.dataset.theme;
  const next = current === 'dark' ? 'light' : 'dark';

  document.documentElement.dataset.theme = next;
  localStorage.setItem('theme', next);
});

If you use a separate theme.js file, link it in your HTML before main.js:

<script src="scripts/theme.js"></script>
<script src="scripts/main.js"></script>

Step 4: Test Everything

1. Toggle test: Click the button. Do colors switch? Click again. Do they switch back?
2. Persistence test: Switch to dark, refresh the page. Still dark?
3. System preference test: Clear localStorage (DevTools → Application → Local Storage → right-click → Clear). Set your OS to dark mode. Refresh. Does the site start in dark?
4. Keyboard test: Can you Tab to the toggle button? Does it have a visible focus ring? Can you activate it with Enter or Space?
5. Token check: Open DevTools → Elements → <html>. Is data-theme="dark" present when in dark mode?

Troubleshooting

Complete Criteria

Your practice is complete when:

• Toggle button visible and clickable
• Dark mode tokens swap at least 5 values
• Theme persists across page refresh (localStorage)
• First-time visitors get their system preference
• Toggle is keyboard-accessible with visible focus
• No console errors

Evaluation

Connection to Course

This bridges Project 1 and Project 2. The theme system you built in Weeks 1–3 now lives inside your scrollytelling site. When you add GSAP animations next (Build 7-2: The Pulse), the prefers-reduced-motion check pairs with the prefers-color-scheme detection you added today — both respect user preferences, both are checked with matchMedia.

Your site now has two preference-aware systems:

• Color scheme (today)
• Motion (Build 7-2)

Resources

• MDN: localStorage
• MDN: matchMedia
• MDN: prefers-color-scheme
• MDN: data-* attributes
• CSS-Tricks: A Complete Guide to Dark Mode

Reflect: Visual Notes — Rough Cut Audit

Points: 10 (Complete/Incomplete) Time Estimate: 15–20 minutes

TL;DR

Annotate screenshots of your rough cut to show what translated well from Figma, what still needs work, and how readable/structured the browser version is.

Submit

1. Annotated rough cut screenshots uploaded to Canvas (sketch, digital, or screenshots with notes)

The Prompt

Take screenshots of your live site (desktop view; mobile optional but encouraged) and annotate them.

Include at least:

1. Section structure check — Mark all major sections (hero, chapters, closing). Is the story order clear?
2. Figma translation check — For 2 sections, note what matches your Blueprint and what changed in the browser (and why).
3. Visual rhythm check — Mark where the page feels dense vs spacious. Does the pacing feel intentional?
4. Content + hierarchy check — Mark one place where content hierarchy is clear and one place that still feels confusing.
5. Accessibility baseline check — Add notes showing:
   • heading order / section labels are clear
   • one contrast pair you verified
   • one place you'll refine focus/motion behavior in the upcoming Polish Pass

Think of this like a design QA pass — you are auditing the rough cut before the polish and JS animation layers start.

Evaluation

Week 7 Resources: The Rough Cut

Assigned (Before Day 2)

Reference

Video

Deep Dive

Tools

Inspiration

Cheat Sheet: Rough Cut Layout Basics

/* LINK ORDER (HTML)
tokens.css -> layout.css -> animations.css */

/* TOKENS */
:root {
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --color-surface-primary: #ffffff;
  --color-text-primary: #111111;
}

/* BASE LAYOUT */
body {
  margin: 0;
  background: var(--color-surface-primary);
  color: var(--color-text-primary);
}

.section {
  min-height: 100svh;
  padding: var(--space-xl) var(--space-md);
}

.section__content {
  width: min(72rem, 100%);
  margin-inline: auto;
}

/* MOBILE PASS */
@media (max-width: 48rem) {
  .section {
    padding: var(--space-lg) var(--space-sm);
  }
}

Week 7: The Rough Cut

Unit 2: Teaching Through Story Interaction Question: Can your story work before JavaScript starts moving it?

Learning Outcomes

By the end of this week, students will be able to:

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

Two-Day Breakdown

Day 1: Blueprint to Browser (Structure + Tokens)

Duration: 90 minutes

Deliverables assigned:

• Learn 7-1: Rough Cut Prep (before Day 2)
• Build 7-1: The Rough Cut (start in class, due Sunday)

Day 2: Section Completion + Browser QA

Duration: 90 minutes

Deliverables assigned:

• Practice 7-1: The Bridge (in-class)
• Build 7-1: The Rough Cut (due Sunday)
• Build 7-2: The Pulse (due Sunday)
• Reflect 7-1: Visual Notes (rough cut audit, due Sunday)

Activities

See learn/, practice/, build/, and reflect/ folders for activity files.

Topics Covered

Project Milestone

Project 2: "The Long Way Down" — Week 7 checkpoint (Rough Cut)

• index.html, tokens.css, layout.css, animations.css, main.js set up and linked
• 5–7 sections exist in semantic HTML (hero → story chapters → closing)
• Design tokens applied throughout (not mostly hardcoded values)
• Most or all section content is real text (not placeholder)
• Desktop + mobile readability pass completed
• Site is readable and functional with JavaScript disabled
• Theme toggle working with dark mode tokens (Practice 7-1)
• GSAP loaded via CDN, hero entrance animation with timeline (Build 7-2)
• 2+ sections with entrance animations, prefers-reduced-motion respected (Build 7-2)

Assigned Reading/Tutorials

Key Vocabulary

Common Struggles & Solutions

Code Patterns Introduced

CSS Load Order

<link rel="stylesheet" href="styles/tokens.css">
<link rel="stylesheet" href="styles/layout.css">
<link rel="stylesheet" href="styles/animations.css">

Section Layout Skeleton

<main>
  <section class="section section--hero" id="hero">
    <div class="section__content">
      <h1 class="hero__title">[Title]</h1>
      <p class="hero__subtitle">[Hook]</p>
    </div>
  </section>

  <section class="section section--chapter" id="first-contact">
    <div class="section__content">
      <h2>[Chapter title]</h2>
      <p>[Story content]</p>
    </div>
  </section>
</main>

Responsive Adjustment Pattern

@media (max-width: 48rem) {
  .section {
    padding: var(--space-lg) var(--space-sm);
    min-height: auto;
  }

  .section__content {
    width: 100%;
  }

  .hero__title {
    font-size: var(--font-size-h2);
    line-height: 1.05;
  }
}

Accessibility Focus

• Semantic structure comes first: clear heading hierarchy and landmarks
• Keyboard and motion refinements are part of the upcoming Polish Pass
• The site must communicate fully with JavaScript disabled (progressive enhancement baseline)
• Contrast should be checked in-browser, not only in Figma

Connections

Instructor Notes

• Keep students focused on "complete and readable" over "pixel-perfect." Rough cut energy matters.
• Model how to translate Figma intent into semantic HTML instead of div-heavy markup.
• Insist on file order (tokens.css first) and token usage early; this prevents cleanup debt later.
• Keep the Day 2 critique centered on readability and rhythm, not polish details.
• Students may want to jump to animation; keep them focused on finishing the whole story first.

Materials Checklist

• Starter structure ready or project starter cloned
• Learn 7-1: Rough Cut Prep (learn/learn-7-1-rough-cut-prep.md)
• Build 7-1: The Rough Cut (build/build-7-1-the-rough-cut.md)
• Practice 7-1: The Bridge (practice/practice-7-1-the-bridge.md)
• Build 7-2: The Pulse (build/build-7-2-the-pulse.md)
• Reflect 7-1: Visual Notes (reflect/reflect-7-1-visual-notes.md)
• Resources page updated (resources/week-7-resources.md)
• Figma Blueprint examples ready for translation demo
• Responsive QA demo prepared