Web development · 5 stages · about 44 weeks
Frontend developer roadmap
0/26 tasks done (ticks are kept on this device)
- 1
Beginner · about 6 weeks
Web basics: HTML, CSS and how the web works
What to learn
How the web works: You need to know what happens when someone opens a website.
When you type a web address, your browser asks a server for files: HTML, CSS, JavaScript and images. The browser then reads these files and draws the page. Knowing this helps you understand why a page is slow or why a file did not load.
HTML: HTML is the skeleton of every web page.
HTML uses tags like <h1>, <p>, <a> and <img> to mark headings, paragraphs, links and pictures. Good HTML uses the right tag for the right job, for example <button> for buttons and <nav> for menus. This makes the page easier for search engines and screen readers to understand.
CSS basics: CSS controls colours, fonts, spacing and layout.
CSS rules pick elements (selectors) and give them styles (properties). Learn the box model first: every element is a box with content, padding, border and margin. Most layout problems become easy once you understand the box model.
Flexbox and Grid: These two tools build almost every modern layout.
Flexbox lines items up in one direction, like a row of buttons or a navbar. Grid places items in rows and columns at the same time, like a photo gallery or a full page layout. Practise both until you can copy any simple layout you see.
Responsive design: Most Indian users open websites on a phone.
A responsive page changes its layout to fit the screen: one column on a phone, more columns on a laptop. You do this with flexible widths, the viewport meta tag and media queries. Always design for the small screen first, then add rules for bigger screens.
Git and GitHub: Git saves every version of your code; GitHub shows your work to employers.
Git records changes to your files as commits, so you can go back if something breaks. GitHub stores your code online and lets others see it. Recruiters often look at your GitHub profile, so push every practice project there.
Browser DevTools: DevTools let you look inside any page and fix problems.
Press F12 in Chrome to open DevTools. You can see the HTML, change CSS live, check the console for errors and see which files are slow to load. Using DevTools every day will make you a much faster learner.
Tasks
Project
A responsive 3-page website for a local shop or tuition centre (Home, Services, Contact), hosted on GitHub Pages and shared with a real person for feedback.
📘 Learn it here, free: Frontend Web Development course
Free resources
- 2
Beginner · about 8 weeks
JavaScript and the DOM
What to learn
JavaScript basics: JavaScript makes pages do things when people click or type.
Learn variables, data types, if/else, loops and functions. Write small programs in the browser console before building pages. Take your time here, because everything later is built on these basics.
Arrays and objects: Almost all real data (a product list, a user) is stored in arrays and objects.
An array is an ordered list, like a list of prices. An object groups related values with names, like a user with name, email and city. Learn the array methods map, filter, find and reduce, because you will use them every day.
The DOM: The DOM is how JavaScript reads and changes the page.
The browser turns your HTML into a tree of objects called the DOM. With JavaScript you can find an element, change its text, add a class or create new elements. This is how a to-do list shows a new item without reloading the page.
Events: Events let your code react to clicks, typing and form submits.
You attach a listener with addEventListener, and your function runs when the event happens. Common events are click, input, submit and keydown. Learn to stop a form from reloading the page with event.preventDefault().
Fetch, promises and async/await: Real apps load data from servers without freezing the page.
fetch() asks a server for data and returns a promise, which is a value that will arrive later. async/await lets you write this waiting code in a simple top-to-bottom style. Practise with free public APIs and always handle errors.
JSON: JSON is the common format servers and browsers use to share data.
JSON looks like JavaScript objects written as text. You turn text into an object with JSON.parse and an object into text with JSON.stringify. Almost every API you call will send JSON back.
localStorage: It lets a page remember small things after the browser is closed.
localStorage stores text by a key, inside the user's own browser. It is good for settings like dark mode or a saved to-do list. Never store passwords or secret data there.
Tasks
Project
A quiz app: questions load from a JSON file, the user picks answers, sees the score at the end, and the best score is saved in localStorage.
📘 Learn it here, free: Frontend Web Development course
Free resources
- 3
Intermediate · about 10 weeks
React, TypeScript and modern tooling
What to learn
npm and Vite: Modern projects use packages and a build tool.
npm installs ready-made code (packages) that others have written. Vite starts a fast local server and bundles your files for the web. You will create almost every new project with a command like npm create vite@latest.
React components and props: React is the most used frontend library in Indian job posts.
In React you build the page from small pieces called components, like a ProductCard or a Navbar. Props pass data into a component, the way arguments pass data into a function. Thinking in components makes big apps easier to build and change.
State and hooks: State is data that changes, and hooks let components remember it.
useState stores a value, and React redraws the component when it changes. useEffect runs code after the page draws, for example to load data. Learn the rules of hooks early to avoid strange bugs.
Routing: Real apps have many pages: home, product, cart, profile.
A router shows a different component for each web address without reloading the whole page. React Router is common in plain React apps, and Next.js has its own file-based routing. Learn how to read values from the address, like a product id.
TypeScript: TypeScript catches many mistakes before you run the code.
TypeScript is JavaScript with types: you say a price is a number and a name is a string. The editor then warns you when you mix them up. Most new frontend jobs now ask for TypeScript.
Tailwind CSS or a component library: Teams style apps faster with shared utility classes or ready components.
Tailwind gives you small classes like p-4 and text-lg that you put straight on elements. Component libraries give you ready buttons, dialogs and tables. Learn one well, but keep your plain CSS skills strong.
Forms and validation: Sign-up, checkout and search are all forms.
Learn controlled inputs in React, showing errors next to the right field and disabling the button while saving. Libraries such as React Hook Form and Zod help with big forms. Always check the data again on the server too.
Working with APIs: Frontend apps show data that lives on a server.
Learn to load, show, create and update data through a REST API. Show loading and error states every time. Tools like TanStack Query cache data so the app feels fast.
Tasks
Project
A small shop front: product list, product page, cart with quantity and total in rupees, saved in localStorage, written in React + TypeScript and deployed online.
📘 Learn it here, free: Frontend Web Development course
Free resources
- 4
Intermediate · about 8 weeks
Next.js, testing and accessibility
What to learn
Next.js: Next.js is the most common way to build production React sites.
Next.js adds file-based routing, server rendering and API routes to React. Pages can be built on the server, so they load fast and search engines can read them. Learn the App Router, layouts and how to fetch data on the server.
Accessibility (a11y): Your site should work for everyone, including people using screen readers or only a keyboard.
Use real buttons and labels, give images alt text and keep good colour contrast. Check that every action works with the Tab and Enter keys. Accessible sites are also better for SEO and easier for everyone to use.
Web performance: Slow pages lose users, especially on cheap phones and slow mobile data.
Learn Core Web Vitals, which measure how fast the page loads and how stable it looks. Compress images, load only the code a page needs and avoid huge libraries. Use Lighthouse in Chrome DevTools to measure before and after.
Testing: Tests catch bugs before your users do.
Unit tests (with Vitest or Jest) check small functions. Component tests check that a button or form behaves correctly. End-to-end tests (with Playwright) click through the real app like a user would.
Basic SEO: Good SEO brings free visitors from Google.
Give each page a clear title and description, use one h1, and write meaningful links. Next.js lets you set this metadata per page. Fast, accessible pages also rank better.
Git in a team: Jobs use branches, pull requests and code reviews.
Create a branch for each feature, open a pull request and ask for review. Learn to fix merge conflicts calmly. Write short, clear commit messages that say what changed.
Tasks
Project
A blog or portfolio in Next.js with a list page, article pages, good SEO metadata, a Lighthouse score above 90, and tests that run on every push with GitHub Actions.
📘 Learn it here, free: Frontend Web Development course
Free resources
- 5
Expert · about 12 weeks
Architecture, design systems and leading frontend work
What to learn
State management at scale: Big apps need a clear plan for where data lives.
Keep server data in a cache tool like TanStack Query and keep only real UI state in React. Use a store like Zustand or Redux Toolkit only when many distant parts of the app share the same data. Simple, clear data flow is worth more than a fancy library.
Design systems: Large teams share one set of components so the product looks the same everywhere.
A design system is a library of tested components plus rules for colour, spacing and type. Tools like Storybook show each component on its own page. Learn to build components that are accessible, themeable and well documented.
Rendering strategies: Choosing static, server or client rendering changes speed and cost.
Static pages are built once and are very fast. Server rendering builds the page for each request, which is good for fresh or personal data. Client rendering is good for highly interactive screens; experts mix all three on purpose.
Frontend security: Frontend bugs can leak user data.
Learn about cross-site scripting (XSS), unsafe HTML, cookies and Content Security Policy. Never trust data from the user or the URL. Keep secrets on the server, never in frontend code.
Monitoring and real-user metrics: You must know when the live site breaks or slows down.
Error tracking tools report crashes from real users with the line of code. Real-user metrics show how fast the site is on actual phones and networks. Fix the biggest problems first, based on data.
Internationalisation (i18n): Indian products often need Hindi and other languages.
Keep all text in translation files, not inside components. Format dates, numbers and rupees with the Intl API. Test with long words and different scripts so the layout does not break.
Code review and mentoring: Senior engineers grow the whole team, not just their own code.
Give reviews that are kind, specific and explain why. Write short design notes before big changes. Help juniors by pairing with them and sharing what you learned.
Tasks
Project
A full dashboard app (for example for a small school or clinic) with login, charts, tables with search and paging, two languages, a shared component library, tests and monitoring, deployed and documented in a clear README.
Free resources