Full-Stack Web Development — 36-Week Roadmap for

Beginners
A week-by-week plan to go from zero to job-ready, designed for ~1.5–2 focused hours per
day. Total: ~9 months. Adjust pace as needed — consistency matters more than speed.
The one rule: Build, don't just watch. Follow a tutorial once, then rebuild it from scratch
without looking.

PHASE 1 — Web Foundations (Weeks 1–6)

Goal: Build static web pages by hand with no frameworks.

Week Focus What to learn Build this

1 HTML basics Tags, structure, headings, links, images, A simple "about me" page
lists, forms

2 CSS basics Selectors, colors, fonts, box model, Style your about-me page
spacing

3 CSS layout Flexbox, Grid, positioning A responsive landing page

4 Responsive Media queries, mobile-first design Make page work on phone +

design desktop

5 Git & GitHub Commits, branches, push/pull, Put all projects on GitHub
repositories

6 Project week Combine everything A personal portfolio site

Free resources: freeCodeCamp "Responsive Web Design" certification · The Odin Project
(Foundations) · MDN Web Docs (reference)

PHASE 2 — JavaScript Properly (Weeks 7–14)

Goal: Make pages interactive. This is the phase most beginners rush — don't.
 Week Focus What to learn Build this

7 JS fundamentals Variables, data types, operators, Small logic exercises

conditionals

8 Functions & Functions, arrays, objects, for/while A simple calculator

loops loops

9 DOM Selecting elements, events, changing A to-do list app

manipulation the page

10 ES6+ features Arrow functions, destructuring, spread, Refactor old code

template literals

11 Async JavaScript Promises, async/await, the event loop —

12 APIs & fetch Calling public APIs, handling JSON A weather app

13 More practice localStorage, error handling A quiz app

14 Project week Combine everything A movie-search app using a

public API

Free resources: [Link] · freeCodeCamp "JavaScript Algorithms and Data

Structures" · The Odin Project (JavaScript)

PHASE 3 — React (Weeks 15–22)

Goal: Learn the most in-demand frontend framework in India's job market.
 Week Focus What to learn Build this

15 React basics Components, JSX, props Reusable card components

16 State & events useState, handling events, forms An interactive counter/form

17 Lists & effects Mapping lists, useEffect, fetching Rebuild your to-do app in
data React

18 Hooks deeper useEffect dependencies, custom Rebuild weather app in React

hooks

19 Routing React Router, multiple pages A multi-page site

20 State Context API, prop drilling solutions —

management

21 Styling Tailwind CSS or CSS modules Style a full app

22 Project week Combine everything A movie/recipe browser app

Free resources: Official React docs ([Link] — start here) · Scrimba "Learn React" ·
Tailwind CSS docs

PHASE 4 — Backend with [Link] (Weeks 23–30)

Goal: The "full" in full-stack — build servers, APIs, and databases.
 Week Focus What to learn Build this

23 [Link] basics What Node is, npm, modules Simple scripts

24 [Link] Routes, requests, responses, A basic API server

middleware

25 REST APIs CRUD operations, REST design, A notes API

Postman

26 MongoDB Documents, collections, Mongoose Connect API to a database

27 SQL basics Tables, queries, joins (PostgreSQL) Practice SQL queries

28 Authentication JWT, password hashing (bcrypt), An auth system

login/signup

29 API best Validation, error handling, environment Secure your API

practices variables

30 Project week Combine everything A full backend with auth +

database

Free resources: [Link] + Express docs · MongoDB University (free courses) ·

freeCodeCamp "Back End Development" · SQLBolt (SQL practice)

PHASE 5 — Full-Stack Projects (Weeks 31–36)

Goal: Connect React + Node + database into real, deployed apps for your portfolio.

Week Focus What to do

31–32 Full-stack project A blog with user login (React + Node + MongoDB)
#1

33– Full-stack project A task manager OR e-commerce product catalog with accounts
34 #2

35 Deployment Deploy frontend (Vercel) + backend (Render/Railway), connect

them live

36 Polish & portfolio Clean READMEs, live demo links, update portfolio site & resume

Free resources: Vercel docs · Render docs · "Deploy MERN app" tutorials on YouTube
RUNNING ALONGSIDE (Throughout all 36 weeks)
Data Structures & Algorithms — 30 mins, 3x per week Indian companies test DSA in
interviews even for web roles. Start light:
Arrays, strings, hashmaps, basic sorting/searching
Solve easy problems on LeetCode or HackerRank
Aim for ~100 easy/medium problems by the end

Git/GitHub — every single week Push every project. Keep your "contribution graph" green.
Recruiters look at it.
Deploy everything A live URL beats a screenshot every time. Make each major project
accessible online.

END STATE (after ~9 months)

By the time your friend hits final semester, he'll have:
A polished portfolio website
4–5 deployed projects (2–3 full-stack)
An active GitHub history
Basic DSA for interviews

That's enough to apply for internships and junior full-stack / MERN developer roles.

COMMON TRAPS TO AVOID

1. Tutorial hell — watching endlessly without coding. Build after every tutorial.
2. Jumping to frameworks too early — weak JavaScript = constant struggle in React.
3. Skipping CSS — "I'll learn it later" never happens; layout pain is real.
4. Not deploying — projects nobody can open don't impress recruiters.
5. Ignoring Git — start day one, not month six.

The mindset: It's normal to feel lost and confused — that is the learning. Every
developer felt the same. Push through the confusing weeks; that's where the growth
happens.