From zero to full-stack — a practical, project-based path
No fluff, no detours. This roadmap focuses on building things from day one. Each phase ends with a real project you can add to your portfolio.
Start here if you're new to programming.
- CS50's Python — Harvard (free)
- Problem solving with Codewars — start at easiest (8 kyu)
Python's clean syntax lets you focus on logic, not syntax. You'll switch to JavaScript soon — the transition is easy.
- Responsive Web Design
- Flexbox & CSS Grid
- Mobile-first design
- DOM manipulation
- Events & async (fetch, promises)
- Build 3 small JS projects
- 🔗 App Ideas Collection (start with Tier 1)
- The Odin Project — Frontend or Full Stack track
- 🔗 theodinproject.com
- Best free structured curriculum for web dev
Build a personal portfolio website with HTML, CSS, and JavaScript. Deploy it on GitHub Pages.
Coming from The Odin Project, you'll cover this naturally.
- Node.js basics
- Express.js — build a REST API
- Databases: SQL basics + one project connecting frontend to backend
- Authentication (sessions, JWT)
Build a full-stack app — examples: task manager, blog, notes app — with a database.
Understanding design makes you a better developer.
- Figma fundamentals
- Design systems & components
- Wireframing & prototyping
- Google UX Design Professional Certificate
- 🔗 Coursera — Google UX Design
- Covers research, wireframes, prototypes, and user testing
You can build AND design your own projects. This is rare and very attractive to employers and universities.
Quality over quantity. 2-3 strong projects beat 10 weak ones.
| Project | Stack | Difficulty |
|---|---|---|
| Portfolio Website | HTML/CSS/JS | ⭐ |
| To-Do App | HTML/CSS/JS | ⭐⭐ |
| Weather App (API) | JS + Fetch | ⭐⭐ |
| Blog Platform | Node + Express + DB | ⭐⭐⭐ |
| E-commerce UI | React + Figma design | ⭐⭐⭐⭐ |
| Tool | Purpose |
|---|---|
| VS Code | Code editor |
| Git & GitHub | Version control |
| Chrome DevTools | Debugging |
| Figma | UI Design |
| Codewars | Problem solving |
| Vercel / GitHub Pages | Deployment |
| Resource | What You'll Learn | Free? |
|---|---|---|
| CS50 Python | Programming foundations | ✅ |
| The Odin Project | Full web dev curriculum | ✅ |
| freeCodeCamp | HTML/CSS | ✅ |
| Codewars | Problem solving | ✅ |
| App Ideas | JS Project ideas | ✅ |
| Figma Tutorial | UI Design basics | ✅ |
| Google UX Design | UX Design | 💰 (audit free) |
- Phase 1 — Programming Foundations
- Phase 2 — Frontend (HTML, CSS, JS)
- Phase 3 — Backend
- Phase 4 — UX/UI Basics
- Phase 5 — 2 portfolio projects live
Have a better resource or project idea? Open a PR. This roadmap is community-driven.
Made with ❤️ by a CS student building in public