Tutorials
Practical tutorials for the work we actually do. Pick one, read it in order, and apply it.
Find the button, attach a listener, change something on the page when it's clicked. Three steps, and two mistakes that make it silently do nothing.
Trace a detached preview from its DOM node to an application Map, repair cleanup, and verify repeated open-and-close cycles with heap snapshots.
Record one slow click in Chrome's Performance panel, read the Bottom-up tab by self time, fix the function it points at, and record again to prove the fix worked.
Your HTML file opens blank, shows as text, or downloads instead of rendering. Check the extension, the file:// open path, the doctype and a missing closing tag before you rewrite the page.
Measure two boxes with the same declared width, calculate padding and border, and reproduce the 100% width overflow mistake before fixing it.
Compare text alignment, a centred block and two-axis child placement, then test why centering needs available space.
Diagnose an ID rule that defeats a reusable note modifier, then keep the ID for navigation while moving presentation to classes.
Set a shared typography base, trace inherited colours and remove a local override without restyling every paragraph.
Trace a reproducible colour and spacing conflict from the rendered result to the winning rule, then verify the repair in the source file.
Build a local form with working labels and a grouped topic choice, then inspect submitted field names without sending a message.
Choose different text alternatives for informative, decorative and linked images, then inspect their names and broken-image behavior.
Build a three-file local site, resolve paths from nested folders and test fragments and deliberate new-tab navigation.