frontend

Frontend Roadmap

Escape tutorial hell with a step-by-step plan that connects mindset, fundamentals, modern tooling, and portfolio-worthy projects from HTML skeletons to deployed Next.js apps.

Mindset-first learning loopsHTML, CSS, and JavaScript masteryComponent-driven React and Next.jsTesting, deployment, and storytelling

React

Next.js

Tailwind CSS

TypeScript

Supabase

Updated Nov 13, 2025Designed to feel calm, precise, and familiar.

Sections: 10
Milestones: 32
Toolkit perks: 7
Progress ready: Sign in

Prerequisites

Commit to the Understand -> Plan -> Divide loop before typing code.
Comfortable installing tools, running terminal commands, and versioning work with Git/GitHub.
Ready to balance DSA prep with visible frontend projects you can demo to recruiters.

What you will ship

Ship six portfolio-grade projects across HTML, CSS, JavaScript, React, testing, and Next.js.
Craft an e-commerce frontend with global state, Tailwind styling, and automated tests.
Deploy a high-performance Next.js blog/portfolio with live links you can share.

Reference library

Curated starting points

The Odin Project - Foundations to Full Stack JavaScriptCourse

F-

freeCodeCamp - Responsive Web DesignCourse

MDN - Learn Web DevelopmentDocs

Frontend Mentor - Practice ProjectsWorkshop

Free tool stack

References

Visual Studio Code

ProductivityFree

Your cockpit for everything - set up autosave, extensions, and workspaces for every project.

Thoughtfully selected for this track.Visit

Git & GitHub

InfrastructureFree

Version control is your time machine; push every milestone and publish repositories.

Thoughtfully selected for this track.Visit

ESLint (VS Code Extension)

EducationFree

A strict senior dev in your editor - catch bugs and anti-patterns before you run code.

Thoughtfully selected for this track.Visit

Prettier (VS Code Extension)

ProductivityFree

An obsessively consistent formatter that removes style debates and keeps diffs clean.

Thoughtfully selected for this track.Visit

Live Server

InfrastructureFree

Instant HTML/CSS reloads so you see changes without refreshing manually.

Thoughtfully selected for this track.Visit

GitLens

ProductivityFree

Visualise commit history and authorship inline to learn from every line of code.

Thoughtfully selected for this track.Visit

Material Icon Theme

ProductivityFree

Readable icons for the VS Code explorer so projects stay organised at a glance.

Thoughtfully selected for this track.Visit

OutlineTOC

Before You Write a Single <tag> (The 0-to-1 Mindset)Section
Phase 1: The Skeleton (HTML)Section
Phase 2: The Skin (CSS)Section
Phase 3: The Brains (JavaScript)Section
Phase 4: The Factory (React)Section
Phase 5: Managing Complexity (Advanced React)Section
Phase 6: Bulletproofing Your App (Testing)Section
Phase 7: The "Next" Level (Next.js)Section
Phase 8: Shipping It (Deployment)Section
You are not a Tard, You are a DeveloperSection
- How to Escape Tutorial Hell Forever
- Your Resume Is Now Your Portfolio

Before You Write a Single <tag> (The 0-to-1 Mindset)

Start from mindset, not syntax: celebrate your CS foundation, embrace a repeatable problem-solving loop, and assemble a free professional tool stack.

Milestone 1Before You Write a Single <tag> (The 0-to-1 Mindset)Core

Hello, Tard: A Humane Introduction

The placements grind is real; this roadmap pairs that reality with a calmer, creative path into frontend.

Recognise the DSA and LeetCode pressure while choosing to build visual products alongside it.
Use this humane guide as your exit from tutorial hell by shipping after every study session.
Create breathing room to experiment so you learn to think like a developer, not just copy solutions.

Milestone 2Before You Write a Single <tag> (The 0-to-1 Mindset)Core

Your B.Tech Superpower (No, Really)

Leverage the degree you already earned - your classes map directly to the frontend world.

Logic: conditional rendering and component composition grow from the if/else fundamentals you know.
Data structures: arrays, objects, and maps feed list rendering, caching, and derived state.
Architecture: the client-server model explains every API request your UI will ever make.

Milestone 3Before You Write a Single <tag> (The 0-to-1 Mindset)Core

