Frontend Developer Roadmap
Stuck as a Frontend Developer?
Ask any question, get a 60-second video answer. Free for the first 5 a month — no credit card.
Browse the full curriculum below — 15 modules · 109 topics · 10-14 weeks
▶ Tap any topic or module to ask a question about it.
Personalized setup
Choose your experience level and goals before beginning.
Personalized setup
Choose your experience level and goals before beginning.
Capstone Project
What you'll build by the end
You'll build Scribe — an AI-powered note-taking app. Rich text editing, real-time collaboration via Supabase, authentication with protected routes, AI summarization and semantic search powered by OpenAI, a polished Tailwind design with dark mode, fully accessible to WCAG AA, tested with Vitest and Playwright, and deployed to Vercel with green Core Web Vitals. Each module adds a working layer to the same app — by the end you have a portfolio piece that demonstrates every skill in this roadmap.
Don't want the whole roadmap? Just ask one question and get an instant video answer.
Full Curriculum
15 modules · 109 topics · 10-14 weeks
Click any topic to ask a question about it.
Module 1
Before frameworks, master the platform. Semantic markup is what makes a page accessible, SEO-friendly, and resilient when JavaScript fails. Get this right and everything above it gets easier.
Project: Build the Scribe marketing landing page in pure HTML with proper document outline, semantic landmarks, accessible forms, and structured data for the homepage. Pass HTML validation and Lighthouse SEO 100.
Module 2
Modern CSS is more powerful than most developers realize. Learn the layout systems and design-token thinking you'll use every day — from container queries to logical properties.
Project: Implement Scribe's responsive marketing page with CSS Grid for the feature section, Flexbox for nav, container queries on the pricing card, custom properties for theme tokens, and a print stylesheet.
Module 3
React is just JavaScript. The developers who struggle with React usually have gaps in JS. This module fills them — focusing on the patterns you'll use every day in component code.
Project: Build an interactive note list in vanilla JS — fetch from a mock API, render with array methods, debounced search, sort by date, filter by tag, optimistic delete with undo. No libraries.
Module 4
TypeScript isn't extra work — it's less work. Define shapes for your data, type your component props, and let the editor catch mistakes the moment you make them.
Project: Convert the vanilla JS note list to TypeScript: define Note, Tag, and User interfaces, type every function, use a discriminated union for note status, and turn on strict mode.
Module 5
React's mental model is simple: UI is a function of state. Learn to decompose interfaces, manage state without overengineering, and write hooks your team will thank you for.
Project: Build the Scribe note editor: sidebar with note list, main editor pane, tag manager, and a Cmd+K command palette. useState for local state, useReducer for the editor, custom useDebounce hook.
Module 6
Most React confusion comes from mixing server state and client state. Learn the modern split — TanStack Query for server data, Zustand for cross-cutting client state — and stop reaching for useEffect to fetch.
Project: Refactor Scribe to use TanStack Query for note loading, mutations, and cache invalidation. Add Zustand for the editor's transient UI state (sidebar collapsed, theme, focus mode). Remove every fetch-in-useEffect from the codebase.
Module 7
Every real app is mostly forms. Learn the modern stack — React Hook Form for performance, Zod for validation — and build forms that work, validate, and feel great on every device.
Project: Rebuild Scribe's signup, login, and note settings as React Hook Form + Zod forms. Validate on blur, surface inline errors, support keyboard and screen-reader users, and share Zod schemas with the API for end-to-end type safety.
Module 8
Tailwind isn't just utility classes — it's a design system in a config file. Combine it with shadcn/ui-style component patterns to build interfaces that scale across a real product.
Project: Redesign Scribe with Tailwind: custom theme with brand colors and spacing scale, a reusable component library (Button, Input, Card, Modal, Dropdown) using Radix primitives, dark mode that persists, and smooth transitions on sidebar and note switching.
Module 9
Next.js turns React from a library into a framework. Learn the App Router, server components, and the rendering strategies that make your app fast — not just functional.
Project: Migrate Scribe to Next.js App Router: layouts for marketing site and app shell, server components for note loading, loading.tsx skeletons, dynamic routes /notes/[id], generated OpenGraph images, and metadata API for every page.
Module 10
A frontend that only renders static data isn't a product. Connect Scribe to Supabase for auth, real-time data, and file storage — without writing a single line of backend code.
Project: Wire Scribe to Supabase: email/password and OAuth login, middleware-protected /app routes, real-time subscriptions so edits sync across tabs, optimistic updates on save, image uploads with drag-and-drop, and Row-Level Security policies that actually work.
Module 11
Modern frontend testing is fast, fun, and frees you to refactor. Learn the unit + integration + e2e split, the user-centric Testing Library philosophy, and which tests actually catch bugs.
Project: Write tests for Scribe: Vitest unit tests for utilities and hooks, React Testing Library integration tests for the editor and command palette, MSW for mocking the network, and Playwright e2e covering signup → create note → edit → logout. All running in CI on every PR.
Module 12
Accessibility isn't a checklist — it's a design discipline. Learn what WCAG actually requires, how screen-reader users navigate your app, and the SEO patterns that compound over time.
Project: Audit Scribe with axe and screen-reader walkthroughs. Fix every issue: keyboard navigation across the whole app, focus management on modal open/close, live-region announcements for save states, and proper structured data on public note pages.
Module 13
AI in the frontend isn't about calling an API — it's about UIs that stream, degrade gracefully, and feel magical. Learn to integrate OpenAI into a React app the right way.
Project: Add three AI features to Scribe: (1) a Summarize button that streams a token-by-token summary, (2) a smart search bar using embeddings to find notes by meaning, (3) an inline writing assistant triggered by /ai. All with loading, errors, and rate-limit-aware retry.
Core Web Vitals & ship-fast wins
The modules below are optional — only follow this branch if you want to specialize in Performance Engineering. Skip ahead if not.
Page speed is a feature. Learn to measure what matters, find the real bottlenecks, and ship fixes that move Core Web Vitals — backed by performance budgets that hold over time.
Project: Run Scribe through Lighthouse and WebPageTest. Get LCP < 2.5s, INP < 200ms, CLS < 0.1 on every public route. Add a Core Web Vitals dashboard fed by real-user monitoring, and a PR check that fails if a budget regresses.
Interfaces that feel alive
The modules below are optional — only follow this branch if you want to specialize in Motion & Animation. Skip ahead if not.
Great motion isn't decoration — it teaches users where they are, what changed, and what's coming next. Learn the principles and the tools (Framer Motion, View Transitions API) that mature design teams use.
Project: Add motion to Scribe: page-level View Transitions on route change, a Framer Motion shared layout for the active note, scroll-driven reveal on the marketing page, and a reduced-motion fallback that disables every non-essential animation.
Looking at a different role?
Want a guided plan instead?
Get a full learning plan, personalized to your level and goals — ready in 30 seconds.
Generate my full learning planFree. No credit card.