{"id":28372881,"url":"https://github.com/sohan10012/web-development-roadmap","last_synced_at":"2025-08-08T18:43:07.068Z","repository":{"id":291535700,"uuid":"977917866","full_name":"sohan10012/Web-Development-Roadmap","owner":"sohan10012","description":"πŸ’» Web development roadmap with handpicked free resources for frontend and backend. Ideal for beginners aiming to become full-stack developers from scratch.","archived":false,"fork":false,"pushed_at":"2025-05-05T09:30:26.000Z","size":26,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-05T16:55:59.292Z","etag":null,"topics":["bootstrap","css","figma","firebase","git","github","html","javascript","jwt","mern-stack","nextjs","postman","redux","sql","tailwindcss","vercel","vite"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sohan10012.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-05T07:20:08.000Z","updated_at":"2025-05-05T13:56:30.000Z","dependencies_parsed_at":"2025-05-05T08:29:25.914Z","dependency_job_id":"87e6447b-4766-48a3-898f-5eb98aba7175","html_url":"https://github.com/sohan10012/Web-Development-Roadmap","commit_stats":null,"previous_names":["sohan10012/web-development-roadmap"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sohan10012/Web-Development-Roadmap","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohan10012%2FWeb-Development-Roadmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohan10012%2FWeb-Development-Roadmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohan10012%2FWeb-Development-Roadmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohan10012%2FWeb-Development-Roadmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sohan10012","download_url":"https://codeload.github.com/sohan10012/Web-Development-Roadmap/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohan10012%2FWeb-Development-Roadmap/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261874398,"owners_count":23223111,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","css","figma","firebase","git","github","html","javascript","jwt","mern-stack","nextjs","postman","redux","sql","tailwindcss","vercel","vite"],"created_at":"2025-05-29T17:13:28.426Z","updated_at":"2025-06-25T12:31:27.682Z","avatar_url":"https://github.com/sohan10012.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🧭 Web Development Roadmap 2025\n\nThis is the roadmap **I personally followed** to become a full-stack web developer. \nIt includes **only free** playlists, tutorials, and tools β€” handpicked and organized for absolute beginners. \nIf you're consistent, this roadmap can take you from zero to job-ready in **around 1 year**.\n\n\u003e βœ… All resources are 100% free \n\u003e ⏱️ Designed for students \n\u003e πŸ’» Covers both frontend and backend\n\n\u0026nbsp;\n\n## 🧰 System Setup (Prerequisites)\n\n| # | Tool | Purpose | Link |\n|----|------------------------|--------------------|------|\n| 1 | `Visual Studio Code` | Code Editor | [Download](https://code.visualstudio.com/) |\n| 2 | `Git` | Version Control | [Download](https://git-scm.com/) |\n| 3 | `Node JS` | JavaScript Runtime | [Download](https://nodejs.org/en/download) |\n| 4 | `npm / Yarn` | Package Manager | [`npm`](https://www.npmjs.com/) / [`Yarn`](https://yarnpkg.com/) |\n\n\u0026nbsp;\n\n## 🎨 Module 1: Frontend Development\n\n### πŸ”€ HTML \u0026 CSS (⏱ 2 Weeks)\n\n| # | Topic | Resource | Link | Time |\n|----|---------------|--------------|------|------|\n| 1 | HTML Basics | `Crash Course` | [Watch](https://youtu.be/HcOc7P5BMi4?si=a9CucNhP6u8jGVie) | 2 Days |\n| 2 | CSS Basics | `Crash Course` | [Watch](https://youtu.be/ESnrn1kAD4E?si=H20rr4gb6rqjLKYf) | 1 Week |\n| 3 | Docs | `W3Schools` | [Explore](https://www.w3schools.com/html/) | Reference |\n\n\u0026nbsp;\n\n### πŸ“± Responsive Design (⏱ 5 Days)\n\n| # | Topic | Resource | Link | Time |\n|----|---------------------|----------------|------|------|\n| 1 | Responsive Layout | `Tutorial` | [Watch](https://www.youtube.com/watch?v=srvUrASNj0s) | 3 Days |\n| 2 | Certification | `freeCodeCamp` | [Start](https://www.freecodecamp.org/learn/) | 2 Days |\n\n\u0026nbsp;\n\n### 🎨 CSS Frameworks (⏱ 1 Week)\n\n| # | Framework | Resource | Link | Time |\n|----|--------------|----------------|------|------|\n| 1 | Tailwind | `Crash Course` | [Watch](https://www.youtube.com/playlist?list=PLu0W_9lII9ahwFDuExCpPFHAK829Wto2O) | 5 Days |\n| 2 | Bootstrap | `Full Course` | [Watch](https://www.youtube.com/watch?v=4sosXZsdy-s) | 2 Days |\n\n\u0026nbsp;\n\n## βš™οΈ JavaScript (Vanilla JS) (⏱ 3 Months)\n\n| # | Topic | Resource | Link | Time |\n|----|--------------|----------------|------|------|\n| 1 | JavaScript | `Crash Course` | [Watch](https://youtu.be/lfmg-EJ8gm4?si=G9hTiCPRNWpka_o4) | 3 Months |\n| 2 | Full Course | `freeCodeCamp` | [Start](https://www.freecodecamp.org/learn/) | 3 Months |\n\n\u0026nbsp;\n\n## βš›οΈ React.js (⏱ 1 Month)\n\n| # | Topic | Resource | Link | Time |\n|----|--------------|------------------|------|------|\n| 1 | Crash Course | `React Overview` | [Watch](https://youtube.com/playlist?list=PL8p2I9GklV46469T9uxQ2ORe4AOzsqLb9\u0026si=9V17WJkW1yfuSUC0) | 2 Weeks |\n| 2 | Docs | `Official Docs` | [Docs](https://reactjs.org/docs/getting-started.html) | Ongoing |\n| 3 | Projects | `Practice Tasks` | [Watch](https://youtube.com/playlist?list=PL6QREj8te1P6wX9m5KnicnDVEucbOPsqR\u0026si=G9eyDy0H8SbicO0y) | 2 Weeks |\n\n\u0026nbsp;\n\n### πŸ”„ Redux (⏱ 3 Days)\n\n| # | Topic | Resource | Link | Time |\n|----|--------------|---------------|------|------|\n| 1 | Redux Basics | `Crash Course` | [Watch](https://youtube.com/playlist?list=PL8p2I9GklV47TDYUq8RmFzeI9CgOoVgpJ\u0026si=l5vHJDKTRYPdajzT) | 3 Days |\n| 2 | Guide | `Essentials` | [Docs](https://redux.js.org/tutorials/essentials/part-1-overview-concepts) | 1 Day |\n\n\u0026nbsp;\n\n## πŸ–₯️ Module 2: Backend Development\n\n### 🟩 Node.js \u0026 Express.js (⏱ 1 Month)\n\n| # | Topic | Resource | Link | Time |\n|----|-------------|----------------|------|------|\n| 1 | Node.js | `Crash Course` | [Watch](https://youtube.com/playlist?list=PL8p2I9GklV456iofeMKReMTvWLr7Ki9At\u0026si=R3Jzni2e_L5fVcjb) | 3 Weeks |\n| 2 | Express.js | `Crash Course` | [Watch](https://youtube.com/playlist?list=PL8p2I9GklV456iofeMKReMTvWLr7Ki9At\u0026si=R3Jzni2e_L5fVcjb) | 1 Day |\n\n\u0026nbsp;\n\n### πŸ—„οΈ Databases (⏱ 1 Week)\n\n| # | Database | Resource | Link | Time |\n|----|-------------|-----------------|------|------|\n| 1 | MySQL | `Full Tutorial` | [Watch](https://youtu.be/hlGoQC332VM?si=3vLRdmc5izU_d8zx) | 3 Days |\n| 2 | MongoDB | `Crash Course` | [Watch](https://youtu.be/J6mDkcqU_ZE?si=-aCritwJfSkH2g1S) | 2 Days |\n| 3 | Certify | `MongoDB Univ.` | [Site](https://university.mongodb.com/) | Optional |\n\n\u0026nbsp;\n\n### πŸ” Authentication (⏱ 2 Days)\n\n| # | Topic | Resource | Link | Time |\n|----|-------------|--------------------|------|------|\n| 1 | JWT Basics | `Crash Course` | [Watch](https://www.youtube.com/watch?v=mbsmsi7l3r4) | 1 Day |\n| 2 | Guide | `Best Practices` | [Read](https://www.freecodecamp.org/news/jwt-authentication-best-practices/) | 1 Day |\n\n\u0026nbsp;\n\n## 🌐 Module 3: Frameworks \u0026 Deployment (⏱ 1 Month)\n\n| # | Stack | Resource | Link | Time |\n|----|-------------|---------------|------|------|\n| 1 | Next.js | `Full Course` | [Watch](https://youtube.com/playlist?list=PL8p2I9GklV44sj_Ikp8jQSvwD-m9htnHT\u0026si=YIQ7_7OPvZbxdOHu) | 3 Weeks |\n| 2 | Vite | `Quickstart` | [Watch](https://youtu.be/VAeRhmpcWEQ?si=52CGwk9zBJt0x1v7) / [Docs](https://vitejs.dev/guide/) | 1 Day |\n\n\u0026nbsp;\n\n## βš™οΈ Dev Tools \u0026 Deployment (⏱ 1.5 Weeks)\n\n| # | Tool | Resource | Link | Time |\n|----|-------------|----------------|------|------|\n| 1 | Git/GitHub | `Crash Course` | [Watch](https://youtu.be/S7XpTAnSDL4?si=cOSAAomH8VQ8lxjH) | 3 Days |\n| 2 | Postman | `API Testing` | [Watch](https://youtube.com/playlist?list=PLhW3qG5bs-L9P22XSnRe4suiWL4acXG-g\u0026si=6HSeq0j0moECdeNi) | 2 Days |\n| 3 | Firebase | `Hosting Guide` | [Watch](https://youtu.be/fgdpvwEWJ9M?si=pS9OrAkGNR9VlGtA) / [Docs](https://firebase.google.com/docs/hosting) | 3 Days |\n\n\u0026nbsp;\n\n## πŸ§ͺ Testing \u0026 Optimization (⏱ 3 Days)\n\n| # | Tool | Purpose | Link | Time |\n|----|--------------|----------------------|------|------|\n| 1 | Jest | `JS Testing` | [Watch](https://www.youtube.com/watch?v=7r4xVDI2vho) | 1 Day |\n| 2 | Lighthouse | `Website Performance`| [Docs](https://developers.google.com/web/tools/lighthouse) | 1 Day |\n| 3 | Core Web Vitals | `Speed Metrics` | [Guide](https://web.dev/vitals/) | 1 Day |\n\n\u0026nbsp;\n\n## 🎨 Design \u0026 UI Tools (⏱ As Needed)\n\n| # | Tool | Purpose | Link |\n|----|--------------|--------------|------|\n| 1 | `Figma` | UI/UX Design | [Figma](https://www.figma.com/) |\n| 2 | `Coolors` | Color Palette| [Coolors](https://coolors.co/) |\n| 3 | `FontAwesome`| Icons Library| [Font Awesome](https://fontawesome.com/) |\n\n\u0026nbsp;\n\n## πŸ§‘β€πŸ’» Final Projects \u0026 Practice (⏱ 2+ Weeks)\n\n| # | Platform | Type | Link |\n|----|-------------------|--------------------|------|\n| 1 | `Frontend Projects` | Project/Course | [Website](https://www.freecodecamp.org/learn/2022/responsive-web-design/) |\n| 2 | `React Projects` | Projects | [Youtube](https://youtu.be/0yboGn8errU?si=aCE0haZRONXQDOQ2) |\n| 3 | `Nextjs Projects` | Projects | [Youtube](https://youtube.com/playlist?list=PLaBeGKL1tOU3Gl_x2EzOMPPpAWq9znZWt\u0026si=_NfzrM0fDH1gUg43) |\n| 4 | `100 JS Projects` | Practice Repo | [GitHub](https://github.com/bmorelli25/Become-A-Full-Stack-Web-Developer#projects) |\n| 5 | `Node.js Projects` | Full Stack Ideas | [GitHub](https://github.com/practical-tutorials/project-based-learning#nodejs) |\n\n\u0026nbsp;\n\n## πŸ“š Bonus Resources\n\n| # | Resource | Description | Link |\n|----|------------------|----------------------|------|\n| 1 | `MDN Docs` | Best dev documentation | [MDN](https://developer.mozilla.org/) |\n| 2 | `JS Deep Dive` | Detailed JS concepts | [JavaScript Info](https://javascript.info/) |\n| 3 | `CS50 Web Dev` | Harvard's full course | [Course](https://cs50.harvard.edu/web/2020/) |\n| 4 | `Career Roadmap` | Choose your tech path | [CareerForge](https://career-forge-pro.vercel.app/) |\n| 5 | `Resume Builder` | ATS Friendly | [CareerForge](https://career-forge-pro.vercel.app/) |\n\n\u0026nbsp;\n\n## πŸ€– AI Code Assistants\n\n| # | Tool | Specialty | Link |\n|----|--------------|----------------------------------------|------|\n| 1 | `Blackbox AI` | Real-time code suggestion | [blackbox.ai](https://www.blackbox.ai) |\n| 2 | `Perplexity` | Research \u0026 code documentation | [perplexity.ai](https://www.perplexity.ai) |\n| 3 | `Claude AI` | Long-context coding \u0026 writing | [claude.ai](https://claude.ai) |\n| 4 | `Cursor` | AI pair-programmer inside VS Code | [cursor.so](https://www.cursor.so) |\n| 5 | `Bolt AI` | Dev assistant focused on productivity | [boltai.dev](https://boltai.dev) |\n\n---\n\n\u0026nbsp;\n\n## πŸš€ Final Words\n\nYou don’t need a degree to become a great developer. \nYou need curiosity, consistency, and a little bit of chaos. \n\n\u003e **Start small, dream big β€” and code daily.** \n\u003e *Happy Coding! πŸ’»πŸ”₯*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsohan10012%2Fweb-development-roadmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsohan10012%2Fweb-development-roadmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsohan10012%2Fweb-development-roadmap/lists"}