https://github.com/sohan10012/web-development-roadmap

💻 Web development roadmap with handpicked free resources for frontend and backend. Ideal for beginners aiming to become full-stack developers from scratch.
https://github.com/sohan10012/web-development-roadmap

bootstrap css figma firebase git github html javascript jwt mern-stack nextjs postman redux sql tailwindcss vercel vite

Last synced: 7 months ago
JSON representation

💻 Web development roadmap with handpicked free resources for frontend and backend. Ideal for beginners aiming to become full-stack developers from scratch.

Host: GitHub
URL: https://github.com/sohan10012/web-development-roadmap
Owner: sohan10012
Created: 2025-05-05T07:20:08.000Z (11 months ago)
Default Branch: main
Last Pushed: 2025-05-05T09:30:26.000Z (11 months ago)
Last Synced: 2025-06-05T16:55:59.292Z (10 months ago)
Topics: bootstrap, css, figma, firebase, git, github, html, javascript, jwt, mern-stack, nextjs, postman, redux, sql, tailwindcss, vercel, vite
Homepage:
Size: 25.4 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

          # 🧭 Web Development Roadmap 2025

This is the roadmap **I personally followed** to become a full-stack web developer.  

It includes **only free** playlists, tutorials, and tools — handpicked and organized for absolute beginners.  

If you're consistent, this roadmap can take you from zero to job-ready in **around 1 year**.

> ✅ All resources are 100% free  

> ⏱️ Designed for students  

> 💻 Covers both frontend and backend

 

## 🧰 System Setup (Prerequisites)

| #  | Tool                   | Purpose            | Link |

|----|------------------------|--------------------|------|

