Frontend
Browsers, UI state & web performance. · 9 notebooks
Frontend Essentials
The big-picture map of frontend development — how the web works, HTML/CSS/JS, the DOM & events, fetching data, state, frameworks, rendering strategies, performance, accessibility and the modern toolchain. A story-driven, diagram-rich overview that ties the whole discipline together.
Open notebookModern JavaScript (Deep Dive)
The language under everything — closures, the event loop, prototypes, `this`, async/await, modules and ES6+ — told as a story with runnable code, real-engine internals, and industry examples from V8, Node, React and beyond.
Open notebookTypeScript (Deep Dive)
JavaScript with a safety net — types, interfaces, generics, narrowing, utility & advanced types, tsconfig strictness, and typing React, the DOM and async code. A story-driven, diagram-rich course grounded in how real teams (and this codebase) use TS.
Open notebookCSS & Modern Layout
The visual half of frontend, finally demystified — the cascade, the box model, Flexbox & Grid, responsive design, custom properties, animations and modern CSS (:has, container queries, nesting). Story-driven and diagram-rich, grounded in how real design systems are built.
Open notebookHow Browsers Work
What actually happens between typing a URL and seeing pixels — browser architecture, networking (HTTP/1→3), parsing, the render pipeline, the compositor & GPU, the V8 engine, the event loop, storage, and the security model. A deep, diagram-rich look under the hood.
Open notebookReact
A modern, hooks-first React deep dive — the mental model, JSX, components & props, state & events, effects, refs, custom hooks, context, performance, data fetching, routing, forms, Suspense, and the React 18/19 era (Server Components, Actions). Story-driven and diagram-rich.
Open notebookState Management
The hardest problem in frontend, mapped end to end — the kinds of state, local state & lifting, Context, the reducer pattern, Redux & Flux, Zustand, and the game-changer of server-state (React Query/SWR), plus URL state, forms, and performance patterns. Story-driven and diagram-rich.
Open notebookWeb Performance Optimization
A complete, practical playbook for a fast web — Core Web Vitals, measuring lab vs field, cutting JavaScript, optimizing images/fonts/CSS, taming the main thread and layout, framework performance, caching & delivery, and a real workflow with budgets. Diagram-rich and grounded in industry data.
Open notebookNext.js & Rendering Strategies
The dominant React meta-framework, demystified — CSR/SSR/SSG/ISR, the App Router, Server vs Client Components, data fetching & the caching layers, streaming with Suspense, Server Actions, and SEO/image/font optimization. A story-driven, diagram-rich deep dive into how modern React apps are actually built and rendered.
Open notebook