The Real Prerequisite: The Problem-Solving Mindset

Adopt a three-step loop that keeps you out of tutorial hell and grounds every project.

Understand: restate the feature in plain English to a friend or rubber duck until it feels obvious.
Plan: outline inputs, transformations, and outputs as comments before writing implementation code.
Divide: break the problem into ten micro-tasks and stack wins from the smallest possible step.

Milestone 4Before You Write a Single <tag> (The 0-to-1 Mindset)Core

Your (Completely Free) Tool Stack

Set up a professional dev cave so every project feels production-ready from day one.

Install Visual Studio Code and enable autosave plus format-on-save.
Create a GitHub account and treat Git commits as your personal time machine.
Extend VS Code with ESLint, Prettier, Live Server, GitLens, and Material Icon Theme to catch issues early.

Suggested resources

DocsVisual Studio Code - Getting Started

VideoGit & GitHub Crash Course

ToolESLint VS Code Extension

ToolPrettier VS Code Extension

ToolLive Server Extension

ToolGitLens - Git supercharged

ToolMaterial Icon Theme

Phase 1: The Skeleton (HTML)

Learn the nouns of the web so every CSS or JavaScript layer has a clean, semantic foundation.

Milestone 5Phase 1: The Skeleton (HTML)Core

How It Connects

HTML is the skeleton every site stands on; it collaborates with CSS for style and JavaScript for behaviour.

Treat HTML as structure only - no logic, just meaningful tags that describe content.
Understand how browsers parse markup into the DOM and why that matters for performance.
Remember: clean markup today unlocks accessible, testable experiences later.

Milestone 6Phase 1: The Skeleton (HTML)Core

Core Concepts

Master the building blocks that repeat in every project from landing pages to dashboards.

Anatomy of an element: opening tag, content, closing tag, and attributes like alt.
Use the base page structure: <!DOCTYPE html>, <html>, <head>, and <body>.
Reach for essential tags - headings, paragraphs, links, images, lists, and forms.
Build accessible forms with <label>, semantic inputs, and helpful defaults.

Suggested resources

DocsMDN - Introduction to HTML

CoursefreeCodeCamp - Responsive Web Design

VideoHTML Crash Course for Beginners

Milestone 7Phase 1: The Skeleton (HTML)Core

Ship Project 1: Odin-Style Recipe Page

Build multiple static pages to prove you can structure content without relying on CSS.

Understand: one index page links to three recipe pages with titles, images, ingredients, and steps.
Plan: outline the required tags in comments before writing markup.
Divide: create the folder, scaffold index.html, then ship each recipe page one at a time.

Suggested resources

CourseThe Odin Project - Foundations: Recipes

Phase 2: The Skin (CSS)

Transform raw markup into responsive, beautiful UI with modern CSS layouts and design fundamentals.

Milestone 8Phase 2: The Skin (CSS)Core

How It Connects

CSS is the adjective layer that styles your HTML skeleton and adapts it across devices.

Choose external stylesheets so presentation stays separated from structure.
Internalise the cascade and specificity rules to avoid impossible overrides.
Design with the box model - content, padding, border, margin - so spacing feels intentional.

Milestone 9Phase 2: The Skin (CSS)Core

Core Concepts

Master modern layout primitives and responsive strategies that mirror professional UI work.

Use Flexbox for one-dimensional alignment and CSS Grid for two-dimensional layouts.
Create fluid typography with clamp() and REM-based scales.
Respect users with prefers-reduced-motion when adding transitions or animations.
Ship responsive experiences with media queries and container queries.

Suggested resources

Courseweb.dev - Learn CSS Layout

VideoKevin Powell - CSS Course

WorkshopFlexbox Froggy

WorkshopCSS Grid Garden

Milestone 10Phase 2: The Skin (CSS)Core

Ship Project 2: Google Homepage Clone

Recreate a familiar interface pixel-for-pixel to cement layout and alignment skills.

Understand: reproduce the layout with logo, search bar, buttons, header, and footer.
Plan: sketch Flexbox zones for vertical centering and horizontal spacing.
Divide: structure HTML, style the search bar, add interactions, then polish typography and spacing.

Suggested resources

CourseThe Odin Project - Google Homepage Project

Phase 3: The Brains (JavaScript)