| 1  | `Visual Studio Code`  | Code Editor        | [Download](https://code.visualstudio.com/) |

| 2  | `Git`                 | Version Control    | [Download](https://git-scm.com/) |

| 3  | `Node JS`             | JavaScript Runtime | [Download](https://nodejs.org/en/download) |

| 4  | `npm / Yarn`          | Package Manager    | [`npm`](https://www.npmjs.com/) / [`Yarn`](https://yarnpkg.com/) |

 

## 🎨 Module 1: Frontend Development

### 🔤 HTML & CSS (⏱ 2 Weeks)

| #  | Topic         | Resource     | Link | Time |

|----|---------------|--------------|------|------|

| 1  | HTML Basics   | `Crash Course` | [Watch](https://youtu.be/HcOc7P5BMi4?si=a9CucNhP6u8jGVie) | 2 Days |

| 2  | CSS Basics    | `Crash Course` | [Watch](https://youtu.be/ESnrn1kAD4E?si=H20rr4gb6rqjLKYf) | 1 Week |

| 3  | Docs          | `W3Schools`    | [Explore](https://www.w3schools.com/html/) | Reference |

 

### 📱 Responsive Design (⏱ 5 Days)

| #  | Topic               | Resource       | Link | Time |

|----|---------------------|----------------|------|------|

| 1  | Responsive Layout   | `Tutorial`     | [Watch](https://www.youtube.com/watch?v=srvUrASNj0s) | 3 Days |

| 2  | Certification       | `freeCodeCamp` | [Start](https://www.freecodecamp.org/learn/) | 2 Days |

 

### 🎨 CSS Frameworks (⏱ 1 Week)

| #  | Framework    | Resource       | Link | Time |

|----|--------------|----------------|------|------|

| 1  | Tailwind     | `Crash Course` | [Watch](https://www.youtube.com/playlist?list=PLu0W_9lII9ahwFDuExCpPFHAK829Wto2O) | 5 Days |

| 2  | Bootstrap    | `Full Course`  | [Watch](https://www.youtube.com/watch?v=4sosXZsdy-s) | 2 Days |

 

## ⚙️ JavaScript (Vanilla JS) (⏱ 3 Months)

| #  | Topic        | Resource       | Link | Time |

|----|--------------|----------------|------|------|

| 1  | JavaScript   | `Crash Course` | [Watch](https://youtu.be/lfmg-EJ8gm4?si=G9hTiCPRNWpka_o4) | 3 Months |

| 2  | Full Course  | `freeCodeCamp` | [Start](https://www.freecodecamp.org/learn/) | 3 Months |

 

## ⚛️ React.js (⏱ 1 Month)

| #  | Topic        | Resource         | Link | Time |

|----|--------------|------------------|------|------|

| 1  | Crash Course | `React Overview` | [Watch](https://youtube.com/playlist?list=PL8p2I9GklV46469T9uxQ2ORe4AOzsqLb9&si=9V17WJkW1yfuSUC0) | 2 Weeks |

| 2  | Docs         | `Official Docs`  | [Docs](https://reactjs.org/docs/getting-started.html) | Ongoing |

| 3  | Projects     | `Practice Tasks` | [Watch](https://youtube.com/playlist?list=PL6QREj8te1P6wX9m5KnicnDVEucbOPsqR&si=G9eyDy0H8SbicO0y) | 2 Weeks |

 

### 🔄 Redux (⏱ 3 Days)

| #  | Topic        | Resource      | Link | Time |

|----|--------------|---------------|------|------|

| 1  | Redux Basics | `Crash Course` | [Watch](https://youtube.com/playlist?list=PL8p2I9GklV47TDYUq8RmFzeI9CgOoVgpJ&si=l5vHJDKTRYPdajzT) | 3 Days |

| 2  | Guide        | `Essentials`   | [Docs](https://redux.js.org/tutorials/essentials/part-1-overview-concepts) | 1 Day |

 

## 🖥️ Module 2: Backend Development

### 🟩 Node.js & Express.js (⏱ 1 Month)

| #  | Topic       | Resource       | Link | Time |

|----|-------------|----------------|------|------|

| 1  | Node.js     | `Crash Course` | [Watch](https://youtube.com/playlist?list=PL8p2I9GklV456iofeMKReMTvWLr7Ki9At&si=R3Jzni2e_L5fVcjb) | 3 Weeks |

| 2  | Express.js  | `Crash Course` | [Watch](https://youtube.com/playlist?list=PL8p2I9GklV456iofeMKReMTvWLr7Ki9At&si=R3Jzni2e_L5fVcjb) | 1 Day |

 

### 🗄️ Databases (⏱ 1 Week)

| #  | Database    | Resource        | Link | Time |

|----|-------------|-----------------|------|------|

| 1  | MySQL       | `Full Tutorial` | [Watch](https://youtu.be/hlGoQC332VM?si=3vLRdmc5izU_d8zx) | 3 Days |

| 2  | MongoDB     | `Crash Course`  | [Watch](https://youtu.be/J6mDkcqU_ZE?si=-aCritwJfSkH2g1S) | 2 Days |

| 3  | Certify     | `MongoDB Univ.` | [Site](https://university.mongodb.com/) | Optional |

 

### 🔐 Authentication (⏱ 2 Days)

| #  | Topic       | Resource           | Link | Time |

|----|-------------|--------------------|------|------|

| 1  | JWT Basics  | `Crash Course`     | [Watch](https://www.youtube.com/watch?v=mbsmsi7l3r4) | 1 Day |

| 2  | Guide       | `Best Practices`   | [Read](https://www.freecodecamp.org/news/jwt-authentication-best-practices/) | 1 Day |

 

## 🌐 Module 3: Frameworks & Deployment (⏱ 1 Month)

| #  | Stack       | Resource      | Link | Time |

|----|-------------|---------------|------|------|

| 1  | Next.js     | `Full Course` | [Watch](https://youtube.com/playlist?list=PL8p2I9GklV44sj_Ikp8jQSvwD-m9htnHT&si=YIQ7_7OPvZbxdOHu) | 3 Weeks |

| 2  | Vite        | `Quickstart`  | [Watch](https://youtu.be/VAeRhmpcWEQ?si=52CGwk9zBJt0x1v7) / [Docs](https://vitejs.dev/guide/) | 1 Day |

 

## ⚙️ Dev Tools & Deployment (⏱ 1.5 Weeks)

| #  | Tool        | Resource       | Link | Time |

|----|-------------|----------------|------|------|

| 1  | Git/GitHub  | `Crash Course` | [Watch](https://youtu.be/S7XpTAnSDL4?si=cOSAAomH8VQ8lxjH) | 3 Days |

| 2  | Postman     | `API Testing`  | [Watch](https://youtube.com/playlist?list=PLhW3qG5bs-L9P22XSnRe4suiWL4acXG-g&si=6HSeq0j0moECdeNi) | 2 Days |

| 3  | Firebase    | `Hosting Guide` | [Watch](https://youtu.be/fgdpvwEWJ9M?si=pS9OrAkGNR9VlGtA) / [Docs](https://firebase.google.com/docs/hosting) | 3 Days |

 

## 🧪 Testing & Optimization (⏱ 3 Days)

| #  | Tool         | Purpose              | Link | Time |

|----|--------------|----------------------|------|------|

| 1  | Jest         | `JS Testing`         | [Watch](https://www.youtube.com/watch?v=7r4xVDI2vho) | 1 Day |

| 2  | Lighthouse   | `Website Performance`| [Docs](https://developers.google.com/web/tools/lighthouse) | 1 Day |

| 3  | Core Web Vitals | `Speed Metrics`  | [Guide](https://web.dev/vitals/) | 1 Day |

 

## 🎨 Design & UI Tools (⏱ As Needed)

| #  | Tool         | Purpose      | Link |

|----|--------------|--------------|------|

| 1  | `Figma`      | UI/UX Design | [Figma](https://www.figma.com/) |

| 2  | `Coolors`    | Color Palette| [Coolors](https://coolors.co/) |

| 3  | `FontAwesome`| Icons Library| [Font Awesome](https://fontawesome.com/) |

 

## 🧑‍💻 Final Projects & Practice (⏱ 2+ Weeks)

| #  | Platform          | Type               | Link |

|----|-------------------|--------------------|------|

| 1  | `Frontend Projects` | Project/Course   | [Website](https://www.freecodecamp.org/learn/2022/responsive-web-design/) |

| 2  | `React Projects`   | Projects         | [Youtube](https://youtu.be/0yboGn8errU?si=aCE0haZRONXQDOQ2) |

| 3  | `Nextjs Projects`  | Projects         | [Youtube](https://youtube.com/playlist?list=PLaBeGKL1tOU3Gl_x2EzOMPPpAWq9znZWt&si=_NfzrM0fDH1gUg43) |

| 4  | `100 JS Projects`  | Practice Repo    | [GitHub](https://github.com/bmorelli25/Become-A-Full-Stack-Web-Developer#projects) |

| 5  | `Node.js Projects` | Full Stack Ideas | [GitHub](https://github.com/practical-tutorials/project-based-learning#nodejs) |

 

## 📚 Bonus Resources

| #  | Resource         | Description          | Link |

|----|------------------|----------------------|------|

| 1  | `MDN Docs`       | Best dev documentation | [MDN](https://developer.mozilla.org/) |

| 2  | `JS Deep Dive`   | Detailed JS concepts | [JavaScript Info](https://javascript.info/) |

| 3  | `CS50 Web Dev`   | Harvard's full course | [Course](https://cs50.harvard.edu/web/2020/) |

| 4  | `Career Roadmap` | Choose your tech path | [CareerForge](https://career-forge-pro.vercel.app/) |

| 5  | `Resume Builder` | ATS Friendly         | [CareerForge](https://career-forge-pro.vercel.app/) |

 

## 🤖 AI Code Assistants

| #  | Tool         | Specialty                             | Link |

|----|--------------|----------------------------------------|------|

| 1  | `Blackbox AI` | Real-time code suggestion             | [blackbox.ai](https://www.blackbox.ai) |

| 2  | `Perplexity`  | Research & code documentation         | [perplexity.ai](https://www.perplexity.ai) |

| 3  | `Claude AI`   | Long-context coding & writing         | [claude.ai](https://claude.ai) |

| 4  | `Cursor`      | AI pair-programmer inside VS Code     | [cursor.so](https://www.cursor.so) |

| 5  | `Bolt AI`     | Dev assistant focused on productivity | [boltai.dev](https://boltai.dev) |

---

 

## 🚀 Final Words

You don’t need a degree to become a great developer.  

You need curiosity, consistency, and a little bit of chaos.  

> **Start small, dream big — and code daily.**  

> *Happy Coding! 💻🔥*

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/sohan10012/web-development-roadmap

Awesome Lists containing this project

README