Frontend Week · Demo Deck

Physics Wallah · Phase 1 · Week 3. Open these in order. Keep this tab pinned.

Offline-safe. React and Babel are loaded from the local vendor/ folder, so every demo works with the wifi unplugged. Just open the files — no install, no build, no npm, no excuses.

Session 1 — How a website actually happens

1a HTML only — the skeleton
Zero CSS, zero JS. What every site looks like underneath. 2 min 1b + CSS — now it has feelings
Same HTML. Comment out the style block live and watch the room recoil. 3 min 1c + JavaScript — it's alive
Search, filter, cart counter, toast. The third layer. 3 min 2 The Samosa Counter — DOM & events
20 lines. Edit the page live from the Console. Sets up "UI = f(state)". 3 min 3a The cart badge that lies to you
One truth, three copies, one forgotten update. Make them feel the bug. 4 min 3b Same app in React — the bug you cannot write
Invite someone to break it. They can't. Then show the 15 lines. 5 min 4a Components & props — the Maggi packet theory
Six cards, one piece of markup. Add a 7th dish live. 4 min 4b State & effects — the timer that would not die
Live lifecycle log. Flip "Leak mode" and watch a memory leak happen. 5 min 4c Virtual DOM — measured, not claimed
Real MutationObserver counters. Left pane loses by ~50x. Optional if short on time. 4 min 5a CSR vs SSR vs SSG vs ISR — interactive
The dhaba analogy + "what Google's crawler sees". Best block for non-devs. 6 min 5b CSR — press Cmd+U and find the content
Proof, not diagram. Search the source for "Physics". It isn't there. 1 min 5c SSR + hydration — the button that is a photograph
Reload and rage-tap Enroll. Counts your lost taps. 2 min 6 Bhook.com — the finished thing
Loading / error / empty / content. Hit "Break the API" for the punchline. 3 min

Session 2 — Make it fast, make it real

7 CLS Lab — the banner that stole your tap
Live CLS score. Try to hit Pay, delete your account instead. 4 min 8 INP Lab — one thread, one counter, one queue
Type while clicking the red button. The freeze is the lesson. 4 min 9 Code Review Challenge — 10 problems
Run it as a game. Four of the ten need no React knowledge at all. 6 min 10 Bhook.com again — this time in DevTools
Elements, Console, Network, throttling, Lighthouse. Same app, new lens. 6 min