Bring interfaces to life with state, events, async data, and tooling that mirrors modern frontend stacks.

Milestone 11Phase 3: The Brains (JavaScript)Core

How It Connects

JavaScript turns static markup into interactive experiences that respond to user intent.

Refresh variables, data types, conditionals, loops, functions, objects, and arrays.
Manipulate the DOM with querySelector, classList, and event listeners.
Handle user input and browser events like click, submit, and change gracefully.

Suggested resources

DocsMDN - JavaScript Guide

CoursefreeCodeCamp - JavaScript Algorithms

CourseThe Odin Project - Full Stack JavaScript

Milestone 12Phase 3: The Brains (JavaScript)Core

Asynchronous JavaScript & APIs

Learn how to fetch data without freezing the UI and make API calls feel effortless.

Embrace promises and async/await to keep code readable while waiting for network responses.
Use the Fetch API for GET and POST calls, checking response.ok for errors.
Read and shape JSON data before rendering; display loading and error states for users.

Suggested resources

DocsMDN - Fetch API

DocsPublic APIs Directory

DocsOpenWeatherMap API

Milestone 13Phase 3: The Brains (JavaScript)Core

JavaScript Tooling (The "Modern" Part)

Adopt the tooling used in production so moving to frameworks later feels natural.

Install Node.js to unlock npm, scripts, and local servers.
Use npm to manage dependencies and scripts for linting, building, and testing.
Bootstrap projects with Vite for instant dev servers and hot module replacement.

Suggested resources

ToolNode.js Downloads

DocsVite - Getting Started

VideoLearn Vite in 1 Hour

Milestone 14Phase 3: The Brains (JavaScript)Core

Ship Project 3: Weather App

Fetch real data, handle loading states, and render results from user input.

Understand: a form accepts a city, fetches weather, and prints description plus temperature.
Plan: wire a submit handler that prevents default behaviour and calls an API function.
Divide: start with hardcoded city data, connect the input, then render results in the DOM.

Suggested resources

DocsOpenWeatherMap API

ToolWeather Icons

Phase 4: The Factory (React)

Move from manual DOM updates to component-driven UIs that scale effortlessly.

Milestone 15Phase 4: The Factory (React)Core

How It Connects

React lets you think in reusable components fed by state and props instead of scattered DOM calls.

Write JSX to blend markup and logic in a single file.
Break interfaces into components and pass data with props.
Use hooks like useState and useEffect to manage memory and side effects.

Suggested resources

DocsReact Docs - Learn React

CourseReact Router - Getting Started

Milestone 16Phase 4: The Factory (React)Core

Routing & Composition

Create multi-page experiences without full-page reloads.

Use React Router to map URLs to components and keep navigation client side.
Build a shared <Navbar> and persistent layouts that wrap your routes.
Model project data as arrays and map them to reusable <ProjectCard> components.

Suggested resources

CourseThe Odin Project - React Curriculum

CourseReact Router Tutorial

Milestone 17Phase 4: The Factory (React)Core

Ship Project 4: Multi-Page Blog or Portfolio

Prove you can architect routes, components, and props like a production React app.

Understand: deliver Home, About, and Projects routes with a persistent navbar.
Plan: generate project data array and map over it to render reusable cards.
Divide: scaffold with Vite, wire the router, build pages, then style and deploy a static build.

Suggested resources

DocsVite - React Template

Phase 5: Managing Complexity (Advanced React)

Solve prop drilling, scale shared state, and style like a modern product team.

Milestone 18Phase 5: Managing Complexity (Advanced React)Core

The Problem: Prop Drilling

Understand why passing state through layers of components becomes brittle as apps grow.

Identify where state should live and when lifting state creates friction.
Spot pain points: duplicated props, tight coupling, and hard-to-follow data flow.
Decide when global state is required versus simple local state.

Milestone 19Phase 5: Managing Complexity (Advanced React)Core

The Solutions: State Management

Compare Context, Zustand, and Redux Toolkit and pick the lightest tool that works.

Use React Context for low-frequency global data like auth or theme.
Reach for Zustand to share frequently changing state like carts or filters.
Adopt Redux Toolkit when project size or collaboration needs strict structure.

Suggested resources

DocsReact Docs - Passing Data with Context

DocsZustand Documentation

