The browser, the DOM, and where state lives
By the end of today you can explain what the DOM is as a data structure, why touching it repeatedly is slow, and why manually keeping UI and state in agreement becomes unmanageable.
YesterdayOn Day 20 you learned trees. The DOM is a tree, and on Day 23 you saw the browser build one.
TomorrowTomorrow, React, which exists precisely because today's approach stops scaling.
Why this matters
React only makes sense as an answer to a problem. Today you feel the problem, so tomorrow's solution lands as relief rather than ceremony.
- The DOM
- Events and delegation
- Reflow and repaint
- Keeping UI and state in step
Learn it
70 minCopy this into Claude or ChatGPT. It quizzes you before it explains anything, which is deliberate. The resources under it are how you check what it told you.
Today's Master Prompt
Free · sign inA prompt written for this day alone: your level, the exact scope, what to leave out, and an instruction to quiz you before it explains anything. Paste it into Claude or ChatGPT and it teaches you today's material.
Check it against something that is not a model
An assistant can be fluent and wrong, and on a topic you met today you will not catch it. These cover the same ground and were made by people who do this for a living, so they are what you hold the explanation up against. They are other people's work and we only link to them, so judge them for yourself.
3 hand-picked resources
Free · sign inVideos, official docs and articles covering the same ground, each opened and annotated by hand. They are what you check the assistant against on a day you cannot yet catch it being wrong.
Build it
50 minBuild a todo list with no framework: add items, remove them, mark them done, show a count of remaining items, and filter between all and active. Then count how many separate places you had to update when a single item changes, and write two sentences on what would happen if you added a second counter elsewhere on the page.
Recall it
20 minAnswer out loud, reveal, then mark honestly whether you had it. That score is the only thing on this page you do not get to choose.
5 recall questions
Free · sign inQuestions you answer from memory, then grade yourself against the real answer. The score is carried into the mastery rating below it, so an honest miss cannot quietly become a tick.
Rate it
Completion and mastery are tracked separately. Be honest, because an inflated rating only means the concept resurfaces sooner.
Mastery tracking
Free · sign inRate yourself against five named criteria per concept. Completion and mastery are tracked separately, and anything you rate shakily comes back automatically on a spaced schedule.
Recap
- 01The DOM is a live tree the browser builds from HTML
- 02Delegation means one listener rather than one per element
- 03State lives in your variables and in the DOM at the same time
- 04Keeping both in agreement by hand is what stops scaling
Your progress
Free · sign inMark days complete, pick up where you left off across devices, and watch completion and mastery diverge. Free, and the account exists only so ninety days of work cannot vanish with a cleared browser.