Frontend development has a deceptively simple entry point and a surprisingly deep floor. HTML and CSS can get you building things in a week. Truly understanding JavaScript, React's rendering model, browser performance, and accessibility well enough to clear a product company interview takes significantly longer.
This roadmap is built around what hiring managers at product companies and FAANG actually test. The order matters. The projects matter more than the tutorials.
If you are approaching the interview stage, Intervue.io connects you with senior frontend engineers for one-on-one mock interviews. Real questions, specific feedback. Visit intervue.io.
Stage 1: HTML and CSS (3 to 4 weeks)
This is where everyone starts and where most beginners spend either too much time or too little.
Too much time: spending 8 weeks perfecting HTML and CSS before touching JavaScript. You learn CSS best by building things and fixing layouts that break.
Too little time: doing a 3-hour crash course and jumping to JavaScript without understanding the box model, positioning, or how browsers parse the DOM. This creates gaps that come back during interviews.
What you actually need from HTML: semantic elements (the difference between a div and a section and why it matters), forms and validation, accessibility basics and ARIA attributes, SEO fundamentals (how search engines read your HTML), and how browsers render HTML into a DOM tree.
What you need from CSS: the box model (content, padding, border, margin), Flexbox for one-dimensional layouts, CSS Grid for two-dimensional layouts, responsive design with media queries and the mobile-first approach, CSS variables, and pseudo-classes and pseudo-elements.
The project at the end of this stage: build a responsive webpage from a design without using any CSS framework. No Bootstrap. No Tailwind. Just your own CSS. This builds the understanding that every CSS framework is built on top of.
TypeScript adoption is at 44% among developers and employers increasingly expect it. You will not start with TypeScript, but keep it in mind as a planned addition after you know JavaScript well.
Stage 2: JavaScript - The Gate You Have to Clear (6 to 8 weeks)
Every frontend roadmap says to learn JavaScript. Few of them are honest about how deep you need to go before you are interview-ready.
Surface JavaScript, variables, loops, functions, basic DOM manipulation, is what most tutorials cover. That is not enough for a product company interview. The questions that differentiate candidates in frontend interviews come from a deeper layer.
The topics that appear in real frontend interviews: closures and how JavaScript handles scope, the event loop and what happens when you mix synchronous code with Promises and setTimeout, prototypal inheritance and how ES6 classes are built on top of it, the difference between var, let, and const and why temporal dead zones exist, event bubbling and capturing and how event delegation uses them, and the difference between shallow and deep copies.
Beyond concepts, you need to be able to write non-trivial JavaScript without a library or framework. Build a working to-do app with vanilla JavaScript. Implement a basic debounce function. Write a simple event emitter. These exercises force you to write actual JavaScript rather than just consuming frameworks.
The rule that saves most beginners from a common trap: do not start React until you can explain how the event loop works and write a working fetch-based API call with error handling in vanilla JavaScript. Skipping this leads to not understanding why your React component is behaving unexpectedly, because the underlying JavaScript behaviour is the root cause.
Stage 3: React (5 to 6 weeks)
React is the right first framework for almost every frontend developer in India right now. It has a 40% market share among frontend frameworks, the deepest job market, and the largest ecosystem. If you only have time to learn one framework, learn React.
What to learn within React: JSX syntax and why it is syntactic sugar over React.createElement, components and props, state with useState, side effects with useEffect and when they fire, the rules of hooks and why violating them breaks things, conditional rendering, list rendering with keys and why keys matter for reconciliation, event handling in React versus vanilla JavaScript, and React Router for multi-page applications.
Then Context API for sharing state across components without prop drilling. Then one of the lightweight state management libraries (Zustand is the current default for new projects, simpler than Redux for most use cases).
What not to learn yet: Next.js, Redux, React Native. Learn those after you have shipped two or three React projects and know the fundamentals well. Picking up Next.js before you understand React properly is one of the most common ways to build a shaky foundation.
The project at the end of this stage: a full React application that fetches data from a public API, displays it, handles loading and error states cleanly, supports navigation between views, and manages some local state. Something you can demo in 3 minutes and explain every part of.
Stage 4: TypeScript (3 to 4 weeks)
TypeScript is now expected at product companies and FAANG for frontend roles. It is JavaScript with types. Learning it after you know JavaScript well takes 3 to 4 weeks to get to practical fluency.
What you need to know: type annotations for variables, functions, and objects, interfaces versus type aliases and when to use each, generics for reusable typed functions and components, union and intersection types, utility types (Partial, Required, Pick, Omit), and typing React components and hooks.
The mental shift that matters most: TypeScript is not about adding types everywhere. It is about adding types in the places where they prevent the specific bugs that are otherwise hard to catch. Being overly defensive with types (typing everything as any or creating complex type gymnastics) is worse than targeted, useful typing.
Stage 5: Developer Tooling (2 to 3 weeks)
These are not exciting to learn but they appear in every professional frontend environment and occasionally in interviews.
Git: Not just git commit and git push. Branching strategies, rebasing versus merging, resolving conflicts, and writing meaningful commit messages. Pull request workflow is a daily part of frontend work at any serious company.
Package managers: npm and yarn. Understanding package.json, semantic versioning, the difference between dependencies and devDependencies, and what npm run actually does.
Bundlers and build tools: Vite is the current default for new React projects. Understanding what a bundler does (resolves imports, transpiles modern JavaScript, optimises for production) matters more than knowing every Vite configuration option.
Browser DevTools: Inspecting the DOM, debugging JavaScript with breakpoints, reading the network tab, measuring performance in the Performance panel, and checking accessibility issues. These are daily tools for every frontend developer.
Tailwind CSS: Widely adopted at product companies. Once you understand raw CSS from Stage 1, Tailwind is fast to pick up and appears in many job descriptions.
Stage 6: Performance and Accessibility (3 to 4 weeks)
This is where the gap between a developer who can build things and a developer who builds things well starts to show. At product companies and FAANG, frontend engineers are expected to understand both.
Performance: What is the Critical Rendering Path and why does blocking JavaScript hurt page load. What are Core Web Vitals (LCP, FID, CLS) and how do you measure them. Code splitting and lazy loading. Image optimisation. Minimising layout shifts.
Accessibility: What ARIA attributes do and when to use them versus semantic HTML. Keyboard navigation and focus management. Screen reader behaviour. WCAG 2.1 guidelines at a practical level. This is not just an ethical concern. Accessibility questions appear in senior frontend interviews and violating basic accessibility is a code review rejection at most product companies.
The practical check: run Lighthouse on any page you have built. Fix every flagged issue. The Lighthouse report teaches you more about performance and accessibility in a practical context than reading documentation does.
Stage 7: Testing (2 to 3 weeks)
Frontend testing does not mean testing every line of code. It means writing the tests that catch the failures that matter.
Unit tests with Jest or Vitest for utility functions and isolated logic. Component tests with React Testing Library for testing components the way users interact with them (by finding elements, clicking them, and checking what renders) rather than testing implementation details. These two cover the majority of what frontend engineers write in practice.
End-to-end testing with Cypress or Playwright matters at senior level but is less commonly a hiring requirement for junior and mid-level roles.
What to Build at Each Stage
The projects matter more than the certificates. Interviewers at product companies look at your GitHub repository. They look at your code quality, not just what you built.
After HTML and CSS: a responsive portfolio site built without any framework.
After JavaScript: a vanilla JavaScript to-do app with local storage persistence and no React.
After React: a React app that fetches data from a public API, handles loading and error states, supports filtering or search, and has at least two routes.
After TypeScript: refactor one of your existing projects to use TypeScript throughout.
Before interviews: one polished, deployed project with clean code, readable component structure, meaningful test coverage, and something interesting enough to talk about for 20 minutes.
Timeline
6 to 8 months from zero to junior-ready for product company or GCC frontend roles with consistent work at 2 to 3 hours per day. The timeline assumes you are building at every stage. Developers who only complete tutorials without building anything take twice as long and interview half as well.
Designers switching to frontend development can move faster on HTML and CSS (which overlap with their existing visual thinking) but need the same time on JavaScript.
What Frontend Interviews Test
Frontend interviews at product companies test JavaScript depth (the event loop, closures, scope), React understanding (reconciliation, hooks rules, performance), browser and web platform knowledge (DOM APIs, event model, CORS), and your ability to implement UI components live in a plain editor.
The gap between knowing these topics and performing them under real interview conditions, with someone watching and asking follow-up questions, is real. Practicing under those conditions closes the gap.
At Intervue.io, frontend mock interviews are one-on-one with engineers from product companies who give you specific feedback on where your JavaScript reasoning falls short and what needs to change before your actual interview.
Visit intervue.io to book yours.
FAQs
How long does it take to become a frontend developer? 6 to 8 months for junior-level roles with consistent work and real projects at every stage. Designers and people with some HTML experience can move faster. The variable that matters most is how much you build versus how much you watch tutorials.
Should I learn React or Vue first? React. It has the largest job market in India, the deepest ecosystem, and the most interview coverage. Vue and Angular are valid but React is the safest first framework for maximising job opportunities.
Do I need TypeScript for a frontend developer job? For junior roles, strong JavaScript is sufficient. For mid-level and senior roles at product companies and FAANG, TypeScript is expected. Learning it after JavaScript is relatively fast and the investment pays off quickly in both job market competitiveness and code quality.
What is the most important project for a frontend portfolio? One complete, deployed React application with real API integration, clean code, meaningful test coverage, and something genuinely interesting. Three mediocre projects are weaker than one strong one. The project should be something you can demo in 3 minutes and explain every architectural decision in.
Is Next.js required for frontend developer jobs in India? Increasingly yes, for senior roles and for companies that care about performance and SEO. For your first frontend role, solid React knowledge is sufficient. Learn Next.js after you have shipped React projects and understand why server-side rendering matters.
