Web Development Roadmap

Building and deploying web applications. Frontend, backend, and the browser.

4 stages · 14 topics 0% done
Web Development
✓ HTML Basics
✓ CSS Basics
✓ Foundations
✓ REST APIs
✓ Browser Rendering
✓ Core Concepts
✓ Cookies and Sessions
✓ OAuth 2.0
✓ CORS
✓ Web Security Basics
✓ Intermediate Skills
✓ SPA vs SSR
✓ Advanced Topics
✓ HTMX
Text version of this roadmap

1. Foundations

  • HTML Basics: Elements, semantic markup, forms, accessibility (ARIA), and the DOM tree structure.
  • CSS Basics: Selectors, box model, flexbox, grid, responsive design, and CSS custom properties.
  • REST APIs: Resource naming, HTTP methods, status codes, pagination, versioning, and HATEOAS.

2. Core Concepts

  • Browser Rendering: DOM/CSSOM construction, render tree, layout, paint, compositing, and critical rendering path.
  • Cookies and Sessions: Cookie attributes (HttpOnly, Secure, SameSite), session management, and JWT tokens.
  • OAuth 2.0: Authorization code, PKCE, implicit, client credentials flows, and OpenID Connect.

3. Intermediate Skills

  • CORS: Cross-Origin Resource Sharing, preflight requests, headers, and security implications.
  • Web Security Basics: CSP, HSTS, X-Frame-Options, Content-Type sniffing, and secure headers checklist.
  • SPA vs SSR: Single-page apps vs server-side rendering, hydration, Next.js/Nuxt, and trade-offs.

4. Advanced Topics

  • HTMX: Hypermedia-driven apps, HX-* headers, AJAX from HTML attributes, and server-side rendering.