Today's Class Structure Period 1 (50 min) — Retrospective — Rose / Thorn / Bud Pre-class: post demo screenshot/video + one-line status to group chat Group retrospective (10 min): Rose / Thorn / Bud, one each Group rounds (25 min): 1-min demo + Rose·Thorn·Bud share (~4 min × 6 groups) Sort Thorns + match help offers (10 min): tech / design / scope / teamwork One-line next-step note (5 min) Period 2 (50 min) — Mini Lecture — 30 Years of Frontend Documents → HTML → CSS → JavaScript → AJAX → jQuery HTML5 → SPA → React → CSR / SSR / SSG / Hydration Next.js / Astro / Qwik / Server Components Why this history shapes vibe coders' build decisions today Period 3 (50 min) — Q&A + Focused Build Time Answer technical questions surfaced in Period 1 Thorns (15 min) Group build — get one core user flow working end-to-end (30 min) Instructor walkthrough, one-line next-week demo plan (5 min) Period 1 Retrospective — Rose / Thorn / Bud The group chat works as retrospective infrastructure: everyone enters class having already seen each other's demos.
🌹 Rose — what worked / what you're proud of One per person, concrete. Not "AI wrote it well" — say "the moment voice recognition first worked."
Write one line on a sticky note or in the group chat Each person shares for 30 seconds in the group round After Sharing — Match the Thorns Sort group-chat Thorns into four colors and project them. Pair groups with the same Thorn, or with one that has a solution.
🔧 Tech: code, deploy, API issues 🎨 Design/UX: screens, flows, copy 📐 Scope: features too big or too small 🤝 Teamwork: roles, pacing Period 2 Lecture Slides — 30 Years of Frontend 24 slides total. Walks through how the web evolved from documents to a world of components and rendering strategies. Goal: understand where the vocabulary of AI-generated code (components, state, SSR, hydration) actually comes from.
This Week's Build Goals 1. Act on the Retrospective Pick the single Thorn from Period 1 that's most blocking your progress. Either resolve it before next class, or post a clear help request to the group chat.
Pick one Thorn as the "thing to fix" If the scope is too big, break it into smaller pieces If you can't solve alone, ask the matched group or instructor 2. One Core User Flow End-to-End Make your project's single most important scenario work from start to finish. Other flows can still be unfinished.
Define the core scenario (e.g. user inputs X → Y appears) Walk that flow without dead ends If AI responses are involved, ensure they reach the screen 
