Frontend Developer Roadmap
Master HTML, CSS, JavaScript, React, and modern frontend tools to build beautiful, responsive web applications.
Prerequisites
- Basic computer skills
- A text editor installed
- Browser (Chrome recommended)
Recommended Tools
Your Progress
0 of 17 topics completed
Foundations
1.HTML5
Structure web pages with semantic HTML elements.
What you'll learn
- Document structure (doctype, head, body)
- Semantic elements (header, nav, main, section, article, footer)
- Forms and input types
- Tables, lists, and media elements
- Accessibility basics (alt text, ARIA roles, landmarks)
Personal Portfolio (HTML only)
Build a multi-page portfolio site using only semantic HTML. Include an about page, projects page, and contact form.
2.CSS3 & Layouts
Style and lay out web pages with modern CSS.
What you'll learn
- Selectors, specificity, and the cascade
- Box model, margin, padding, borders
- Flexbox for one-dimensional layouts
- CSS Grid for two-dimensional layouts
- Responsive design with media queries
- CSS variables (custom properties)
- Transitions and basic animations
Responsive Landing Page
Build a fully responsive landing page with a hero section, feature cards grid, testimonials, and footer using Flexbox and Grid.
3.Git & GitHub
Track changes and collaborate with version control.
What you'll learn
- Git basics (init, add, commit, status, log)
- Branching and merging
- Remote repositories (push, pull, clone)
- Pull requests and code review workflow
- Resolving merge conflicts
- .gitignore and repository best practices
Resources
Contribute to Open Source
Fork a beginner-friendly repo, create a branch, make a meaningful contribution, and submit a pull request.
Contribute to Open Source
Fork a beginner-friendly repo, create a branch, make a meaningful contribution, and submit a pull request.
Build this before moving to the next stage
Core JavaScript
4.JavaScript Fundamentals
Learn variables, data types, operators, and control flow.
What you'll learn
- Variables (let, const) and data types
- Operators and expressions
- Conditionals (if/else, switch, ternary)
- Loops (for, while, for...of, for...in)
- Functions (declarations, expressions, arrow)
- Scope and closures
- Template literals and destructuring
Resources
Quiz App
Build a multi-question quiz with score tracking, timer, and local high score storage.
5.DOM Manipulation
Interact with and modify web pages dynamically.
What you'll learn
- Selecting elements (querySelector, getElementById)
- Modifying content, attributes, and styles
- Event listeners and event delegation
- Creating and removing elements dynamically
- Traversing the DOM tree
- Forms and user input handling
Resources
Task Manager
Build a to-do app with add/edit/delete, drag-and-drop reorder, filters (all/active/completed), and localStorage persistence.
6.Async JavaScript & APIs
Handle asynchronous operations and fetch external data.
What you'll learn
- Callbacks and callback hell
- Promises (.then, .catch, .finally)
- async/await syntax
- Fetch API and HTTP methods
- Working with JSON data
- Error handling in async code
- Promise.all and Promise.race
Resources
Weather Dashboard
Build a weather app that fetches data from a public API, shows current conditions and 5-day forecast, with city search and geolocation.
7.Modern ES6+ Features
Master modern JavaScript syntax and patterns.
What you'll learn
- Array methods (map, filter, reduce, find, some, every)
- Spread/rest operators
- Object shorthand and computed properties
- Modules (import/export)
- Optional chaining and nullish coalescing
- Sets and Maps
- Generators and iterators (basics)
Resources
E-commerce Product Filter
Build a product listing page with search, multi-category filter, price range slider, and sort — using array methods exclusively.
E-commerce Product Filter
Build a product listing page with search, multi-category filter, price range slider, and sort — using array methods exclusively.
Build this before moving to the next stage
React Ecosystem
8.React Fundamentals
Components, JSX, props, and state management basics.
What you'll learn
- JSX syntax and expressions
- Functional components
- Props and prop drilling
- useState for local state
- Conditional rendering
- Lists and keys
- Event handling in React
Resources
Expense Tracker
Build an expense tracker with add/delete transactions, category breakdown chart, monthly totals, and local state management.
9.React Hooks Deep Dive
Master useEffect, useRef, useMemo, and custom hooks.
What you'll learn
- useEffect for side effects and cleanup
- useRef for DOM access and persisted values
- useMemo and useCallback for optimization
- useReducer for complex state logic
- useContext for prop drilling avoidance
- Custom hooks (extraction and reuse patterns)
- Rules of hooks
Resources
Movie Search App
Build a movie search app using OMDB API with debounced search (custom hook), favorites list (useReducer), and theme toggle (useContext).
10.State Management & Routing
Manage global state and handle navigation.
What you'll learn
- React Router (routes, params, nested routes)
- Navigation guards and redirects
- Context API for global state
- Zustand or Redux Toolkit (pick one)
- When to use local vs global state
- URL state and search params
Blog Platform (Frontend)
Build a multi-page blog with React Router (home, post detail, category filter), global auth state, and dark mode toggle.
11.Styling in React
Modern approaches to styling React applications.
What you'll learn
- CSS Modules for scoped styles
- Tailwind CSS utility-first approach
- Styled-components or Emotion (CSS-in-JS)
- Component libraries (shadcn/ui, Radix)
- Responsive design patterns in React
- Animation libraries (Framer Motion basics)
Component Library
Build a mini UI library with Button, Input, Modal, Toast, Card components — fully styled with Tailwind, with variants and dark mode.
Component Library
Build a mini UI library with Button, Input, Modal, Toast, Card components — fully styled with Tailwind, with variants and dark mode.
Build this before moving to the next stage
Advanced Frontend
12.TypeScript
Add type safety to your JavaScript projects.
What you'll learn
- Basic types (string, number, boolean, arrays)
- Interfaces and type aliases
- Union types, intersection types, literals
- Generics (functions, components, hooks)
- Type narrowing and guards
- Utility types (Partial, Pick, Omit, Record)
- TypeScript with React (props, events, refs)
Migrate a Project to TypeScript
Take your earlier React project and convert it to TypeScript. Add strict types to all components, hooks, and API calls.
13.Testing
Write reliable tests for your frontend code.
What you'll learn
- Unit testing with Vitest/Jest
- Component testing with React Testing Library
- Mocking APIs and modules
- Integration testing patterns
- End-to-end testing with Playwright (basics)
- Test-driven development workflow
Test Suite for Expense Tracker
Write comprehensive tests for your expense tracker: unit tests for calculations, component tests for UI interactions, and integration tests for flows.
14.Performance Optimization
Make your apps fast and efficient.
What you'll learn
- React.memo, useMemo, useCallback (when to use)
- Code splitting and lazy loading
- Image optimization (formats, lazy load, srcset)
- Lighthouse audits and Core Web Vitals
- Bundle analysis and tree shaking
- Virtualization for long lists
Resources
Performance Audit & Fix
Audit one of your apps with Lighthouse, fix all performance issues, achieve 90+ score across all categories, and document before/after.
Performance Audit & Fix
Audit one of your apps with Lighthouse, fix all performance issues, achieve 90+ score across all categories, and document before/after.
Build this before moving to the next stage
Frameworks & Deployment
15.Next.js
The React framework for production applications.
What you'll learn
- App Router and file-based routing
- Server Components vs Client Components
- Data fetching (server-side)
- Dynamic routes and layouts
- Metadata and SEO
- API routes and server actions
- Static generation and ISR
Resources
Full Blog with Next.js
Build a complete blog with MDX content, categories, search, dark mode, SEO metadata, and deployed to Vercel.
16.Build Tools & Deployment
Ship your apps to production with modern tooling.
What you'll learn
- Vite as build tool
- Environment variables and configs
- Deploying to Vercel/Netlify/Firebase
- Custom domains and DNS
- CI/CD with GitHub Actions
- Monitoring and error tracking basics
Deploy with CI/CD
Set up a GitHub Actions pipeline that runs linting, tests, and auto-deploys your Next.js app to Vercel on push to main.
17.Portfolio & Job Readiness
Build your professional presence and apply.
What you'll learn
- Building a developer portfolio site
- Writing project case studies
- GitHub profile optimization
- Technical resume best practices
- Contributing to open source
- Frontend interview preparation (basics)
Resources
Ship Your Portfolio
Build and deploy your final portfolio showcasing 4-6 best projects with live demos, source code, tech stack, and case study write-ups.