What you'll learn
Quick Answer
Learn HTML and CSS until you can build a responsive page from a design, then JavaScript until you can manipulate the DOM and handle async data — that stage is the longest and most important. Only then add a framework such as React. For full-stack, follow with Node and Express, then SQL, then deployment. Git belongs at the very start, and most of the tools people list as prerequisites can be learned later, when you have a reason to use them.
Stage 1: HTML, CSS and Git (4 to 8 weeks)
HTML is smaller than it looks. Learn semantic elements and why they matter, forms and their input types, tables, images with alt text, and the document structure. You do not need to memorise every tag — you need to know which one is correct for the meaning you want.
Spend real time on accessibility basics: alt text, label elements, heading order, and keyboard navigation. It is a genuine differentiator in interviews and it is barely covered in most tutorials.
CSS is where people underestimate the time. Learn the box model, then Flexbox and Grid properly, then media queries and responsive design. Understand specificity — it is the reason your styles do not apply, and guessing at it wastes hours.
Git from day one, not later. Learn add, commit, push, branching and how to resolve a conflict. Commit every project from the start so version control is a habit rather than a subject.
You are ready to move on when: you can take a screenshot of a simple website and rebuild its layout without following a tutorial, and it works on a phone.
Skip for now: Sass, Tailwind, CSS-in-JS, and any framework. They all assume CSS fundamentals you are still building.
Stage 2: JavaScript (8 to 16 weeks — the important one)
This is the longest stage and the one people rush. Almost every later difficulty traces back to shallow JavaScript.
Core language: variables and scope, functions, arrays and objects, loops, conditionals. Then the array methods you will use daily — map, filter, reduce, find, forEach.
The DOM: selecting elements, changing content and classes, creating and removing nodes, event listeners and event delegation.
Async: callbacks, promises, async/await, and fetch. Understand the event loop well enough to explain why a promise callback runs before a zero-delay timeout — that single question reveals whether your understanding is real.
The concepts interviewers probe: closures, this, hoisting and the temporal dead zone, prototypal inheritance, and == versus ===.
Build while you learn. Three or four small projects here are worth more than another course. A quiz, a weather app using a public API, and a to-do list with localStorage cover most of the ground.
You are ready to move on when: you can fetch data from an API, render it, and handle the loading and error states without copying from anywhere.
Stage 3: A Framework (6 to 10 weeks)
Now a framework makes sense, because you know what it is doing for you.
Pick one and stay with it. React has the largest job market in India and the most learning material, which makes it the pragmatic default. Vue is easier to start with. Angular appears mostly in enterprise roles. The concepts transfer, so the choice matters less than the commitment.
For React specifically, learn in this order: components and props, then useState, then rendering lists with keys, then useEffect and data fetching, then forms, then useContext, then routing. Custom hooks after that.
Understand the model, not the API. Why state updates are asynchronous and batched. Why immutable updates are required. Why keys must be stable. These are the questions interviews turn on, and the ones that make debugging possible.
Build two projects — one fetching and displaying data with routing, one managing meaningful state such as a cart or a dashboard.
Skip for now: Redux and other state libraries. Component state and Context handle far more than people expect, and reaching for Redux before you have felt the problem it solves produces confusing code.
Stage 4: Backend, Database, Deployment (10 to 16 weeks)
Only needed if you want full-stack or backend roles. Frontend-only is a complete career.
Node and Express: routing, middleware, request and response handling, and building a REST API. You already know JavaScript, so this is mostly new patterns rather than a new language.
HTTP properly: methods, status codes, headers, and what CORS is and is not. This knowledge pays back constantly and is asked in every backend interview.
Databases: learn SQL first, even if you plan to use MongoDB. SELECT, JOIN, GROUP BY, indexes, and basic schema design. SQL concepts transfer everywhere; starting with MongoDB tends to leave gaps in how you think about data relationships.
Authentication: hashing passwords with bcrypt, sessions versus tokens, and where to store a token in a browser. Understand why you never store a password in plain text and never write your own crypto.
Deployment: environment variables, getting a project onto a real URL, and reading server logs when it fails. Deploying something badly and fixing it teaches more than any tutorial on the subject.
You are ready when: you can build an API with authentication, connect it to a database, deploy it, and debug it in production.
What to Skip, and How Long This Really Takes
Roadmap diagrams list everything, which is why they paralyse people. Most of it is learned on the job, when a real problem requires it.
Defer until you have a reason: TypeScript (excellent, but learn JavaScript first), Docker, Kubernetes, GraphQL, Redux, testing frameworks, CI/CD, microservices, WebAssembly, and every build tool. None of these block you from building and shipping working software.
The exception is TypeScript, which is increasingly expected in job listings. Add it after you are comfortable with JavaScript — it is a smaller step from there than it looks.
Realistic timeline. Studying seriously for two to three hours daily, frontend-employable takes roughly six to nine months, and full-stack nine to fifteen. Anyone promising three months is describing someone who already programmed in another language.
Three things that matter more than the order:
- Build constantly. Watching a course produces recognition, not ability. The gap only closes by writing code that does not work and fixing it.
- Do not restart. Switching languages or frameworks every few weeks is the most common reason people are still beginners after two years.
- Read other people's code. Open a small open-source repository and follow how it is organised. It teaches structure, which no tutorial covers well.