💛 Built with love by Rohit — If CodeSmash helped you, share it with your friends. That's all the fuel I need to keep building 🚀 • 💛 Built with love by Rohit — If CodeSmash helped you, share it with your friends. That's all the fuel I need to keep building 🚀 • 💛 Built with love by Rohit — If CodeSmash helped you, share it with your friends. That's all the fuel I need to keep building 🚀 • 💛 Built with love by Rohit — If CodeSmash helped you, share it with your friends. That's all the fuel I need to keep building 🚀 💛 Built with love by Rohit — If CodeSmash helped you, share it with your friends. That's all the fuel I need to keep building 🚀 • 💛 Built with love by Rohit — If CodeSmash helped you, share it with your friends. That's all the fuel I need to keep building 🚀 • 💛 Built with love by Rohit — If CodeSmash helped you, share it with your friends. That's all the fuel I need to keep building 🚀 • 💛 Built with love by Rohit — If CodeSmash helped you, share it with your friends. That's all the fuel I need to keep building 🚀
🌐
🗺️ Learning Roadmap

Web Development Skill Path

A complete, structured path from zero to full-stack. Learn HTML, CSS, JavaScript, React, and Next.js with curated resources at every step.

Jump to:
5Levels
19Topics
47Resources
🌱

Beginner

3 topics

Start from absolute zero. Learn how browsers, HTML structure, and CSS styling work — the building blocks of every website.

1

HTML Fundamentals

HTML is the skeleton of every web page. Learn tags, semantic elements, forms, links, and how to structure content correctly.

▶HTML Full Course — freeCodeCampYouTube▶HTML in 100 Seconds — FireshipYouTube📚MDN HTML ReferenceDocs
2

CSS Fundamentals

Learn how to style websites — colors, fonts, the box model, flexbox, grid, and responsive design with media queries.

▶HTML and CSS Full Course — SuperSimpleDevYouTube▶CSS Flexbox in 20 MinutesYouTube▶CSS Grid — Kevin PowellYouTube📚MDN CSS ReferenceDocs
3

How the Web Works

Understand what happens when you type a URL — DNS, HTTP, browsers, servers, and client-server architecture.

▶How the Internet Works — CS50YouTube▶HTTP Crash Course — Traversy MediaYouTube
📘

Basics

4 topics

Add interactivity to your pages. JavaScript is the programming language of the web — master its fundamentals before moving to frameworks.

1

JavaScript Fundamentals

Variables, data types, loops, functions, arrays, objects, and DOM manipulation. These are essential before touching any framework.

▶JavaScript Full Course — SuperSimpleDevYouTube▶JavaScript in 100 Seconds — FireshipYouTube📚MDN JavaScript GuideDocs
2

ES6+ Modern JavaScript

Arrow functions, destructuring, spread/rest, template literals, optional chaining, async/await, and modules. Modern JS syntax you'll see everywhere.

▶ES6 Tutorial — Traversy MediaYouTube▶JavaScript Async/Await ExplainedYouTube
3

Fetching Data with APIs

Make HTTP requests using fetch and axios. Understand REST APIs, JSON, HTTP methods (GET/POST), and how to handle responses and errors.

▶Fetch API Crash Course — Traversy MediaYouTube▶REST API Concepts ExplainedYouTube📚Axios DocsDocs
4

Git & GitHub Basics

Version control is non-negotiable. Learn init, commit, push, pull, branches, and how to collaborate using GitHub.

▶Git & GitHub Full Course — freeCodeCampYouTube📄Git Cheat Sheet — GitHubArticle
⚡

Intermediate

4 topics

Build real, component-driven apps. Learn React — the most popular frontend library — and understand state management, hooks, and routing.

1

React Fundamentals

Components, JSX, props, state, event handling, and the component lifecycle. Learn to think in React.

▶React Full Course — SuperSimpleDevYouTube▶React in 100 Seconds — FireshipYouTube📚React Official DocsDocs
2

React Hooks

useState, useEffect, useRef, useMemo, useCallback, useContext — the modern React way. No class components required.

▶React Hooks Explained — Web Dev SimplifiedYouTube📚useEffect — React DocsDocs
3

React Router & SPAs

Build multi-page single-page applications with React Router. Handle navigation, URL params, nested routes, and protected routes.

▶React Router v6 Crash Course — Web Dev SimplifiedYouTube📚React Router DocsDocs
4

Tailwind CSS

A utility-first CSS framework that lets you build beautiful, responsive UIs fast without ever leaving your HTML/JSX.

▶Tailwind CSS Full Course — Dave GrayYouTube📚Tailwind CSS Official DocsDocs📄Tailwind CSS Cheat SheetArticle
🚀

Advanced

4 topics

Level up to production-grade development. Learn Next.js, server-side rendering, authentication, and how to deploy real apps.

1

Next.js App Router

Next.js is the production framework for React. Learn the App Router, server components, server actions, layouts, loading states, and streaming.

▶Next.js Full Course — NetNinjaYouTube📚Next.js Official DocsDocs▶Next.js App Router explained — FireshipYouTube
2

Authentication & Authorization

Secure your apps. Learn JWT, session-based auth, NextAuth.js, Firebase Auth, and protecting routes on both client and server.

▶NextAuth.js Crash CourseYouTube📚Firebase Auth DocsDocs
3

Databases & Backend Integration

Connect your frontend to real databases. Learn Firebase/Firestore, Prisma with PostgreSQL, and how to write API routes in Next.js.

▶Firebase & Firestore Full GuideYouTube▶Prisma Full Course — Traversy MediaYouTube📚Next.js Route Handlers DocsDocs
4

Deployment & DevOps Basics

Ship your apps to the world. Learn Vercel deployment, custom domains, environment variables management, and CI/CD basics.

📚Deploy Next.js to Vercel — Official GuideDocs📚Environment Variables in Next.jsDocs
👑

Pro

4 topics

Think like a senior engineer. Learn performance, scalability, design systems, state management at scale, and advanced patterns.

1

Performance Optimization

Core Web Vitals, lazy loading, code splitting, image optimization, caching strategies, and how to score 100 on Lighthouse.

📄Web Performance — web.devArticle📚Next.js Performance DocsDocs
2

State Management at Scale

When React state is not enough — Zustand, Redux Toolkit, React Query, and SWR for server state. Know when to use what.

▶Zustand — Beginner's TutorialYouTube📄React Query Tutorial — TkDodoArticle
3

TypeScript for React & Next.js

Type your props, API responses, state, and utilities. TypeScript eliminates an entire class of bugs and makes large codebases maintainable.

▶TypeScript for Beginners — Net NinjaYouTube📚TypeScript Docs — HandbookDocs
4

Testing Frontend Apps

Write unit tests with Jest, component tests with React Testing Library, and end-to-end tests with Playwright or Cypress.

▶React Testing Library Crash CourseYouTube📚Playwright DocsDocs
🚀

More roadmaps will be added soon…

DSA, System Design, DevOps, Machine Learning and more are in the works!