Web Development Roadmap

Learn the building blocks of every website — structure with HTML and styling with CSS.

• Document structure and semantic HTML5 elements
• The CSS box model — margin, padding, border
• Flexbox for responsive one-dimensional layouts
• CSS Grid for two-dimensional layouts
• Media queries and responsive design
• CSS custom properties (variables)
• Forms — inputs, labels, and validation

Add interactivity to your pages. JavaScript is the most important language on the web.

• Variables, data types, and operators
• Functions, scope, and closures
• Arrays and objects — methods and iteration
• DOM manipulation and event listeners
• Asynchronous JS — callbacks, promises, async/await
• Fetch API and working with REST APIs
• ES6+ syntax — destructuring, spread, modules

Git is non-negotiable. Learn it early and use it on every project from day one.

• git init, add, commit, status, log
• Branching — git branch, checkout, merge
• Remote repositories — GitHub, push, pull
• Pull requests and code review basics
• .gitignore and keeping secrets out of repos

React is the most in-demand frontend library. Learn to think in components.

• JSX and functional components
• Props and state — useState hook
• useEffect for side effects
• Component composition and reuse
• React Router for client-side routing
• Fetching data from APIs in React

Next.js adds routing, server rendering, and full-stack capabilities on top of React.

• File-based routing with the App Router
• Server Components vs Client Components
• Data fetching — fetch, Server Actions
• API routes and middleware
• Image and font optimisation
• Environment variables and secrets

Store and retrieve data with a real database. Most apps need a backend.

• SQL basics — SELECT, INSERT, UPDATE, DELETE
• PostgreSQL or SQLite setup
• ORM with Drizzle or Prisma
• API design — REST endpoints and HTTP methods
• Authentication — sessions, JWT, Auth.js

Make your apps look professional using modern CSS tools and component libraries.

• Tailwind CSS — utility-first workflow
• Component libraries — shadcn/ui or Radix UI
• Dark mode and theming
• Responsive design patterns
• Accessibility (a11y) fundamentals

Ship your project to the world. Learn to deploy, monitor, and iterate.

• Deploying to Vercel or Netlify
• Custom domains and HTTPS
• Environment variables in production
• Error monitoring with Sentry
• Performance basics — Core Web Vitals
• CI/CD with GitHub Actions