Intro
This is a roadmap for modern web development technologies that I use in my tech stack. At each point, I'll provide the best resources I've come across that are available for completely free. If you want to learn more about the roadmap in terms of concepts, visit the frontend and backend roadmaps by roadmap.sh.
Why this tech stack?
Here's the deal: I didn't pick these this tech stack because the tools sounded fancy - I chose it because the tools are in demand, practical, and effective for modern development. According to the 2024 Stack Overflow Developer Survey, JavaScript and TypeScript continue to dominate among professional developers. The following technologies and frameworks are becoming an industry standard for web development in 2025.
Frontend
HTML and CSS
HTML and CSS are the pillars of web development. HTML provides the structure you see on the webpage (text, images, buttons), while CSS defines the colors, sizes, layouts, and style. It can take 1 - 2 months to learn HTML and CSS.
HTML:
CSS:
JavaScript
JavaScript is a dynamic, interpreted programming language known for enabling interactive and dynamic content on web pages. It is one of the three core technologies of the internet, working alongside HTML and CSS.
- 100 second intro by FireShip
- 48m beginner course by Programming With Mosh
- 100 second intro by FireShip
- 30 projects playlist by GreatStack
React
ReactJS is a component-based JavaScript library used to build dynamic and interactive user interfaces. This is the most commonly used frontend technology for web development.
Git and GitHub
GitHub is a developer platform that allows developers to create, store, manage, and share their code. It uses Git to provide distributed version control and GitHub itself provides access control, bug tracking, software feature requests, and CI/CD.
TypeScript
TypeScript is a high-level programming language that adds static typing with optional type annotations to JavaScript. The main benefit of TypeScript is that it can highlight unexpected behavior in your code, lowering the chance of bugs.
Next.js
Next.js is an open-source React framework for building full-stack web applications. It extends the capabilities of React by providing a structured approach and built-in features that simplify common web development tasks and enhance performance. With Next.js, you can also learn to implement TailwindCSS and component libraries like ShadCN.
Vercel
Vercel is a cloud platform designed to simplify web development, specifically for building, deploying, and scaling web applications and static websites.
Frontend projects
Backend
Node.js and Express
Node.js is the JavaScript runtime environment, that acts as an engine to power your web application, while ExpressJS is a framework built on top of Node. These are the basics needed to get started in backend development.
MERN stack
The MERN stack is a popular JavaScript-based framework for building full-stack web applications. It combines MongoDB, Express.js, React, and Node.js to provide a cohesive development environment.
Other databases
Databases:
- PostgreSQL with Prisma ( 100 second intro by FireShip)
Backend-as-a-Service (BaaS) platforms offer developers tools to build and scale applications without managing complex backend infrastructure. Baas:
- Firebase ( 100 second intro by FireShip)
- Supabase ( 100 second intro by FireShip)
Clerk / BetterAuth
Clerk and BetterAuth are both user authentication solutions. Clerk is a hosted, all-in-one platform that provides pre-built UI components and handles user management, security, and more. BetterAuth, on the other hand, is a more flexible, open-source, and framework-agnostic library that gives developers more control over their authentication flow and data storage.
Stripe
Stripe is a payment processing platform, enabling websites and applications to accept and manage online payments securely.
Full-stack projects
You can find a range of full-stack project tutorials on YouTube, have a look and see which projects may interest you. Notable mentions to JavaScript Mastery, Web Dev Simplified, and Jan Marshal for the hundreds of hours of quality full-stack project tutorials.
Closing notes
Thats it! Took quite a while to get those links together... most of these videos I've watched before and want to share it with you. Just note that my tech stack isn't "the best". There is no perfect tech stack. Of course choose your tech stack based on your own research and needs. Hope this was helpful.