Web Development Fundamentals

Core concepts across the HTTP lifecycle, markup & styling, JavaScript runtime, client-server contracts, performance, state & security.

HTTPHTMLCSSJSRESTSecurity

1. HTTP & Web Basics

The stateless request-response transport for nearly all web interactions.

Request Anatomy

Method, path, version, headers, optional body. Keep-Alive persists TCP.

Protocol

Idempotency

GET/PUT/DELETE idempotent; POST not. Safety & caching strategies rely on semantics.

Status Codes

2xx success, 3xx redirect, 4xx client, 5xx server. Use narrowly (422 vs 400).

HTTP/2 & 3

Multiplexing, header compression (HPACK), reduced latency; QUIC (UDP-based) for HTTP/3.

Sample Exchange

GET /api/items HTTP/1.1
Host: example.com
Accept: application/json

HTTP/1.1 200 OK
Content-Type: application/json
Cache-Control: max-age=60

[{"id":1,"name":"Widget"}]

2. HTML, CSS & Accessibility

Semantic structure + progressive enhancement improves resilience & SEO.

HTML Semantics

  • Use landmark elements (header, nav, main, footer)
  • Meaningful alt text
  • Forms: label + input association

CSS Layout

  • Flexbox for 1D distribution
  • Grid for 2D placement
  • Responsive: clamp(), minmax()

Accessibility (a11y)

  • Focusable controls
  • Contrast & color independence
  • ARIA only to fix semantic gaps

Responsive Grid Snippet

.cards { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }

3. JavaScript Runtime & DOM

Event loop orchestrates call stack, task queues & microtasks (Promise jobs).

Execution

Single-thread event loop; concurrency via async IO; Web Workers for isolation.

Modules

ESM: static import graph enabling tree-shaking; dynamic import() for code splitting.

Rendering

DOM diffing (virtual DOM libs) optimize minimal real DOM mutations.

Perf Metrics

FCP, LCP, CLS, TTI guide UX latency & stability goals.

Event Loop Diagram (Simplified)

Call Stack <= synchronous frames
 |__ Microtask Queue (Promises)
 |__ Task Queue (timers, IO)
 Rendering (frame) ~16ms budget

4. Architecture, APIs & State

Design for evolvability and predictable data flows.

REST

  • Resource-based URIs
  • Uniform interface
  • HATEOAS optional but powerful

GraphQL

  • Typed schema & single endpoint
  • Client-driven queries
  • N+1 solved via batching/loaders

State Management

  • Local (component) vs global (context/store)
  • Cache remote state separate from UI state
  • Invalidate predictably

Security

  • CSRF: SameSite cookies + tokens
  • XSS: escape, CSP, no eval()
  • CORS: origin policy control

API Versioning Tip

# Favor explicit media types OR URL prefix
Accept: application/vnd.service.v2+json

5. Interactive Lab

Static simulations / generators (no network calls).

HTTP Builder

(request)

Responsive Grid Generator

(css)

localStorage App Skeleton

(snippet)

State Shape Normalizer

(normalized)

6. Performance & Optimization Cheat Sheet

Quick reference for high-impact improvements.

Critical Rendering

Minimize blocking CSS/JS
Inline above-fold CSS
Defer non-critical scripts

Caching

Cache-Control: max-age
ETag / If-None-Match
Immutable assets w/ hashes

Images

Use AVIF/WebP
Lazy load (loading="lazy")
Serve responsive srcset

Bundle

Code splitting (dynamic import)
Tree-shake unused modules
Remove polyfill duplication

Security

Content-Security-Policy
X-Frame-Options: DENY
Strict-Transport-Security

Accessibility

aria-label clarity
Focus outline visible
Semantic headings order

7. Review & Mastery

Checklist & conceptual Q&A.

Progress Checklist

Concept Q&A

Why avoid storing JWT in localStorage?

XSS can exfiltrate tokens; HttpOnly cookies reduce exposure (with CSRF mitigations).

What triggers reflow?

Layout-affecting changes (dimensions, fonts). Minimize by batching and using transforms for animation.

Difference: cookies vs localStorage?

Cookies auto-sent with requests (size/expiry constrained); localStorage stays client-side until accessed.

Why GraphQL over-fetch safe?

Client selects specific fields; reduces payload size vs fixed REST responses.