Front-End in Practice
From "a page that works" to "an interface that's designed."
Hour 1 — The front-end as a design material
- Responsive design: one design, every screen (viewports, breakpoints, mobile-first)
- Design systems in code: components, tokens, why engineers keep saying "reusable"
- Frameworks in one slide each: what React/Next.js actually are and why AI tools default to them
- Figma to code: what translates cleanly, what doesn't, and why "make it look like the mockup" fails
- Accessibility as a design responsibility, not an engineering checkbox
Hour 2 — Studio
- Exercise: Exercise - Figma to CodeExercise - Figma to Code
Get an AI to build your design — then judge it
Take a screen you have designed in Figma (from any past project) and use an AI tool to turn it into a working web page. Document faithfully where the... — take one of your own Figma designs and get an AI tool to build it; document where it diverged - Crit: compare generated results across tools (v0, Lovable, Claude, Figma Make)
Homework
- Iterate your build until it matches your design intent. Keep a log of the prompts that worked.