● Frontend

concept bundles — HTML/CSS → Tailwind 4 → React → Astro → TanStack Start ← all tutorials

Phase 1 — Foundations

The era: HTML & CSS fundamentals, the box model, the cascade.

01 ★
Box Model
content/padding/border/margin, box-sizing
anchor 02
HTML Semantics
structure, outline, a11y roots
 03
Selectors & Specificity
the specificity calculator, the cascade
 04
Layout Flow
normal flow, display, BFC
 05
Flexbox
axes, alignment, the one-dimensional layout
 06
CSS Grid
tracks, areas, two-dimensional layout
 07
Positioning
static→sticky, stacking context
 08
Responsive Units
rem/em/vw, media + container queries

Phase 2 — Tailwind 4 (CDN playground)

The no-build era: utility-first via the Play CDN.

09
Tailwind CDN Playground
v4 Play CDN, utility-first
 10
Design Tokens
@theme, spacing/color/type
 11
Responsive Variants
breakpoints, dark mode
 12
Customization
@utility, prod build

Phase 3 — React (via CDN)

Just React. Single-file playgrounds with React + Babel CDN.

13
React via CDN
JSX, the element tree
 14
Components & Props
composition, children
 15
State & Hooks
useState, the re-render model
 16
Effects & Lists
useEffect, keys, conditionals

Phase 4 — Metaframeworks (compare)

The map: Astro vs TanStack Router/Start vs Next.js — pros/cons only.

17
Metaframework Landscape
the 80/20 decision rule
compare

Phase 5 — Astro (deep-dive)

Content is king: islands, routing, React-in-Astro, SSR.

18
Astro Islands
zero-JS-by-default, hydration
 19
Routing & Layouts
file-based, nested, slots
 20
React in Astro
client:load/idle/visible/only
 21
Content Collections
type-safe content, Content Layer
 22
Rendering Modes
SSG / SSR / hybrid, adapters
 23
View Transitions
native page transitions
 24
Actions & Endpoints
type-safe server functions
 25
Assets & Images
astro:assets, responsive

Phase 6a — TanStack Router (deep-dive)

The type-safe routing engine: file-based routes, typed params/search, loaders, nested context.

27
Type-Safe Routing
end-to-end type inference, the thesis
 28
File-Based Routing
routes/ convention, route-tree codegen
 29
Path & Search Params
typed :params + validated URL search params
killer feature 30
Navigation & Links
<Link>, navigate(), preload, active
 31
Loaders & Data
route loaders, type-safe data, Query
 32
Nested & Context
nested routes, <Outlet>, context inheritance

Phase 6b — TanStack Start (deep-dive)

The full-stack framework on Router: server functions, SSR, the SPA-vs-MPA choice, deployment.

26
TanStack Start
overview: Router + Server Fns + Nitro
intro 33
Server Functions
createServerFn, the type-safe RPC boundary
 34
SSR & Streaming
server rendering, streaming, hydration
 35
API & Middleware
server routes + request middleware
 36
SPA vs MPA
SPA mode vs SSR/MPA — TanStack spans both
compare 37
Deployment & Nitro
Nitro, deploy targets, build outputs
Each bundle = a working zero-dep .html demo with a [check: OK] gold-check + a static .md guide. Workflow: ../skills/concept-builder/SKILL.md. Build plan: TODO.md.
⚛️ Deep Dive Ready to go deeper? The companion React Deep Dive section covers hooks mastery, component patterns, concurrent React, animations, and TanStack Router internals — 36 bundles with React 19 + Tailwind v4. react/ →
🌊 Deep Dive Ready for advanced Tailwind? The companion Tailwind CSS 4 Deep Dive section covers container queries, the full variant ecosystem, arbitrary values, oklch color internals, animations, and build pipeline — 38 bundles. tailwind/ →