I Built LLM Explained: 43 Interactive Pages That Take You From Tokens to AI Agents

Description and use

The author built LLM Explained, an interactive course that teaches transformer concepts through animations, widgets, and in-browser Python, enabling hands‑on learning.

Problem

Learners struggle to understand LLM concepts because terminology changes rapidly and explanations are often abstract.

Outcome

The project provides a structured, interactive, and hands-on resource that demystifies LLM concepts, enabling learners to experiment and verify ideas directly in the browser.

Workflow

• Design curriculum map with 7 parts and a capstone.
• Create modules with picture-first, symbol-second principle.
• Add depth switch (Intuition, Mechanics, Maths).
• Implement scroll-driven animations and widgets (e.g., toggle √d_k, parameter counter, tokenizer).
• Embed optional in-browser Python cells via Pyodide.
• Add quizzes and further reading links.
• Publish site and source code on GitHub.
• Invite community contributions via issues and pull requests.

Evidence

I built the resource I wished I had: LLM Explained. It's a free, interactive course that goes from "why did RNNs hit a wall?" all the way to "how does a production agent retrieve, reason, act and get evaluated?"

Source

Every module has at least one widget you control.

Source

Optional in-browser Python (NumPy) cells reproduce the figures.

Source