Web Development Roadmap: Frontend + Backend Skills Companies Hire For

Most web development roadmaps are a giant chart with 150 technologies on it. They are accurate in the sense that each item exists, and useless in the sense that nobody needs most of them to get hired. This roadmap is the opposite: a small, ordered set of skills, each paired with a project that proves you have it, plus an explicit list of things to ignore until later.

It is aimed at students and early-career engineers in India who want web developer, frontend, backend or full-stack roles, at startups and product companies as well as services firms. If you already know which side you want, our dedicated frontend roadmap and backend roadmap go deeper on each.

How This Roadmap Works

Each stage has three parts: what to learn, the project that proves it, and an exit test: a concrete thing you should be able to do without a tutorial before moving on. If you cannot pass the exit test, stay at that stage. Moving on with gaps is how people end up at month eight unable to build anything without copying.

Stage 1: HTML and CSS (3 to 4 weeks)

What to learn

• Semantic HTML: headings, lists, nav, main, article, button vs div, forms and input types, labels. Semantics matter for accessibility and are asked in frontend interviews.
• The box model, specificity and the cascade, units (px, rem, %, vw).
• Flexbox and Grid. These two replace almost every layout hack you will find in old tutorials.
• Responsive design: media queries, mobile-first CSS, responsive images.
• Basic accessibility: alt text, focus states, colour contrast, keyboard navigation.

Project: a responsive multi-page site

Rebuild the landing page of a real local business (a coaching centre, a restaurant) from a screenshot, without any CSS framework. It must work at 360px phone width and on desktop, and be navigable with the keyboard.

Exit test: given a screenshot of a card-based layout, you can build it with Flexbox or Grid in under an hour without looking anything up.

Stage 2: JavaScript, Properly (6 to 8 weeks)

This is the stage most people rush, and the one interviews probe hardest. Learn the language itself, not just DOM tricks.

What to learn

• Types, let/const, scope, hoisting, the temporal dead zone.
• Functions, closures, this binding, arrow functions vs regular functions.
• Objects, arrays and their methods (map, filter, reduce), destructuring, spread.
• Prototypes and classes.
• Asynchronous JavaScript: the event loop, callbacks, promises, async/await, microtasks vs macrotasks.
• The DOM: selecting, creating and updating elements, events, event delegation.
• fetch and working with JSON APIs, including error handling.

function debounce(fn, delayMs) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delayMs);
  };
}

async function searchUsers(query) {
  const res = await fetch(`/api/users?q=${encodeURIComponent(query)}`);
  if (!res.ok) throw new Error(`Request failed: ${res.status}`);
  return res.json();
}

const input = document.querySelector('#search');
input.addEventListener('input', debounce(async (e) => {
  try {
    const users = await searchUsers(e.target.value);
    renderResults(users);   // your rendering function
  } catch (err) {
    showError(err.message);
  }
}, 300));

Notice what this snippet exercises: closures (the timer variable survives between calls), rest/spread parameters, promises with async/await, the fact that fetch does not reject on HTTP 404 or 500 (you must check res.ok), and URL encoding. Each of these is a common interview question. "Implement debounce" in particular is asked very frequently in Indian frontend interviews.

Project: a vanilla JS app with an API

A movie or book search app using a public API, with debounced search, loading and error states, pagination and favourites saved in localStorage. No framework.

Exit test: explain what this prints and why: console.log(1); setTimeout(() => console.log(2)); Promise.resolve().then(() => console.log(3)); console.log(4); (Answer: 1, 4, 3, 2, because promise callbacks run as microtasks before timer callbacks.)

Stage 3: Git, the Terminal and Tooling (1 to 2 weeks, then ongoing)

• Git: commits, branches, merge vs rebase, resolving conflicts, pull requests. See our git guide.
• npm: package.json, dependencies vs devDependencies, scripts, lock files.
• A bundler/dev server such as Vite: what it does, not its internals.
• Browser DevTools: the Elements, Console, Network and Performance tabs. Debugging with breakpoints instead of console.log everywhere.
• Linting and formatting with ESLint and Prettier.

Exit test: you can resolve a merge conflict in the terminal and explain what is in a package-lock.json and why it is committed.

Stage 4: A Frontend Framework (6 to 8 weeks)

React has the largest job market in India, so it is the default recommendation. Angular is common in enterprise and services companies; Vue is used by some startups. Learn one well.

What to learn (React)

