Free Roadmap

Become a Full-Stack Web Developer from scratch

No degree needed to start. Go from a blank page to shipping full-stack apps in about five months — built around real projects you can show employers.

22
weeks · ~10–12 hrs/wk
5
portfolio projects
4
phases · zero to deploy
₹0
free resources only
The one rule

Learn → build it → deploy it

Reading docs without building is wasted time. Every concept below ships as something live on the internet. Put every project on GitHub and deploy it free.

Where This Leads

Career outcomes

Roles you can apply for

Frontend DeveloperFull-Stack DeveloperBackend DeveloperWeb Developer

Who it suits: You like building things people can see and use, and enjoy fast, visible feedback.

₹4–10 LPA
typical starting range in India

Indicative 2026 starting ranges in India — actual pay varies widely by city, company, and skill. Salary is an outcome of skill and a strong project portfolio, not a guarantee.

The Roadmap

Four phases, step by step

0

Foundations

Weeks 1–4

Structure and style the web — HTML, CSS, and Git.

Week 1

HTML fundamentals

Semantic tags, forms, links, images, accessibility.

Week 2

CSS & layout

The box model, Flexbox, and CSS Grid.

Week 3

Responsive design

Media queries, variables, transitions, mobile-first.

Week 4

Git & tooling

Git, GitHub, VS Code; deploy a static site free.

1

JavaScript

Weeks 5–9

Make pages interactive with real JavaScript.

Week 5

JS basics

Variables, functions, arrays, objects, loops.

Week 6

DOM & events

Manipulate the page, handle clicks and input.

Week 7

Async & APIs

Promises, fetch, JSON, calling real APIs.

Week 8

Modern JS

ES6+, modules, npm, array methods.

Week 9 · Project ▶

Interactive app

Build a weather or to-do app using an API.

2

Frontend with React

Weeks 10–15

Build modern single-page apps with React.

Week 10

React basics

Components, JSX, props, rendering.

Week 11

State & hooks

useState, useEffect, lifting state.

Week 12

Routing & forms

React Router, controlled inputs, validation.

Week 13

Data fetching

Call APIs, handle loading and error states.

Week 14

Styling & UI

Tailwind or a component library.

Week 15 · Project ▶

React SPA

Ship a movie or product browser app.

3

Backend & Full-Stack

Weeks 16–22

Add a server, a database, and deploy the whole thing.

Week 16

Node & Express

Servers, routes, building REST APIs.

Week 17

Databases

SQL vs NoSQL; MongoDB or PostgreSQL.

Week 18

CRUD & auth

JWT, sessions, password hashing.

Week 19

Full-stack wiring

Connect the React front end to your API.

Week 20

Deployment

Vercel/Render, env vars, basic CI.

Week 21

Testing & polish

Error handling, validation, cleanup.

Week 22 · Capstone ▶

Full-stack app

Ship a complete deployed MERN/PERN app.

Build a Portfolio

Five projects that get you hired

Projects beat certificates. Do them in order — each builds on the last. Put every one on GitHub with a clear README.

Start here

1 · Personal Portfolio Site

Pure HTML/CSS/JS. Your first live site — deploy it on GitHub Pages.

JavaScript

2 · Interactive App

A weather or to-do app that fetches live data from a public API.

React

3 · React Single-Page App

A movie or product browser with routing, search, and API data.

In demand

4 · Full-Stack CRUD App

A notes or blog app with login, a database, and REST API.

Capstone

5 · Deployed Full-Stack App

A complete MERN/PERN app, live on the internet with auth.

Learn It

Learning resources

Click any resource to open it — free and well-known first, then build something with it.

Universal (any field): roadmap.sh · freeCodeCamp · GitHub Student Pack · Coursera

Do This Today

Your first step (takes 30 minutes)

1. Install VS Code

Download the free editor and the Live Server extension. That's your whole setup.

2. Get a GitHub account

github.com — host your code and deploy sites free with GitHub Pages.

3. Build one HTML page

Make a simple 'About Me' page today. That's step one — you've started.

Not sure which path is right for you?

PathAhead helps you choose the career that fits you — with guidance built for Intermediate students. Explore every roadmap in one place.

This roadmap is a free educational resource. Timelines are a guide — everyone learns at a different pace. Referenced resources (freeCodeCamp, The Odin Project, MDN Web Docs, JavaScript.info, Full Stack Open) are for learning only and are not affiliated with PathAhead.