Web Dev Roadmap

I've provided a step-by-step roadmap of the tools and services I learned throughout my journey.

Discussion
Resources
4 min read

Intro

This is the Web Dev Roadmap: a concise learning path for the tools, languages and services that I've learned and tested. Each section explains the tools, why they matter, and example project ideas to help you practice and build. Looking for a concept-based roadmap? roadmap.sh has you covered.

Why this tech stack?

I learnt these tools because they are practical, in demand, and effective for modern development. They offer:

  • Strong job demand
  • Scalability and familiarity
  • Effective developer experiences

For all of these tools and technologies, there's countless great tutorials and courses on YouTube that you can learn from for free.

Frontend vs Backend

Frontend development involves the things you see. It's how the user interface (UI) organizes what you see on a website. It's the design, layout, colors, text, and the little animations that we can see.

Backend development involves the brains of a website. It's the login, the payments, and the stuff that happens behind the scene to make a website work.

Let's compare a website to a restaurant. The frontend is what the customers interact with; the dining room and the menu. The backend is the the recipes, ingredients, and the hard work of the chef's to make your food. Both sides work together to give you a good dining experience. When the waiter takes your order, they send your order (frontend) to the kitchen (backend) to be prepared. The backend sends the food back to the waiter before it reaches your table.

Restaurant frontend vs backend

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 concepts to learn:

  • Basic elements and structure
  • Semantic elements
  • Element attributes
  • Forms
  • Tables
  • Accessibility

CSS concepts to learn:

  • Syntax (selectors, properties, values)
  • Ways to apply CSS
  • The Box model
  • Typography
  • Layouts (flexbox, grids)
  • Responsive design
  • Basic animations

JavaScript

JavaScript is a dynamic, interpreted programming language that enables interactive and dynamic content on web pages. It is one of the three core technologies of the internet, working alongside HTML and CSS.

Starter JavaScript concepts to learn:

  • Fundamentals (Variables, data types, operators, control flow, loops, functions, scope)
  • Data structure (arrays, objects)
  • DOM manipulation
  • Events (handling forms and clicks)

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. React applications are built using self-contained, reusable units called components.

Starter React concepts to learn:

  • JSX syntax
  • Components
  • Hooks (useState, useEffect)
  • State management

Git and GitHub

GitHub is a developer platform that allows developers to create, store, manage, and share their code. It uses Git to provide version control. These technologies are a must-have for every developer.

Git fundamentals:

  • Version control concepts
  • Git installation and configuration
  • Basic git workflow

GitHub fundamentals:

  • Repositories
  • Pushing and pulling
  • Collaborative workflow

TypeScript

TypeScript is a high-level programming language that adds static typing with optional type annotations to JavaScript. It can help you find unexpected behavior in your code, lowering the chance of bugs.

Typescript fundamentals:

  • Basic types
  • Functions
  • Interfaces and types

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.

Next.js basic concepts:

  • Project structure
  • Routing and file navigation
  • Rendering and data fetching
  • Optimization
  • SEO

With Next.js, you can also learn to implement TailwindCSS styling and component libraries like ShadCN.

Vercel

Vercel is a cloud platform designed for deploying and scaling web applications and static websites. It gives you the ability to put your websites on the internet for free.

Vercel concepts to learn:

  • Deployment (Link to GitHub)
  • Observability and analytics

Example frontend projects

My recommendation is that you start by going through some project tutorials. There are some great frontend tutorials by JavaScript Mastery. Look around for projects that are interesting, and make sure they are recent! Tutorials older than 6 months can involve old dependencies that are no longer supported, and you'll have to fix things yourself.

Backend

Node.js and Express

Node.js and Express.js are fundamental technologies in modern web development, particularly for building the backend of web applications.

Node.js and Express concepts to learn:

  • Asynchronous JavaScript
  • Node.js environment
  • Express framework (routing, requests & responses)
  • Building APIs

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. MongoDB is an open-source, document-oriented NoSQL database that stores data in documents called BSON.

MERN stack fundementals:

  • Database integration
  • Implementing APIs
  • Developer practices
  • Error handling
  • Deployment

Other databases

PostgreSQL is a powerful object-relational database management system (RDBMS) known for its reliability, flexibility, and extensive feature set. It organizes data into structured tables with columns and rows and uses the Structured Query Language (SQL) to manage it.

Backend-as-a-Service (BaaS) platforms offer developers tools to build and scale applications without managing complex backend infrastructure. Platforms like Firebase, Supabase, and Appwrite can handle authentication, storage, and the database all in one place.

Database concepts to learn:

  • Relational Database Fundamentals
  • Schemas
  • Relationship and joints
  • SQL basics

Authentication

Authentication fundamentals:

  • Authentication vs authorization
  • JWT
  • Password Hashing
  • Protocol and standards

Authentication solutions range by flexibility and control, allowing you to easily manage authentication without reinventing the wheel. BetterAuth is a comprehensive, framework-agnostic authentication and authorization framework for TypeScript applications. It provides a set of out-of-the-box features like email/password authentication, social sign-on (OAuth), and two-factor authentication (2FA).

Payments

Stripe is a leading payment processing platform, enabling websites and applications to accept and manage online payments securely.

Concepts to learn:

  • Payment flow
  • Account and API keys
  • Stripe elements
  • Stripe webhook

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. Again, try look for projects that were published more recently. 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! Remember that there is no perfect tech stack. Every tool depends on your needs and preferences, so make sure to keep an eye out for other tools to learn and try.

Hope this guide was helpful!

Back to All Snippets