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

I kept running into the same problem while learning about large language models.

I'd read a blog post about attention, nod along, and two days later I couldn't tell you why we divide by √d_k. I'd see "GQA", "MLA", "MoE", "LoRA", "HNSW" or "context rot" in a paper or a tweet, open five tabs, and close them all with the uneasy feeling that I sort of got it. And the field keeps moving, so there's always a new term on top of the ones I hadn't really nailed down.

So 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?"

I built it to learn, and writing each page forced me to understand things properly. I'm sharing it because I think it can help other people too.

🔗 Live site: https://llm-explained-lovat.vercel.app/ 💻 Source code: https://github.com/amananandrai/llm-explained

💌 This is a work in progress and I'd love your help. Suggestions are always welcome. If you find it useful, please ⭐ star the repo on GitHub. Spotted a mistake or have an idea? Open an issue. Want to fix or add something yourself? Pull requests are very welcome!

It's 42 modules in seven parts plus a capstone (43 interactive pages if you count the KL divergence sub-page). Every concept appears as a picture you can play with before you see its equation.

Also, every number on screen is computed in your browser. When something is a simulation or an illustrative figure, the page says so.

The Curriculum link in the top navigation shows the whole course. Parts 1 and 2 are meant to be read in order, and everything after them builds on the attention module. Beyond that you can jump around:

If you already know the transformer well, skip to whatever you're curious about. If you're new, start at Module 1 (or the optional maths primer, Module 0).

This is my favourite feature. Every page has a depth switch with three levels:

You can read a page at Intuition level, come back a week later and flip to Mechanics. The page grows with you.

And here's what the Maths depth looks like. Notice that Q, K and V keep the same blue, orange and green as in the animations:

Each page has a hero animation driven by your scroll position. There are also play, pause, step back, step forward and a scrubber, so you can pause on exactly the frame that confuses you.

For example, in the attention module a 5-token attention matrix fills in cell by cell, the heads split into colours, and you see each output vector built up as a weighted sum of value vectors.

Every animation also has a text transcript, and if your system has reduced motion turned on, animations turn into numbered static frames.

This is where things click. Some examples:

Most modules include a "Run it yourself" cell: editable Python running in your browser through Pyodide with NumPy. Change a number, hit Run, and watch the result update. You don't need to install anything. (Pyodide downloads on your first run, so give it a moment.)

Each page ends with a "what this picture leaves out" box, a 3-question quiz and a further reading list linking the primary papers. Every module cites its sources, from Attention Is All You Need to LoRA, DPO and PagedAttention.

Here's the full curriculum. I tried to cover both the core fundamentals and the newer ideas that keep showing up in papers and on Twitter/X.

Something I cared about a lot: colours mean the same thing everywhere. The blue you learn as "query" in Module 5 is still "query" in the capstone.

Once you learn the colours, later diagrams are much easier to read, because half the explanation is already done for you.

Colour never carries meaning on its own, though. There are icons, labels and transcripts too, and both light and dark themes aim for WCAG AA contrast.

After Module 7, you should be able to sketch a decoder block and estimate its parameter count to within 10%.

After Module 36, you should be able to sketch a RAG agent's harness and name where it can fail.

git clone https://github.com/amananandrai/llm-explained cd llm-explained./scripts/dev.sh # wraps index.html into dev.html python3 -m http.server 8765 # open http://localhost:8765/dev.html Enter fullscreen mode Exit fullscreen mode Honest limits In the same spirit as the "what this picture leaves out" boxes, here's what the site doesn't do yet:

Building this was the best way I've found to learn. You can't animate attention cell by cell, or write a widget that shows a KV cache growing, without understanding exactly what's happening. Every page exposed a gap in my own understanding that I then had to fill.

I'm sharing it because if it helped me, it may help you too. And sharing it means people will find my mistakes, which is how I keep learning.

![Three buddies: one holding a star, one catching a bug, one sending a love-letter PR] This project gets better with every pair of eyes on it. Suggestions are always welcome, big or small. Here's how you can help:

Pick a module, flip the depth switch, play with a knob, and tell me which concept finally clicked for you. 👇