Welcome to the Next Layer
You know how to design and build sites with HTML(structure) and CSS(style).
Pages that look right.
Layouts that hold together.
But they don't do anything yet.
What's missing... behavior!.
This quarter, you add the nervous system—the layer that senses a click, responds to a scroll, remembers a preference. The layer that makes the difference between a static page and an experience.
You will learn JavaScript the way designers need it.
Behavior first. Syntax second.
“How should this feel?” before “How do I code this?”
This is not computer science.
It's Interaction Design, where code is the material we use to shape experience.
The Protocol Pledge
I will ask 'how should this feel?' before 'how do I code this?'
When I use AI, I will understand what it generates.
I will respect user preferences and build for everyone.
I will develop my creative voice through code.
I will make things that respond with intent."
Course Structure: 10 Weeks of Behavior
Unit 1: Adaptive Systems
"How does it adapt to me?"
Week 0: The On-Ramp
DevTools, console, script linking
Week 1: First Light
Design tokens, theme toggle, querySelector
Week 2: The Memory
localStorage, preference persistence
Unit 2: Feedback & State
"What happens when I interact?"
Week 3: The Shape
SVG as interactive material
Week 4: The Reaction
State patterns, focus, transitions
Unit 3: Motion & Pacing
"How does it move with me?"
Week 5: The Pulse
CSS animation, easing, keyframes
Week 6: The Sequence
GSAP fundamentals
Week 7: The Scroll
ScrollTrigger, scroll choreography
Unit 4: Creative Voice
"What makes it mine?"
Week 8: The Voice
Track selection, signature concept
Week 9: The Craft
Signature execution
Unit 5: Integration
"Does it all hold together?"
Week 10: The Polish
Portfolio polish, accessibility audit
Course Philosophy: "Sense. Respond. Adapt."
You already know structure. You already know style. This course adds the third layer—behavior—and treats code as a creative material.
Think of JavaScript like clay or choreography. It has properties, constraints, possibilities. You shape it to produce experiences that feel alive. The question isn't "what's the syntax?" It's "how should this feel?"
Just as you learned to see in typography and feel in color, you'll develop fluency with code as a material—knowing when it resists, when it flows, when it surprises you with something better than you planned.
Two Lenses, One Practice:
The Interaction Designer:
Timing, feedback, state, motion, user respect
The Behavioral Coder:
Events, DOM, animation libraries, preference APIs
We don't separate these. Every project asks both "does it feel right?" and "does the code work?" The material doesn't care which hat you're wearing.
The Journey:
- Weeks 1–2: Adaptive Systems (preferences, tokens, persistence)
- Weeks 3–4: Feedback & State (SVG, interaction patterns)
- Weeks 5–7: Motion & Pacing (GSAP, scroll choreography)
- Weeks 8–9: Creative Voice (signature interactions)
- Week 10: Integration (portfolio, polish, audit)
This isn't learning JavaScript. It's learning to design behavior—shaping code until it responds the way you intend.