How long does it take to learn frontend development?

With 2–3 hours per weekday and 5–6 hours on weekends, you can become interview-ready in 16 weeks (about 4 months). This roadmap is structured for exactly that timeline — 112 daily tasks spanning JavaScript, React, machine coding, data structures, and system design.

What should I learn first as a frontend developer — JavaScript or React?

Always learn JavaScript deeply before React. React is built on JavaScript, so concepts like closures, the event loop, prototypes, and async/await must be solid before React makes sense. This roadmap dedicates the first 4 weeks (28 days) to JavaScript mastery before introducing React in Month 2.

Do frontend developers need to know DSA (data structures and algorithms)?

Yes — most senior frontend interviews at top startups include DSA rounds. You don't need competitive programming depth, but you must be comfortable with arrays, linked lists, trees, graphs, dynamic programming, and the sliding window pattern. This roadmap integrates DSA practice throughout.

What are the best companies to target for frontend developer roles in India?

Top frontend companies in India include Zepto, Meesho, PhonePe, Razorpay, CRED, Groww, Flipkart, Swiggy, and Atlassian. This roadmap specifically prepares you for interviews at these companies by covering the topics they most commonly test.

What is the JavaScript roadmap for frontend developers?

The JavaScript roadmap for frontend developers covers: execution context and call stack, scope and closures, this keyword and binding, event loop and async patterns, prototypes and inheritance, ES6+ features, memory management, and polyfills. Weeks 1–4 of this roadmap cover all of these in depth.

What is the React roadmap for frontend developers?

The React roadmap covers: JSX and Fiber architecture, reconciliation and rendering phases, all core hooks (useState, useEffect, useMemo, useCallback, useRef, useContext, useReducer), custom hooks, performance optimization (React.memo, code splitting, virtualization), and advanced patterns like portals, error boundaries, and React 18 features.

Frontend Developer Roadmap — All 16 Weeks

Month 1: JS + Browser Mastery — Frontend Roadmap

Week 1: JS Foundations (Deep)

Day 1:
- Execution Context — global & function-level
- Call stack internals & visualization
- Practice: Implement your own call stack simulator in JS
Day 2:
- Scope & Lexical Environment deep dive
- var / let / const — all edge cases (TDZ, closures)
- Hoisting: Predict output
- Practice: 10 tricky scope output questions
Day 3:
- Closures — CRITICAL for interviews
- Real use cases: memoization, private variables, factory functions
- Practice: Build a counter, memoize, and private module using closures
Day 4:
- this keyword — all 4 binding rules (implicit, explicit, new, default)
- Arrow functions vs regular functions — this behavior
- Practice: Predict output for 15 this-keyword questions
Day 5:
- bind / call / apply — differences & use cases
- Implement polyfill for bind from scratch
- polyfill-lab
Day 6:
- Event loop — microtask vs macrotask queue (deep)
- Promise chaining & execution order
- Practice: 20 event loop output prediction questions
Day 7:
- Build: Custom setTimeout using Date.now loop
- Build: Basic Promise polyfill
- Revise Week 1 notes — flashcard all concepts

Week 2: Advanced JavaScript

Day 8:
- Prototypes & prototype chain
- Inheritance patterns: classical vs prototypal
- Practice: Implement Object.create and instanceof from scratch
Day 9:
- ES6+ deep dive: spread/rest edge cases, destructuring tricks
- Optional chaining, nullish coalescing, logical assignment
- Practice: 12 ES6 output questions
Day 10:
- Async/await internals — how it desugars to generators
- Error handling with async — try/catch patterns
- Parallel vs sequential async patterns (Promise.all, race, allSettled)
Day 11:
- Error handling patterns — custom Error classes
- Retry logic, exponential backoff implementation
- Practice: Build retry wrapper with exponential backoff
Day 12:
- Memory management — heap vs stack
- Garbage collection — mark & sweep
- Memory leaks in React & how to detect them (DevTools)
Day 13:
- Implement debounce from scratch (with leading/trailing options)
- Implement throttle from scratch
- Practice: Build debounced search input
Day 14:
- Polyfills: Array.map, Array.reduce, Array.filter, Array.flat
- Polyfills: Promise.all, Promise.race, Promise.allSettled
- Revise Week 2 — write all polyfills from memory

