🎨 Frontend Developer Roadmap
Build the interfaces people actually use. You'll go from HTML fundamentals to shipping a polished Next.js application — with real-time data, AI features, and the component architecture that modern frontend teams expect.
Adjust pace, depth, and focus based on your experience.
Personalized setup
Choose your experience level and goals before beginning.
Module 1
HTML & CSS: Build Layouts That Actually Work
Module 2
JavaScript: The Parts That Matter for React
Module 3
TypeScript: Catch Bugs Before Your Users Do
Module 4
React: Think in Components
Module 5
Next.js: From React App to Production Platform
Module 6
Tailwind CSS: Ship Beautiful UI Fast
Module 7
Supabase: Connect Your Frontend to Real Data
Module 8
AI Features: Make Your UI Intelligent
Personalized setup
Choose your experience level and goals before beginning.
Module 1
HTML & CSS: Build Layouts That Actually Work
Module 2
JavaScript: The Parts That Matter for React
Module 3
TypeScript: Catch Bugs Before Your Users Do
Module 4
React: Think in Components
Module 5
Next.js: From React App to Production Platform
Module 6
Tailwind CSS: Ship Beautiful UI Fast
Module 7
Supabase: Connect Your Frontend to Real Data
Module 8
AI Features: Make Your UI Intelligent
Capstone Project
What you'll build by the end
You'll build Scribe — an AI-powered note-taking app. It has rich text editing, real-time collaboration via Supabase, authentication with protected routes, AI summarization and smart search powered by OpenAI, a polished Tailwind design with dark mode, and optimized performance on Next.js. Each module adds a working layer to the same app, so by the end you have a portfolio piece that demonstrates every skill in this roadmap.
Full Curriculum
8 modules · 37 topics · 8-12 weeks
Module 1
HTML & CSS: Build Layouts That Actually Work
Before frameworks, master the platform. Modern CSS is powerful enough to build complex layouts without a single line of JavaScript — and accessibility isn't optional anymore.
- 1Semantic HTML: Why Structure Matters for Accessibility & SEO
- 2CSS Grid & Flexbox: Every Layout Pattern You'll Actually Use
- 3Custom Properties & the Cascade: Build a Color and Spacing System
- 4Responsive Design: Media Queries, Container Queries & Fluid Typography
Project: Build the Scribe marketing landing page: a responsive layout with CSS Grid for the feature section, Flexbox for navigation, custom properties for a consistent color system, semantic HTML with proper heading hierarchy, and ARIA labels on interactive elements. It should score 95+ on Lighthouse accessibility.
Module 2
JavaScript: The Parts That Matter for React
React is just JavaScript. The developers who struggle with React usually have gaps in JS fundamentals. This module fills them — focusing on the patterns you'll use every single day in component code.
- 1Destructuring, Spread & Rest: The Syntax React Components Live In
- 2Promises & Async/Await: Fetch Data Without Callback Hell
- 3Array Methods: map, filter, reduce — the Foundation of Rendering Lists
- 4Closures, Event Delegation & the Module Pattern
- 5ES Modules: Import/Export & How Bundlers See Your Code
Project: Build an interactive note list in vanilla JS: fetch notes from a mock API, render them to the DOM, add filtering by tag and sorting by date, implement debounced search, and handle loading/error states. No libraries — just modern JavaScript.
Module 3
TypeScript: Catch Bugs Before Your Users Do
TypeScript isn't extra work — it's less work. Learn to define shapes for your data, type your component props, and let the editor catch mistakes the moment you make them.
- 1Type Annotations, Interfaces & Type Aliases: Describe Your Data
- 2Union Types, Narrowing & Discriminated Unions: Handle Real-World Shapes
- 3Generics: Write Reusable Code Without Losing Type Safety
- 4Typing React: Props, Events, Refs & the Patterns You'll Use Most
Project: Convert the vanilla JS note list to TypeScript: define interfaces for Note, Tag, and User, type every function signature, use union types for note status (draft | published | archived), and configure strict mode so nothing slips through.
Module 4
React: Think in Components
React's mental model is simple: UI is a function of state. Learn to decompose interfaces into components, manage state without overengineering, and build hooks that your team will thank you for.
- 1JSX, Components & Props: How React Turns Data Into UI
- 2State & Lifecycle: useState, useEffect & the Rules of Hooks
- 3Forms, Controlled Inputs & Event Handling in React
- 4Custom Hooks: Extract Logic Your Components Shouldn't Own
- 5Context & useReducer: Share State Without Prop Drilling
Project: Build the Scribe note editor in React: a sidebar with note list, a main editor panel, a tag manager, and a command palette (Cmd+K). Use useState for local state, useReducer for the editor, context for the current user, and extract a custom useDebounce hook for search.
Module 5
Next.js: From React App to Production Platform
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.
- 1App Router: Layouts, Pages, Route Groups & Parallel Routes
- 2Server Components vs Client Components: When to Use Which
- 3Data Fetching: Server Actions, Revalidation & Caching Strategies
- 4Loading States, Error Boundaries & Streaming with Suspense
- 5Metadata, OG Images & the Performance Wins You Get for Free
Project: Migrate Scribe to Next.js: set up the App Router with layouts for the marketing site and the app shell, use server components to fetch notes on the server, add loading.tsx skeletons, implement dynamic routes for /notes/[id], and generate OpenGraph images for shared notes.
Module 6
Tailwind CSS: Ship Beautiful UI Fast
Tailwind isn't just utility classes — it's a design system in a config file. Learn to build consistent, responsive interfaces with dark mode, animations, and component patterns that scale across a real application.
- 1Utility-First Workflow: Why It's Faster Than You Think
- 2Responsive Design & State Variants: hover, focus, group & peer
- 3Customizing the Theme: Colors, Fonts, Spacing & Your Design Tokens
- 4Dark Mode: Implementation Patterns & Persisting User Preference
- 5Animations, Transitions & Building a Reusable Component Library
Project: Redesign Scribe with Tailwind: implement a custom theme with brand colors and spacing scale, build a reusable component library (Button, Input, Card, Modal, Dropdown), add dark mode with a toggle that persists to localStorage, and create smooth transitions on sidebar open/close and note switching.
Module 7
Supabase: Connect Your Frontend to Real Data
A frontend that only renders static data isn't a product. Connect Scribe to Supabase for authentication, real-time data, and file storage — without writing a single line of backend code.
- 1Supabase Client in Next.js: Setup, SSR & Middleware Auth
- 2Authentication: Login, Signup, OAuth & Protecting Routes
- 3Querying Data: Filters, Joins, Pagination & Real-Time Subscriptions
- 4Optimistic Updates: Make the UI Feel Instant
- 5File Uploads: Drag-and-Drop, Progress Bars & Image Previews
Project: Wire Scribe to Supabase: implement email/password and OAuth login, protect the /app routes with middleware, fetch notes with the Supabase client and add real-time subscriptions so edits sync across tabs instantly, implement optimistic updates on note save, and add image uploads to note content via Supabase Storage with drag-and-drop.
Module 8
AI Features: Make Your UI Intelligent
AI in the frontend isn't about calling an API — it's about building UIs that stream, degrade gracefully, and feel magical. Learn to integrate OpenAI into a React app the right way.
- 1Calling OpenAI from Next.js: API Routes, Edge Functions & Streaming
- 2Streaming UI: Render Tokens in Real-Time with ReadableStream
- 3AI-Powered Search: Embeddings, Semantic Matching & Result Ranking
- 4Building AI UX: Loading States, Retry Logic & Graceful Degradation
Project: Add three AI features to Scribe: (1) a "Summarize" button that streams a note summary token-by-token into a collapsible panel, (2) a smart search bar that uses embeddings to find notes by meaning ("notes about project deadlines"), and (3) an inline writing assistant triggered by /ai that suggests completions. All features include loading states, error handling, and rate-limit-aware retry logic.
Ready to start?
Sign up and AI will personalize this roadmap for your experience level.
Create my learning plan