Web — Web Development Fundamentals

Status: Active Last Updated: 2026-08-29 Category: Web Development Prerequisites: kb/basics/ — Linux fundamentals, command-line basics Tags: html, css, javascript, web, dom, http, browser, fetch, axios

Summary

Web development fundamentals for anyone who will build or debug browser-based applications. Covers how the web works (HTTP, browsers, DOM), core technologies (HTML, CSS, JavaScript in the browser), and how frontend and backend communicate (fetch, REST, GraphQL).

🎯 Learning Philosophy

How the Web Fits Together:

Browser → HTTP Request → Backend Server
     ← HTTP Response ←
     ↓
DOM + CSS → Rendered Page
     ↓
User interaction → JavaScript → fetch() → Backend

📚 Learning Path

Prerequisites: kb/basics/
         ↓
┌────────────────────────────────────────┐
│  PHASE 1: How the Web Works            │
│  ├─ DNS, HTTP request/response          │
│  ├─ Browser rendering pipeline          │
│  ├─ Same-origin policy, CORS            │
│  └─ HTTPS fundamentals                  │
└────────────────────────────────────────┘
         ↓
┌────────────────────────────────────────┐
│  PHASE 2: HTML & the DOM               │
│  ├─ HTML elements and semantics         │
│  ├─ DOM tree and node types             │
│  ├─ Accessibility (a11y) basics         │
│  └─ Forms and validation               │
└────────────────────────────────────────┘
         ↓
┌────────────────────────────────────────┐
│  PHASE 3: CSS Fundamentals             │
│  ├─ Selectors, specificity, cascade      │
│  ├─ Box model, layout (Flex, Grid)      │
│  ├─ Responsive design, media queries     │
│  └─ CSS custom properties              │
└────────────────────────────────────────┘
         ↓
┌────────────────────────────────────────┐
│  PHASE 4: Browser JavaScript           │
│  ├─ DOM manipulation                   │
│  ├─ Events (click, submit, keyboard)    │
│  ├─ fetch() and async/await            │
│  └─ Local storage, cookies              │
└────────────────────────────────────────┘
         ↓
┌────────────────────────────────────────┐
│  PHASE 5: Frontend Tooling             │
│  ├─ Vite and build tools               │
│  ├─ Tailwind CSS basics                │
│  ├─ TanStack Router (this project's SPA)│
│  └─ DevTools debugging                 │
└────────────────────────────────────────┘

📖 Articles in This Directory

🟢 Phase 1: How the Web Works

1. web-basics — How browsers and servers communicate
   • DNS resolution, HTTP/1.1, HTTP/2
   • Browser rendering: HTML → DOM → CSSOM → Render tree → Layout → Paint
   • Same-origin policy, CORS headers
   • HTTPS and TLS handshake
   • Prerequisites: None
   • Time: 2-3 hours

🟡 Phase 2: HTML & the DOM

1. html-dom — HTML structure and the DOM
   • Semantic HTML5 elements (article, section, nav, header, footer)
   • DOM tree: elements, text nodes, attributes
   • Accessibility: ARIA labels, keyboard navigation
   • Forms: inputs, validation, submit behavior
   • Prerequisites: Web basics
   • Time: 2-3 hours

🟡 Phase 3: CSS Fundamentals

1. css-basics — Styling for the web
   • Selectors (class, ID, attribute, pseudo)
   • Specificity and cascade
   • Box model: margin, border, padding, content
   • Flexbox and CSS Grid layouts
   • Responsive design: media queries, mobile-first
   • CSS custom properties (variables)
   • Prerequisites: HTML basics
   • Time: 3-4 hours

🟠 Phase 4: Browser JavaScript

1. browser-javascript — JavaScript outside Node/Bun
   • DOM selection and manipulation (querySelector, createElement)
   • Event listeners and event delegation
   • fetch() API: GET, POST, headers, error handling
   • Async/await in the browser
   • localStorage, sessionStorage, cookies
   • Prerequisites: JavaScript/TypeScript basics
   • Time: 3-4 hours

🔴 Phase 5: Frontend Tooling

1. frontend-tooling — The modern web build pipeline
   • Vite: dev server, HMR, production builds
   • Tailwind CSS: utility-first styling
   • TanStack Router: SPA routing (this project's approach)
   • Chrome DevTools: Elements, Network, Console, Sources
   • Prerequisites: HTML, CSS, Browser JS
   • Time: 2-3 hours

🔗 What Comes Next?

• kb/backend/ — Building the APIs that frontend communicates with
• kb/runtime/ — How the JavaScript engine executes code
• kb/frontend/ — This project's specific frontend patterns

📝 Change Log

2026-08-29

• Created web/ directory scaffold
• Defined 5-phase learning path
• Links to project-specific frontend patterns (TanStack Router, Tailwind)