• Components, props, state, and thinking in components.
• Hooks: useState, useEffect (and when not to use it), useRef, useMemo, useCallback, custom hooks.
• Lists and keys, controlled forms, lifting state up.
• Routing (React Router or a framework's router).
• Data fetching with loading and error states; a library like TanStack Query once you understand the manual way.
• State management: start with built-in state and context; learn Redux Toolkit or Zustand when a project needs shared state.
• TypeScript basics: start using it in this stage.

Project: a multi-page SPA

An expense tracker or job-application tracker with routing, forms with validation, filters and sorting, charts, persisted state and a dark mode. Use TypeScript. For interview angles, see React and JavaScript interview questions.

Exit test: build a paginated, filterable table component from scratch in about 90 minutes. That is essentially a frontend machine coding round.

Stage 5: Backend and APIs (6 to 8 weeks)

Node.js with Express (or Fastify/NestJS) is the natural choice if you already know JavaScript. Java with Spring Boot and Python with Django or FastAPI are equally hireable, and Spring Boot in particular is in heavy demand in Indian enterprise and fintech. Pick one.

What to learn

• HTTP properly: methods, status codes, headers, cookies, CORS.
• REST API design: resources, pagination, filtering, idempotency, versioning. See REST API interview questions.
• Request validation and centralized error handling.
• Middleware, logging, configuration with environment variables.

import express from 'express';
const app = express();
app.use(express.json());

const tasks = new Map();   // replaced by a database in Stage 6
let nextId = 1;

app.post('/api/tasks', (req, res) => {
  const { title, dueDate } = req.body ?? {};
  if (typeof title !== 'string' || title.trim() === '') {
    return res.status(400).json({ error: 'title is required' });
  }
  const task = { id: nextId++, title: title.trim(), dueDate: dueDate ?? null, done: false };
  tasks.set(task.id, task);
  res.status(201).location(`/api/tasks/${task.id}`).json(task);
});

app.get('/api/tasks/:id', (req, res) => {
  const task = tasks.get(Number(req.params.id));
  if (!task) return res.status(404).json({ error: 'not found' });
  res.json(task);
});

app.listen(3000, () => console.log('listening on 3000'));

Small details here are what interviewers look at: 400 for invalid input, 201 with a Location header for creation, 404 for missing resources, and input trimmed and validated before storage.

Project: a REST API for your Stage 4 app

Move your frontend's data to a real API. Add pagination, filtering and validation, and document the API (an OpenAPI spec or a clear README).

Stage 6: Databases (4 to 6 weeks)

Learn SQL first, with PostgreSQL or MySQL. Even teams using MongoDB expect you to understand relational modelling, and SQL is directly tested in many interviews. Our database comparison explains when each fits.

• Schema design, primary and foreign keys, one-to-many and many-to-many relationships.
• Joins, aggregation, subqueries, window functions.
• Indexes: what they speed up, what they cost, how to read EXPLAIN. See database indexing explained.
• Transactions and why they matter for things like payments and inventory.
• An ORM or query builder (Prisma, Sequelize, Drizzle, JPA, SQLAlchemy) after you can write raw SQL.
• Avoiding the N+1 query problem.

Exit test: design the schema for a simple e-commerce store (users, products, orders, order items) and write a query for "top 5 products by revenue in the last 30 days."

Stage 7: Authentication, Testing and Deployment (4 to 6 weeks)

This stage separates portfolio projects that look like tutorials from ones that look like real software.

Capstone project

Combine everything into one full-stack application with real users: auth, roles, a relational database, file uploads, email notifications, tests, CI and a public URL. Good themes for India: a coaching institute batch manager, a society maintenance tracker, a small shop's inventory and billing app, or an event ticketing app with UPI payment links. Our guide on side projects that impress interviewers explains what makes a project stand out.

Stage 8: Specialize

After one complete full-stack build, choose a direction. Generalists are hired at startups; product companies hire for a side.

What to Skip (For Now)

Skipping is a skill. These are all real technologies, but learning them early costs time without improving your hireability.

Realistic Timelines

These are planning estimates, not guarantees. The best signal that you are on track is the exit tests: if you can pass them without a tutorial, you are progressing.

Turning Projects Into a Portfolio That Gets Calls

By Stage 7 you will have seven or eight projects. Do not list all of them. Recruiters and hiring managers spend very little time per resume, so curate.

What each listed project needs

• A live URL that works on a phone. Broken demo links are worse than none.
• A README with a one-line description, a screenshot or short GIF, the architecture, how to run it locally, and known limitations.
• Clean commit history over weeks, not one giant commit the night before applying.
• One measurable detail: Lighthouse score improved from 62 to 94, p95 API latency under 120 ms with an index, 40 active users from a college club. Only real numbers you measured.
• A decision you can defend: why PostgreSQL over MongoDB, why server-side sessions over JWT, why you paginate with cursors. Interviewers ask "why" far more than "what". See how to explain projects in interviews.

A personal portfolio website is optional. A well-organized GitHub profile with pinned repositories and good READMEs does the same job, and a recruiter is more likely to click through to a deployed app than to read a portfolio site's About page.

What Web Developer Interviews Actually Test

Interview processes vary by company, so confirm with your recruiter. Typical patterns in India:

Questions that come up repeatedly

• JavaScript: closures, this, event loop ordering, promises and Promise.all, implement debounce/throttle, deep clone, polyfills for map or bind.
• HTML/CSS: semantic tags, specificity, Flexbox vs Grid, centering, responsive layouts. See HTML and CSS interview questions.
• React: reconciliation and keys, why components re-render, useEffect dependency pitfalls, memoization, state management choices.
• Backend: REST design, status codes, authentication flows, SQL queries, indexing, caching basics.
• Machine coding: build a todo app with filters, an autocomplete, a star rating, a kanban board, or a small backend service in 90 to 120 minutes. Our machine coding round guide covers the evaluation criteria.
• "What happens when you type a URL in the browser?" The classic question that spans DNS, TCP, TLS, HTTP, rendering and caching.

Web development rewards building. Learn each stage just deeply enough to pass its exit test, ship the project that proves it, and resist the urge to collect technologies. Eight stages and eight finished projects will put you ahead of most applicants who have watched every course and finished nothing.

Frequently Asked Questions

Pranjal Jain

Ex-Microsoft SDE · IIT Kanpur · Founder of Prepflix. Helps engineers crack startup and product company interviews across India.