Discovery Phase
Test if coding is for you. Start with basic scripting to feel the dopamine rush of solving problems.
Topics
- JavaScript and/or Python basics
- Basic algorithms and problem-solving
- CodeCademy free tracks
- FreeCodeCamp tutorials
Tools & Technologies
💡 Pro Tips
- If you don't enjoy solving small problems, coding might not be for you - and that's okay!
Frontend Fundamentals
Master the building blocks of the web. Start with CodePen, then move to VS Code.
Topics
- HTML structure and semantics
- CSS styling and layouts
- DOM manipulation with vanilla JavaScript
- VS Code setup and extensions
Milestone
Build your first frontend-only project with HTML, CSS, and vanilla JS
Tools & Technologies
💡 Pro Tips
- Start in CodePen for quick experiments, then transition to VS Code
Backend Basics
Learn to build APIs and server-side logic with Express.js.
Topics
- Express.js setup and basics
- RESTful API endpoints (GET, POST, PUT, DELETE)
- API testing with Thunder Client
- Professional testing with Postman
Milestone
Create a backend-only project with multiple API endpoints
Tools & Technologies
Database Integration
Add persistence to your applications with MongoDB.
Topics
- MongoDB Cloud setup
- Mongoose ODM basics
- CRUD operations
- Data modeling basics
Milestone
Enhance your backend with database storage and retrieval
Tools & Technologies
First Full Stack Project
Combine everything: build a movie app with TheMovieDB API.
Topics
- Frontend-backend connection
- User authentication (simple)
- Favorites feature with persistence
- Deployment on Vercel and Render
Milestone
Complete movies app with signin/signup, favorites, and filters
💡 Pro Tips
- NO React yet!
- NO TypeScript yet!
- NO AI assistance - learn the fundamentals first!
React & Modern Frontend
Level up with React and modern CSS frameworks.
Topics
- React components and JSX
- Hooks (useState, useEffect, etc.)
- State management (Redux/Zustand)
- Tailwind CSS basics
- UI libraries (Material-UI, Chakra)
Tools & Technologies
💡 Pro Tips
- Still no TypeScript - master JavaScript first!
- Use AI sparingly
React Full Stack Project
Rebuild your movie app with a React frontend.
Topics
- React component architecture
- Advanced state management
- Responsive design with Tailwind
- Deployment on Vercel
Milestone
Deploy a polished React + Express full stack application
💡 Pro Tips
- Practice DSA 1 hour daily on Codewars throughout your journey
Mobile Development
Expand to mobile with React Native and Expo.
Topics
- React Native fundamentals
- Expo workflow
- Cross-platform development
- Mobile-specific UX patterns
Milestone
Mobile version of your movies app
Tools & Technologies
Ambitious MVP Project
Build something you're passionate about. Start using AI to ship faster.
Topics
- Project planning and architecture
- Advanced features implementation
- AI-assisted development
- Community showcase preparation
Milestone
Present your project on Discord
💡 Pro Tips
- Now you can start leveraging AI, but don't overdose!
Advanced Skills
Master TypeScript, explore new frameworks, and build professional habits.
Topics
- TypeScript for frontend and backend
- CI/CD with GitHub Actions
- Advanced frameworks (NestJS, FastAPI, Django)
- ORMs (Prisma, Drizzle) with PostgreSQL
- Supabase integration
- shadcn/ui components
- Vue.js as alternative to React
- Next.js full-stack framework
Tools & Technologies
💡 Pro Tips
- TypeScript will come naturally - you'll love it!
- Focus on building, not tutorials
Lifetime Learning
The real journey begins. Learn by doing, leverage AI as your pair programmer.
Topics
- Backend languages (Go, Rust)
- DevOps and cloud (AWS, Docker, K8s)
- System design and architecture
- Native mobile (Swift, Kotlin)
- Less trendy stacks for better job prospects (Java/Angular, .NET)
💡 Pro Tips
- Smart move: Learn enterprise stacks (Java/Angular, .NET)
- Smart move: Specialize in DevOps/Cloud
- Smart move: Native iOS development with Swift
- Not smart: Ruby (declining demand)
Remember: There's No Ultimate Roadmap
Keep in mind that there's no ultimate roadmap, especially now with AI tools and new agentic AI coding workflows. The way we learn is evolving rapidly.
This roadmap is JavaScript-focused, but you could easily add Python on the backend with FastAPI or Django. With AI assistance, picking up new technologies and languages has never been easier.
The key principles remain: break problems down, be curious, be consistent, and be patient. Like anything in life, this will take time!
Want to accelerate your learning with personalized guidance?
Join the Mentorship ProgramLearn this roadmap with Matt's direct support and expertise
Ready to Accelerate Your Learning?
Get personalized mentorship from Matt to master the fundamentals of web development. Follow this roadmap with direct guidance, motivation, and expert advice at every step.