Comprehensive 21-Module Engineering Roadmap

Modern Web Engineering 2026

From language primitives and headless component architectures to cryptographic webhook validation, connection pooling, and globally distributed V8 edge runtimes.

Curriculum Progress

Stored locally in your browser session via Svelte 5 Universal Runes.

0 / 21 Labs Completed (0%)
Track

Foundations

4 Modules
HTML5

01. Modern HTML5 & Web Semantics

Master native document landmarks, accessible interactive disclosures, exclusive accordions, and constraint validation without client JS.

Semantic Landmarks<dialog><details name="...">Form Constraints
Launch Sandbox →
Tailwind CSS v4

02. Tailwind CSS v4 Engine & @theme

Learn the CSS-first configuration model, variable binding with native tokens, and container-first responsive layouts.

@theme tokensArbitrary PropertiesCascade LayersModern Flex/Grid
Launch Sandbox →
TypeScript 6

03. TypeScript 6 & Modern JS Primitives

Deep dive into sound type narrowing, literal type preservation, exhaustiveness checking, and strict modern modules.

Discriminated Unionssatisfies operatorStrict NarrowingConst Type Parameters
Launch Sandbox →
Tailwind CSS v4

04. Icon Systems: Inline SVG vs CSS Masks

Compare DOM overhead, animation flexibility, theme propagation, and bundle sizes between inline SVG nodes and pure CSS mask spans.

Inline <svg>CSS mask-imagecurrentColor inheritanceDOM Footprint
Launch Sandbox →
Track

Modern ECMAScript

5 Modules
ECMAScript

05. Precision Math & Modern Maps

Eliminate IEEE-754 floating-point accumulation bugs and remove dictionary fallback boilerplate using native ES2026 collection primitives.

Math.sumPreciseMap.prototype.getOrInsertTS6 Strict Modules
Launch Sandbox →
ECMAScript

06. Binary Streams & Container Layouts

Execute native browser-level Base64 byte conversions and stream promise aggregation inside modular, container-responsive cards.

Uint8Array.prototype.toBase64Array.fromAsyncTailwind v4 @container
Launch Sandbox →
HTML5

07. Modern DOM & Discrete Transitions

Orchestrate zero-JavaScript dialog entry transitions from display: none and isolate background accessibility trees natively.

HTML5 inertCSS @starting-styleTailwind 3D Matrices
Launch Sandbox →
TypeScript 6

08. Resource Scopes & Async Resolvers

Manage deterministic lifecycle teardowns upon block-scope exit and decouple promise resolutions from constructor callbacks.

using / Symbol.disposePromise.withResolvers()Explicit Resource Management
Launch Sandbox →
ECMAScript

09. Native Anchors, Popovers & Iterator Pipelines

Tether floating overlays without external positioning libraries and process data streams lazily without intermediate array allocations.

CSS position-anchorHTML5 popover="auto"Iterator.prototype helpers
Launch Sandbox →
Track

UI & Frameworks

4 Modules
Svelte / SvelteKit

10. Svelte 5 Runes & SvelteKit 2

Explore the complete Svelte 5 reactivity runtime: Universal Runes, component snippets replacing slots, two-way $bindable props, and synchronous SvelteKit routing state.

$state / $derived$props / $bindable{#snippet} blocks$app/state
Launch Sandbox →
Svelte / SvelteKit

11. shadcn-svelte & Headless Bits UI

Build zero-dependency, copy-paste headless UI components utilizing Bits UI primitive runes and atomic Tailwind CSS v4 class merging.

Bits UI PrimitivesTailwind v4 clsx/cvaCompound ComponentsAccessible Dialogs
Launch Sandbox →
Vue / Nuxt

12. Vue 3.5 Reactivity & Core Primitives

Analyze modern Vue 3.5 compiler primitives: destructuring defineProps with retained reactivity, typed template references, and SSR-safe element IDs.

Reactive Props DestructureuseTemplateRef()useId()Deferred Teleport
Launch Sandbox →
Vue / Nuxt

13. Nuxt 4 & Nuxt UI Component System

Master the forward-compatible Nuxt 4 directory architecture, universal data fetching lifecycles, and modern Nuxt UI design token customization.

Nuxt 4 app/ structureNuxt UI / Reka UIuseAsyncDataIsland Architecture
Launch Sandbox →
Track

APIs & Real-Time

2 Modules
API Architecture

14. Schema Validation (Standard Schema) & Hono RPC

Enforce runtime boundaries with Standard Schema, generate client types via OpenAPI, and build end-to-end type-safe RPC pipelines.

Zod / Valibot@standard-schema/specHono RPCOpenAPI OAS 3.1
Launch Sandbox →
API Architecture

15. Real-Time Streaming (SSE/WS) & Webhook Signatures

Choose between unidirectional HTTP streaming and bidirectional sockets; verify incoming webhooks with timing-safe HMAC signatures.

Server-Sent Events (SSE)WebSocketsHMAC SHA-256Idempotency Keys
Launch Sandbox →
Track

Data, Caching & Auth

3 Modules
Backend & Data

16. PostgreSQL on Neon, SQLite & Drizzle ORM

Schema-first database design, zero-overhead TypeScript queries, migrations, and handling serverless connection limits with proxy poolers.

Drizzle ORMNeon Serverless PostgresSQLite / LibSQLConnection Pooling
Launch Sandbox →
Backend & Data

17. Serverless Redis & Sliding Window Rate Limiting

Deploy stateless HTTP Redis caching, mitigate brute force/DDoS attacks with sliding window algorithms, and manage ephemeral state at the edge.

@upstash/redis@upstash/ratelimitSliding Window CounterDistributed Locks
Launch Sandbox →
Auth & Security

18. Modern Auth: Better Auth, Passkeys & Sessions

Implement passwordless WebAuthn registration, secure session cookie rotation, multi-tenant organization plugins, and PKCE OAuth flows.

Better AuthWebAuthn / PasskeysHttpOnly Cookies2FA / TOTP
Launch Sandbox →
Track

Infrastructure & Monetization

3 Modules
Cloud & Edge

19. Deployment: Cloudflare Workers vs Serverless Node

Compare V8 isolate execution, Node.js containerized serverless functions, globally distributed edge caching, and runtime API compatibility limits.

Cloudflare Workers / PagesVercel / Netlify EdgeV8 Isolates vs Node.jsCold Starts
Launch Sandbox →
Services & Billing

20. Resend Transactional Email & Polar.sh Billing

Orchestrate transactional emails with React/HTML templates, accept global payments via Polar.sh Merchant of Record, and handle webhook events.

Resend APIPolar.sh MoRSubscription WebhooksDKIM / SPF Verification
Launch Sandbox →
Cloud & Edge

21. Direct S3/R2 Presigned Uploads & Inngest Jobs

Bypass serverless memory limits with direct client-to-storage presigned uploads and execute durable, long-running background tasks with automatic retries.

Cloudflare R2 / S3Presigned PUT URLsInngest Background QueuesDurable Workflows
Launch Sandbox →