A single-page, scroll-driven interactive essay that teaches Gradient Descent and Backpropagation through live animations and step-by-step demos.
| Chapter | Topic |
|---|---|
| 01 | What is gradient descent? — the update rule, animated loss curve |
| 02 | The loss landscape — local minima, saddle points, plateaus |
| 03 | Three flavors of descent — Batch, SGD, Mini-Batch |
| 04 | Learning rate — interactive slider, divergence demo |
| 05 | Advanced optimizers — SGD+Momentum, RMSProp, Adam race |
| 06 | Neural network architecture — live weighted-edge diagram |
| 07 | Forward pass — layer-by-layer activation propagation |
| 08 | Backpropagation — chain rule builder, error signal, weight updates |
| 09 | Full training loop — circular flow diagram + live loss chart |
| 10 | Interactive playground — train a classifier in the browser |
Colors carry fixed semantic meaning throughout:
- Cyan — definitions, information, forward-pass direction
- Amber — parameters (θ, w, b) and learning rate (α)
- Rose/Red — gradients, error signals, backward-pass, divergence
- Green — optimal states, convergence, global minimum
Open The Mathematics of Learning.html in any modern browser. No build step, no server required.
- Pure HTML + CSS + JavaScript — zero frameworks
- All visualizations: Canvas 2D (fake-3D projection) and inline SVG
- Math typesetting: KaTeX
- Fonts: Playfair Display · JetBrains Mono · Source Serif 4