Learn Frontend Development: Complete Roadmap for Beginners and Interviews (15 Parts)

Frontend development is much more than making pages look right. Interviews at product companies test how the web works, deep JavaScript, the browser, React and Next.js, performance and security. This free Learn Frontend series covers all of it in 15 in-depth parts, in the order that makes each topic easier to learn, with code examples, interview questions and practice problems in every part.

Use this page as your roadmap. Start at Part 1 if you are new, or jump to the topics you need to revise before an interview.

1. The complete roadmap

The series is grouped into five stages. Each stage builds on the one before it.

Stage 1: How the web works and HTML/CSS

Stage 2: JavaScript in depth

Stage 3: The browser and performance

Stage 4: React and Next.js

Stage 5: Production skills

2. All parts at a glance

Part	Topic	What you will learn
1	How the Web Works	URLs, DNS, TCP, TLS, HTTP and caching
2	HTML and Accessibility	Semantic HTML, forms, ARIA and accessibility
3	CSS Fundamentals	Cascade, specificity, box model, units
4	CSS Layout: Flexbox and Grid	Flexbox, Grid and responsive design
5	JavaScript Fundamentals	Types, scope, hoisting, closures
6	this, Prototypes and Classes	this, prototypes, classes, call/apply/bind
7	Async JavaScript and the Event Loop	Event loop, promises, async/await
8	DOM and Events	Delegation, debounce, throttle, browser APIs
9	Browser Rendering and Performance	Critical rendering path, Core Web Vitals
10	React Fundamentals	JSX, props, state, reconciliation, keys
11	React Hooks	useEffect, useRef, useMemo, custom hooks
12	State Management and Data Fetching	Context, Redux Toolkit, Zustand, TanStack Query
13	Next.js and Rendering Strategies	CSR, SSR, SSG, ISR, Server Components
14	Web Security	XSS, CSP, CSRF, CORS, token storage
15	Tooling, TypeScript and Testing	npm, Vite, ESLint, TypeScript, testing

3. 6-week study plan

At about 1 to 2 hours a day, this plan gets you through the whole series with time to build and practise.

Week	Parts	Goal
Week 1	1 to 4	Explain what happens when you type a URL, write semantic accessible HTML and build any layout with Flexbox and Grid.
Week 2	5 to 6	Master scope, closures, this and prototypes. Solve output-based JavaScript questions confidently.
Week 3	7 to 9	Understand the event loop, promises and the DOM. Implement debounce, throttle and event delegation, and measure Core Web Vitals.
Week 4	10 to 11	Build small React apps and write custom hooks from scratch.
Week 5	12 to 13	Add state management and data fetching, then rebuild a project in Next.js with the right rendering strategy per page.
Week 6	14 to 15	Secure your app, add TypeScript, tests and CI, then revise with mock interviews.

4. How to get the most out of this series

• Type the code yourself. Run every example in the browser console, CodeSandbox or a local Vite project and change it to see what breaks.
• Do the practice problems. Each part ends with problems that mirror real machine-coding and interview tasks.
• Answer the FAQ out loud. Interviewers care about clear explanations, so practise explaining each concept in two or three sentences.
• Test yourself with MCQs. Every part links to related quizzes such as event loop MCQs, React Hooks MCQs and Next.js App Router MCQs.
• Build one project end to end, for example a product catalogue with search, cart, auth and tests, and add to it as you go through each stage.
• Preparing for DSA rounds too? Follow the Learn DSA roadmap alongside this series.