DocsRedux Toolkit Essentials

Milestone 20Phase 5: Managing Complexity (Advanced React)Core

Styling in React: Tailwind CSS

Keep styles consistent and component-scoped with utility classes.

Configure Tailwind in your React or Next.js project and embrace utility-first styling.
Extract reusable component variants using composition or libraries like shadcn/ui.
Use design tokens and guidelines so the system stays cohesive as it scales.

Suggested resources

DocsTailwind CSS - Installation Guide

VideoBuild UI - Tailwind Crash Course

Milestone 21Phase 5: Managing Complexity (Advanced React)Core

Ship Project 5: Full E-Commerce Store Clone

Combine state management, routing, styling, and APIs into a single cohesive product.

Understand: list products, show detail pages, maintain a shared cart, and surface totals.
Plan: choose Zustand (or Redux Toolkit) for cart state, React Router for routes, and Tailwind for styling.
Divide: scaffold data fetching, build product cards, implement cart actions, then polish loading and empty states.

Suggested resources

DocsFake Store API

DocsZustand Patterns

Phase 6: Bulletproofing Your App (Testing)

Protect yourself from regressions by testing behaviour the way real users experience it.

Milestone 22Phase 6: Bulletproofing Your App (Testing)Core

How It Connects

Testing is a safety net that lets you refactor and ship faster without fear.

Know the testing pyramid: unit, integration, and end-to-end coverage.
Write tests from the user's perspective instead of poking component internals.
Automate checks so every commit proves critical flows still behave.

Suggested resources

DocsTesting Library - Guiding Principles

DocsJest - Getting Started

Milestone 23Phase 6: Bulletproofing Your App (Testing)Core

The Workflow: TDD in Practice

Adopt the Red -> Green -> Refactor loop so tests drive the implementation.

Write a failing test that describes the behaviour you want.
Implement the minimal code to make it pass, then refactor confidently.
Mix component tests with integration and visual checks for critical journeys.

Suggested resources

VideoKent C. Dodds - Write Tests Like a User

DocsPlaywright - Test TypeScript

ToolChromatic - Visual Testing

Milestone 24Phase 6: Bulletproofing Your App (Testing)Core

Ship Tests for Project 5

Backfill your e-commerce app with automated confidence before adding new features.

Understand: cover the cart flow - adding items updates totals and the navbar count.
Plan: write unit tests for components, integration tests for flows, and smoke tests for routing.
Divide: configure Jest plus React Testing Library, add Playwright for top journeys, then run in CI.

Suggested resources

CourseThe Odin Project - Testing React Apps

Phase 7: The "Next" Level (Next.js)

Learn how Next.js blends React with server rendering, server components, and routing that scale to production.

Milestone 25Phase 7: The "Next" Level (Next.js)Core

How It Connects

Next.js turns React into a full-stack framework with server-side rendering, RSCs, and file-system routing.

Differentiate between client-side rendering and server-side rendering for performance and SEO.
Adopt the App Router to compose layouts, server components, and streaming UI.
Know when to mark components with "use client" for interactivity.

Suggested resources

CourseNext.js Learn Course

DocsNext.js App Router Docs

Milestone 26Phase 7: The "Next" Level (Next.js)Core

React vs Next.js & Server Components

Blend React's UI model with Next.js features so you only ship the JavaScript you need.

Understand how React Server Components keep heavy logic on the server.
Structure folders to define routes, layouts, and shared UI without custom routers.
Use API routes or server actions to keep data fetching close to the UI.

Suggested resources

VideoReact Server Components Explained

Milestone 27Phase 7: The "Next" Level (Next.js)Core

Ship Project 6: High-Performance Next.js Blog

Transform your React portfolio into a server-rendered Next.js experience.

Understand: recreate Home, About, and Projects routes using the App Router and shared layout.
Plan: determine which components stay server-side and which need "use client" for interactivity.
Divide: scaffold with create-next-app, migrate content, add metadata, then deploy to Vercel.

Suggested resources

Docscreate-next-app

Phase 8: Shipping It (Deployment)

Turn code on your laptop into real links with CI/CD habits that future teams expect.

Milestone 28Phase 8: Shipping It (Deployment)Core

How It Connects

Deployment is the moment your roadmap becomes visible to recruiters and collaborators.