Week 3: Browser & Web Internals

Day 15:
- Browser rendering pipeline: parsing → DOM → CSSOM → Render tree → Layout → Paint → Composite
- Critical rendering path optimization
- Practice: Identify bottlenecks in a given HTML/CSS setup
Day 16:
- Reflow vs Repaint — what triggers each
- GPU compositing — when and why
- Practice: List 10 CSS properties that trigger reflow vs repaint
Day 17:
- HTTP 1.1 vs HTTP/2 vs HTTP/3 — key differences
- Caching: Cache-Control, ETags, max-age, stale-while-revalidate
- CDN internals — edge caching, cache invalidation
Day 18:
- Cookies vs localStorage vs sessionStorage — security & scope
- IndexedDB — when to use it
- Service Workers & offline caching basics
Day 19:
- CORS — preflight, origins, headers to set
- XSS — types (stored, reflected, DOM) & prevention
- CSRF — token pattern, SameSite cookies
Day 20:
- Weekend Build Day 1: Debounced search UI with real API
- Implement client-side caching layer for API responses
- Add loading/error states with skeleton screens
Day 21:
- Weekend Build Day 2: Add URL-synced search state
- Implement AbortController to cancel stale requests
- Revise Weeks 1–3: full flashcard pass

Week 4: DSA — Frontend Focus

