Become a job-ready frontend developer. Build production-grade UIs with React, TypeScript, and modern tooling. This roadmap is sourced from the highest-quality free resources we've curated for Indian learners.
Start with the building blocks of every website. Learn semantic HTML5, the CSS box model, Flexbox, Grid, and responsive design. By the end, you should be able to build any static layout from a Figma mockup.
By the end, you'll be able to
Mini-project
Clone the Airbnb or Stripe landing page using only HTML and CSS — no frameworks, no JavaScript. Push it to GitHub Pages and send the link to a friend for honest feedback.
JavaScript is the language that powers the web. Master variables, functions, arrays, objects, the DOM, events, async/await, Promises, fetch, and ES6+ features. Do NOT skip this — shaky JS is the #1 reason React feels confusing later.
By the end, you'll be able to
Mini-project
Build a weather app using a public API (OpenWeatherMap). Vanilla JS only — no React yet. Handle loading, error, and empty states. This one project will teach you more than 40 hours of videos.
Learn version control before you touch any framework. Master commit, branch, merge, rebase, pull requests, and collaborative workflows — the industry expects this on day one.
By the end, you'll be able to
Mini-project
Fork an open-source project on GitHub (start with a typo fix or docs improvement), open a PR, and get it merged. This is the single best resume line you can add in week one.
The most in-demand frontend framework in India. Learn components, props, state, hooks (useState, useEffect, useContext), event handling, lists, forms, and how to think in components.
By the end, you'll be able to
Mini-project
Build a Todo app. Yes, really. But: add filters (all/active/done), localStorage persistence, keyboard shortcuts, and dark mode. The "boring" app teaches every React fundamental you need.
Recommended Resources
JavaScript with types. Almost every production React codebase uses TypeScript now. Learn types, interfaces, generics, and how to type your React components and hooks properly.
By the end, you'll be able to
Mini-project
Convert your React Todo app from Step 4 to TypeScript. Fix every `any`. You will hate life for 2 hours, then never want to write plain JS again.
Next.js is the React meta-framework that companies actually deploy. Learn the App Router, file-based routing, server components, data fetching, and how SSR/SSG differ from plain React.
By the end, you'll be able to
Mini-project
Build a blog where posts are stored as markdown files. Use Next.js App Router, generateStaticParams, and MDX. Deploy to Vercel. This mirrors how most company marketing sites are built.
Utility-first CSS is the default styling approach at modern startups. Learn Tailwind, component variants, dark mode, and how to build a design system without writing custom CSS.
By the end, you'll be able to
Mini-project
Rebuild a popular SaaS landing page (Linear, Vercel, Stripe) in Next.js + Tailwind. Match it pixel-for-pixel including hover states and mobile responsiveness.
Real apps talk to backends. Learn fetch, REST, async data patterns, React Query / TanStack Query for server state, and when you actually need Redux vs Context API.
By the end, you'll be able to
Mini-project
Build a GitHub repo search app using the GitHub REST API. Cache results with TanStack Query, implement infinite scroll, and show proper loading skeletons.
This is where you become hireable. Build and deploy: (1) a full-stack clone of a real app, (2) an original project solving a real problem, and (3) a personal portfolio site. Push everything to GitHub with clean READMEs. Recruiters care about this more than certificates.
By the end, you'll be able to
Mini-project
Your portfolio itself is the project. Build a personal site showcasing the 3 apps you built. Include a writeup for each: the problem, your approach, and what you learned.
Frontend interviews in India typically include: JS fundamentals (closures, this, event loop), React internals (reconciliation, hooks rules), a live coding round, and a system design round for experienced roles. Practice daily, apply widely, and don't underestimate referrals.
By the end, you'll be able to
Mini-project
Do 3 mock interviews on Pramp or with a friend. Record yourself. Watch the recording. Fix the 3 biggest issues. Then apply to 20 companies on LinkedIn/Naukri with a referral ask.
Not sure if this is the right roadmap? Browse all our career paths and find the one that matches your goals.