Understand Continuous Integration versus Continuous Deployment and how they support each other.
Use GitHub workflows or platform defaults to lint, test, and build on every push.
Treat preview URLs as feedback loops, not final destinations.

Suggested resources

CoursefreeCodeCamp - CI/CD for Beginners

Milestone 29Phase 8: Shipping It (Deployment)Core

Core Platforms: Netlify vs Vercel

Choose the host that fits each project - SPAs love Netlify, Next.js loves Vercel.

Deploy static and SPA projects (weather app, e-commerce frontend) to Netlify with build hooks.
Deploy your Next.js blog or portfolio to Vercel for zero-config SSR and analytics.
Wire environment variables, custom domains, and preview comments for polished demos.

Suggested resources

VideoDeploy Vite to Netlify

VideoDeploy Next.js to Vercel

Milestone 30Phase 8: Shipping It (Deployment)Core

Ship Your Live Portfolio

Publish every flagship project so your resume becomes a set of clickable links.

Understand: host the weather app and e-commerce frontend on Netlify with custom domains.
Plan: deploy the Next.js blog to Vercel, configure analytics, and capture build logs.
Divide: set up CI checks, push to main, verify production URLs, and add them to your resume.

You are not a Tard, You are a Developer

Close the loop with habits that keep you shipping long after the roadmap ends.

Milestone 31You are not a Tard, You are a DeveloperCore

How to Escape Tutorial Hell Forever

Adopt the 1-to-1 rule: every tutorial earns a small self-initiated project.

Swap each guided project for a self-directed remix the very next day.
Google errors, ask questions, and document solutions - this is real learning, not failure.
Celebrate progress logs so you see momentum even when things feel slow.

Milestone 32You are not a Tard, You are a DeveloperCore

Your Resume Is Now Your Portfolio

Let the work speak louder than bullet points by showcasing live links and repositories.

Lead with shipped projects, not generic skill lists.
Describe outcomes: performance wins, accessibility improvements, and tests you added.
Keep iterating - every improvement is another signal that you think like a developer.

Before You Write a Single <tag> (The 0-to-1 Mindset)

Start from mindset, not syntax: celebrate your CS foundation, embrace a repeatable problem-solving loop, and assemble a free professional tool stack.

Milestone 1Before You Write a Single <tag> (The 0-to-1 Mindset)Core

Hello, Tard: A Humane Introduction

The placements grind is real; this roadmap pairs that reality with a calmer, creative path into frontend.

Recognise the DSA and LeetCode pressure while choosing to build visual products alongside it.
Use this humane guide as your exit from tutorial hell by shipping after every study session.
Create breathing room to experiment so you learn to think like a developer, not just copy solutions.

Milestone 2Before You Write a Single <tag> (The 0-to-1 Mindset)Core

Your B.Tech Superpower (No, Really)

Leverage the degree you already earned - your classes map directly to the frontend world.

Logic: conditional rendering and component composition grow from the if/else fundamentals you know.
Data structures: arrays, objects, and maps feed list rendering, caching, and derived state.
Architecture: the client-server model explains every API request your UI will ever make.

Milestone 3Before You Write a Single <tag> (The 0-to-1 Mindset)Core

The Real Prerequisite: The Problem-Solving Mindset

Adopt a three-step loop that keeps you out of tutorial hell and grounds every project.

Understand: restate the feature in plain English to a friend or rubber duck until it feels obvious.
Plan: outline inputs, transformations, and outputs as comments before writing implementation code.
Divide: break the problem into ten micro-tasks and stack wins from the smallest possible step.

Milestone 4Before You Write a Single <tag> (The 0-to-1 Mindset)Core

Your (Completely Free) Tool Stack

Set up a professional dev cave so every project feels production-ready from day one.

Install Visual Studio Code and enable autosave plus format-on-save.
Create a GitHub account and treat Git commits as your personal time machine.
Extend VS Code with ESLint, Prettier, Live Server, GitLens, and Material Icon Theme to catch issues early.

Suggested resources

DocsVisual Studio Code - Getting Started

VideoGit & GitHub Crash Course

ToolESLint VS Code Extension

ToolPrettier VS Code Extension

ToolLive Server Extension

ToolGitLens - Git supercharged

ToolMaterial Icon Theme