Day 22:
- Arrays: two pointers pattern
- Strings: sliding window
- Solve 3 LeetCode: Two Sum, Valid Palindrome, Container With Most Water
Day 23:
- Hashing: frequency maps, anagram detection
- Solve 3 problems: Group Anagrams, Top K Frequent, Longest Consecutive Sequence
Day 24:
- Linked List: reversal, cycle detection (Floyd's)
- Solve 3 problems: Reverse List, Detect Cycle, Merge Two Sorted Lists
Day 25:
- Stack & Queue patterns
- Monotonic stack (Next Greater Element)
- Solve 3 problems: Valid Parentheses, Daily Temperatures, Largest Rectangle in Histogram
Day 26:
- Binary Search: search in rotated, find first/last position
- Solve 3 problems: Binary Search, Search Rotated Array, Find Peak Element
Day 27:
- Weekend: Solve 8 mixed problems (arrays, strings, hashing)
- Time yourself — target under 20 mins each
- Review any failed approaches
Day 28:
- Weekend: Full JS Month 1 revision
- Write all polyfills from memory
- Mock output-prediction quiz: 30 questions in 20 min

Month 2: React Deep Dive — Frontend Roadmap

Week 5: React Core Internals

Day 29:
- How React works internally — JSX compilation
- Fiber architecture overview
- React element vs component vs instance distinction
Day 30:
- Virtual DOM — what it actually is (not a real DOM)
- Reconciliation algorithm — diffing rules (key, type)
- When React bails out of rendering
Day 31:
- Rendering phases: render phase vs commit phase
- Concurrent mode concepts — time slicing
- StrictMode double-invocation — why it exists
Day 32:
- State updates — auto-batching in React 18
- setState batching inside timeouts, promises (React 18 vs 17 difference)
- Practice: Predict render counts for given update sequences
Day 33:
- Controlled vs uncontrolled components — trade-offs
- Lifting state vs composition patterns
- Practice: Build a form with controlled inputs + validation
Day 34:
- Weekend Build: Reusable form system with validation
- Compound component pattern for form fields
- Add accessible error messages & ARIA attributes
Day 35:
- Weekend: Review React core — write 10 interview Q&A from memory
- Mock Q: Explain reconciliation in 2 mins
- Mock Q: What happens when a component's key changes?

Week 6: Hooks Mastery

Day 36:
- useState — lazy initializer, functional update form
- State as snapshot — why closures cause stale state
- Practice: 10 useState edge case questions
Day 37:
- useEffect — dependency array rules, exhaustive-deps lint rule
- Cleanup function — subscriptions, timers, abort controllers
- Practice: Debug 5 broken useEffect patterns
Day 38:
- useRef — mutable container vs DOM ref
- Preserving values across renders without re-render
- Practice: Build a stopwatch using useRef + useEffect
Day 39:
- useMemo — when it helps vs when it's premature optimization
- Referential equality and why it matters for memoization
- Practice: Identify which values in a component need useMemo
Day 40:
- useCallback — stabilizing function references
- useCallback + useMemo combined patterns
- Practice: Fix unnecessary child re-renders using useCallback
Day 41:
- Weekend Build: Custom hooks library
- Implement: useDebounce, useLocalStorage, usePrevious, useWindowSize, useOnClickOutside
Day 42:
- Weekend: useContext deep dive — Context API pitfalls
- useReducer — when to prefer over useState
- Build: Theme switcher using Context + useReducer

Week 7: Performance + Patterns

Day 43:
- React.memo — shallow comparison, custom comparator
- When NOT to use React.memo (cost of comparison)
- Practice: Profile a component tree, identify memo candidates
Day 44:
- Code splitting — React.lazy + Suspense
- Route-based vs component-based splitting
- Implement: Lazy-loaded modal, lazy-loaded route
Day 45:
- Virtualization — react-window / react-virtual concepts
- Implement basic virtual list from scratch
- When to use: 100+ items in a scrollable list
Day 46:
- Context API performance pitfalls — re-renders from context
- Split context pattern — separate state from dispatch
- Practice: Refactor a slow context to split pattern
Day 47:
- Image optimization — lazy loading, WebP, srcSet
- Font loading strategies — font-display: swap
- Practice: Audit a page using Lighthouse, fix 3 issues
Day 48:
- Weekend: Take a slow React app, profile in DevTools
- Identify: wasted renders, expensive computations, large bundles
- Apply fixes: memo, lazy, split context
Day 49:
- Weekend: HOC pattern, Render Props — when each fits
- Compound components pattern — real example (Tabs UI)
- Revise Weeks 5–7 concepts

Week 8: Advanced React

Day 50:
- Error boundaries — class component requirement, why no hook
- Error boundary patterns: per-route, per-section
- Implement: Error boundary with retry button
Day 51:
- Portals — when to use (modals, tooltips)
- Implement: Modal system using React.createPortal
- Handle focus trapping inside portal modal
Day 52:
- React 18 features: useTransition, useDeferredValue
- Concurrent rendering practical use cases
- Practice: Add smooth search with useDeferredValue
Day 53:
- Forms deep dive: React Hook Form (basics)
- Validation schemas: Zod integration pattern
- Build: Multi-step form with validation at each step
Day 54:
- State management: Zustand vs Redux Toolkit — trade-offs
- Zustand basics — store, selectors, actions
- Build: Cart state using Zustand
Day 55:
- Weekend Build: Complex dashboard UI
- Features: filters, sorting, pagination, debounced search
- All client-side — no external state library
Day 56:
- Weekend: Revise all React — write 20 interview Q&A from memory
- Mock Q: How does React reconcile list items?
- Mock Q: Explain the difference between useMemo and useCallback

Month 3: Machine Coding + Projects — Frontend Roadmap

Week 9: Machine Coding — Core Components

Day 57:
- Machine code: Todo app — add, complete, delete, filter (all/active/completed)
- Persist state (localStorage)
- Add edit-in-place functionality
Day 58:
- Machine code: Autocomplete / typeahead component
- Debounced API calls, keyboard navigation (↑↓ Enter Esc)
- Handle loading & error states, no flicker on fast typing
Day 59:
- Machine code: Infinite scroll feed
- IntersectionObserver API for trigger
- Handle: first load, loading skeleton, error + retry, end of feed
Day 60:
- Machine code: Star rating component
- Hover preview, click to set, keyboard accessible
- Half-star support variant
Day 61:
- Machine code: Accordion / FAQ component
- Multiple open vs single open modes
- Smooth CSS animation, ARIA expanded attributes
Day 62:
- Weekend: Tabs component with route sync (URL hash)
- Lazy-load tab content on first activation
- Animate tab indicator (CSS transform)
Day 63:
- Weekend: Modal system — open/close, backdrop click, Escape key
- Stack multiple modals
- Focus trap inside modal (Tab cycles through focusable elements)

Week 10: Machine Coding — Complex UIs

Day 64:
- Machine code: File explorer tree
- Nested expand/collapse, lazy load children
- Keyboard navigation, multi-select with Shift+click
Day 65:
- Machine code: Drag & drop sortable list
- Native HTML5 drag API (no library)
- Smooth drop animation using CSS transform
Day 66:
- Machine code: Kanban board
- Drag cards between columns
- Optimistic UI updates, column limit enforcement
Day 67:
- Machine code: Data table with column sorting
- Pagination, row selection with checkbox, bulk actions
- Multi-column sort support
Day 68:
- Machine code: Image carousel
- Touch swipe support, keyboard navigation
- Lazy load off-screen images, dot indicators
Day 69:
- Weekend: Calendar date picker component
- Month navigation, range selection
- Disabled dates, min/max date constraints
Day 70:
- Weekend: Stopwatch + Countdown timer
- Start/pause/reset, laps for stopwatch
- useRef for accurate timing (no drift)

Week 11: Project 1 — Scalable Dashboard

Day 71:
- Setup: Next.js App Router + TypeScript + Tailwind
- Design system: shared components, color tokens
- Plan features: charts, filters, date range, data table
Day 72:
- Build: Sidebar navigation with active route highlighting
- Responsive: collapses to drawer on mobile
- Keyboard shortcut to toggle sidebar
Day 73:
- Build: KPI metric cards with trend indicators
- Animated number count-up on mount
- Skeleton loading states
Day 74:
- Build: Bar + Line chart (Recharts)
- Date range filter syncs all charts
- Charts re-render smoothly on filter change
Day 75:
- Build: Filterable, sortable data table with pagination
- Column visibility toggle
- Export to CSV functionality
Day 76:
- Weekend: URL state sync — all filters in search params
- Add: Global search across table data with highlight
- Debounced search, highlight matched text
Day 77:
- Weekend: Polish & performance audit
- Add error boundaries, loading states everywhere
- Lighthouse audit — fix top 3 issues

Week 12: Project 2 + DSA Sprint

Day 78:
- Project 2: Real-time chat UI — message list, input, send
- Group messages by date separator
- Virtualize message list for 1000+ messages
Day 79:
- Project 2: Add emoji picker, file attachment preview
- Read receipts, typing indicator animation
- Unread message count badge
Day 80:
- DSA: Trees — DFS, BFS, level order traversal
- Solve: Max Depth, Path Sum, LCA, Serialize/Deserialize
Day 81:
- DSA: Dynamic Programming — top-down memoization
- Solve: Climbing Stairs, Coin Change, Longest Common Subsequence
Day 82:
- DSA: Graphs — adjacency list, BFS, DFS
- Solve: Number of Islands, Clone Graph, Course Schedule
Day 83:
- Weekend: DSA mock — 3 medium problems in 90 min
- Self-review: time/space complexity analysis
- Watch 2 JS interview walkthroughs
Day 84:
- Weekend: Push both projects to GitHub with READMEs
- Write README for each (problem, solution, tech stack)
- Record a 2-min screen demo of your project

Month 4: Interview Mode — Frontend Roadmap

Week 13: Behavioral + System Design

Day 85:
- System design basics: scalability, load balancing, CDN, caching
- Frontend system design: state architecture for large apps
- Design: News feed (infinite scroll, caching, real-time updates)
Day 86:
- STAR method for behavioral questions
- Prepare 8 stories: impact, conflict, failure, leadership, ownership
- Practice: 'Tell me about a time you improved performance'
Day 87:
- JS interview deep session: 30 questions in 60 min
- Focus: closures, event loop, prototype, this, async
- Target: answer each under 90 seconds
Day 88:
- React interview deep session: 20 questions in 60 min
- Focus: hooks, rendering, reconciliation, performance
- Include architectural questions (when to split components)
Day 89:
- Machine coding mock: Build autocomplete in 45 min solo
- No help — timer running
- Review: completeness, edge cases, code clarity
Day 90:
- Apply to 20 companies — target: Zepto, Meesho, PhonePe, Razorpay, CRED, Groww, Flipkart, Swiggy
- Craft tailored cover note for each (3 sentences max)
- Track in spreadsheet: company, date, status, next step
Day 91:
- Weekend: Full mock interview (self-record)
- Round 1: JS + React Q&A (30 min)
- Round 2: Machine coding — Data table (45 min)

Week 14: Mock Interviews + Gap Fixing

Day 92:
- Identify Week 13 mock gaps — top 3 weak areas
- Deep dive on gap 1 with examples and practice
- Write 5 Q&A on gap 1 from memory
Day 93:
- Deep dive on gap 2 with examples and practice
- Machine code: Build the component type you struggled with
- Time yourself again — compare to Day 89
Day 94:
- Deep dive on gap 3
- System design: Design search-as-you-type at scale
- Cover: debounce, caching, CDN, server-side vs client-side suggestions
Day 95:
- DSA sprint: 5 medium problems in 2 hours
- Focus: areas that came up in mock
- Track pass rate — aim for 4/5
Day 96:
- Review all applied JDs — extract repeated tech keywords
- Ensure portfolio covers: Next.js SSR, TypeScript, performance, testing
- Add any missing tech demo to projects
Day 97:
- Apply to 15 more companies
- Follow up on Week 13 applications (email or LinkedIn)
- Prepare 3 smart questions to ask interviewers
Day 98:
- Weekend: Full-length mock interview simulation
- Include: intro (2 min), JS (20 min), React (20 min), machine coding (45 min), Q&A
- Score yourself 1–10 on each section

Week 15: Real Interviews + Iteration

Day 99:
- Pre-interview ritual: review key concepts 30 min before
- Print mental checklist: intro → clarify → plan → code → test → optimize
Day 100:
- After each interview: write down every question asked (within 1 hour)
- Score yourself on each section
- Identify 1 gap to fix before next interview
Day 101:
- Machine coding: revisit any component type that came up in interview
- Improve time: target 35 min for medium complexity UI
- Add to portfolio if it's a clean implementation
Day 102:
- JS deep revision: anything that caught you off guard
- Add to personal cheat sheet (for memorizing)
Day 103:
- React deep revision: any hook or pattern you fumbled
- Build a mini-app demonstrating the concept
- Push to GitHub
Day 104:
- Apply to 15 more companies — referrals priority
- LinkedIn: post about a technical insight (visibility)
- Reach out to 3 connections at target companies for referral
Day 105:
- Weekend: Full system design mock
- Design: Booking system at scale
- Cover: search, availability, real-time updates, payments integration

Week 16: Final Push + Offer Negotiation

Day 106:
- Negotiate: Research market rates (Glassdoor, Levels.fyi, LinkedIn Salary)
- Know your: current CTC, expected, minimum, stretch ask
- Script: 'Based on my research and the impact I've delivered...'
Day 107:
- Competing offer strategy — inform other companies if you get one offer
- Timeline management — ask for 5–7 days to evaluate
- Negotiate beyond salary: ESOPs, joining bonus, WFH, notice period buyout
Day 108:
- JS final mock: 25 hardest questions — zero reference
- Score yourself — target 22/25
- Fix the 3 misses same day
Day 109:
- React final mock: 20 hardest questions
- Machine code: redo your hardest component from scratch in 30 min
Day 110:
- DSA final: 4 medium problems in 2 hours
- Focus: trees, DP, sliding window — most common in frontend DSA rounds
Day 111:
- Portfolio final review: GitHub, projects, LinkedIn, resume
- Ensure all projects have live links, READMEs, and recent commits
- Resume: quantify everything — use real impact numbers
Day 112:
- Final reflection: What did you learn? What would you do differently?
- Update JSPrep with interview questions you encountered
- Celebrate — and keep shipping 🚀

Frontend Roadmap — Frequently Asked Questions

What is the best frontend developer roadmap for 2026?

The best frontend roadmap for 2026 covers JavaScript internals, React deep dive, machine coding practice, DSA, and system design. This 16-week plan covers all of these with 112 daily structured tasks.

How long does it take to become a frontend developer?

With 2–3 hours per weekday and 5–6 hours on weekends, you can become interview-ready in 16 weeks. This roadmap is structured for exactly that timeline.

Should I learn JavaScript or React first?

JavaScript first — always. React is built on JavaScript, so closures, the event loop, and async/await must be solid before React makes sense. This roadmap spends the first 4 weeks on JavaScript mastery.

Do frontend developers need DSA?

Yes. Most senior frontend interviews include DSA rounds covering arrays, linked lists, trees, graphs, and dynamic programming. This roadmap integrates DSA throughout.

What is machine coding in frontend interviews?

Machine coding asks you to build a complete UI component (autocomplete, infinite scroll, drag-and-drop kanban) from scratch in 45–60 minutes. Month 3 of this roadmap dedicates two full weeks to machine coding practice.

What is the JavaScript roadmap for 2026?

The 2026 JavaScript roadmap covers: execution context, closures, event loop, async/await, prototypes, ES6+ features, memory management, and polyfills.

What is the React roadmap for 2026?

The 2026 React roadmap covers: Fiber architecture, reconciliation, all hooks, custom hooks, performance optimization, portals, error boundaries, and React 18 concurrent features.

Frontend Developer Roadmap 2026 — 16 Weeks, 112 Days

🔥 Roadmap

JavaScript → React → Machine Coding → DSA → System Design

2–3 hrs weekdays · 5–6 hrs weekends · Progress auto-saved to browser

Overall progress

0%

Days completed

0/112

Weeks finished

0/16

Current month

0%

Month 1 progress

Day 1

→Execution Context — global & function-level
→Call stack internals & visualization
→Practice: Implement your own call stack simulator in JS

Day 2

Day 3

→Closures — CRITICAL for interviews
→Real use cases: memoization, private variables, factory functions
→Practice: Build a counter, memoize, and private module using closures

Day 4

→this keyword — all 4 binding rules (implicit, explicit, new, default)
→Arrow functions vs regular functions — this behavior
→Practice: Predict output for 15 this-keyword questions

Day 5

→bind / call / apply — differences & use cases
→Implement polyfill for bind from scratch
→polyfill-lab

Day 6

→Event loop — microtask vs macrotask queue (deep)
→Promise chaining & execution order
→Practice: 20 event loop output prediction questions

Day 7

→Build: Custom setTimeout using Date.now loop
→Build: Basic Promise polyfill
→Revise Week 1 notes — flashcard all concepts

Progress auto-saved to browser · Works offline

Frontend Roadmap — Common Questions

What does this frontend roadmap cover?+

16 weeks and 112 days across four phases: Month 1 (JavaScript & browser internals), Month 2 (React deep dive), Month 3 (machine coding + projects), and Month 4 (interview mode — mocks, system design, and offer negotiation).

Should I learn JavaScript or React first?+

JavaScript first — always. React is built on JavaScript, so closures, event loop, prototypes, and async patterns must be solid before React makes sense. This roadmap dedicates the entire first month to JavaScript mastery.

Do I need DSA as a frontend developer?+

Yes. Most senior frontend interviews at Razorpay, CRED, Groww, and Flipkart include a DSA round. This roadmap integrates focused DSA sprints in Weeks 4, 12, and 14 — covering arrays, trees, graphs, and dynamic programming.

What is machine coding and why does this roadmap spend two weeks on it?+

Machine coding rounds ask you to build a full UI component (autocomplete, drag-and-drop kanban, data table) within 45–60 minutes. They test component design, state handling, edge cases, and accessibility. Two dedicated weeks (Weeks 9–10) + one project week (Week 11) gives you the reps needed to build any component confidently under pressure.

How is this different from roadmap.sh?+

roadmap.sh shows you what to learn. This roadmap tells you what to do each day, gives you practice tasks, machine coding builds, and DSA problems — all ordered to build interview-ready skill, not just knowledge. It's an execution plan, not a topic map.