DOM Events

Arrange boxes so the design holds across viewport widths, zoom levels, and content growth.

• Keep a table header visible with sticky positioning

  Pin a table header to the top of its own scroll box with position: sticky on the cells, keep borders and backgrounds honest, and avoid the wrapper that silently defeats it.

  CSSintermediate

Attach, configure, delegate, and remove browser event listeners correctly.

• Add an event listener with the options you actually need

  Pass an options object instead of a bare boolean to addEventListener: once, capture, and passive tell the browser how the listener should behave and when it should stop mattering.

  JavaScriptbeginner

• Debounce a scroll handler without dropping the last call

  Wrap the scroll handler in a trailing-edge timer so a burst of scroll events collapses into exactly one call that still runs for the final position instead of dropping it.

  JavaScriptintermediate

• Delegate events for a list that changes after load

  Bind one click listener to a stable list container and route events with closest, so rows added or removed later need no extra wiring and cleanup never falls behind the markup.

  JavaScriptintermediate

React to intersection, viewport entry, or document visibility changes.

• Lazy-load images with IntersectionObserver

  Swap a placeholder image for the real file only when the browser is about to show it, and see where the loading attribute the platform already ships is the better answer.

  JavaScriptintermediate

• Reveal an element the first time it enters the viewport

  Play a reveal animation the first time an element scrolls into view, then drop its observer so the effect cannot replay when the reader scrolls back up the page.

  JavaScriptbeginner

Mark up document regions, reading order, and navigation so people and crawlers share one map.

• Add a skip link that lands on the main region

  Place a first-tab link that jumps past navigation into the main content and becomes visible on focus, so keyboard users are not trapped in the header.

  HTMLbeginner

• Mark up a primary navigation as a labelled list

  Wrap site navigation in a named nav landmark and keep its items a real list, so screen readers announce which region it is, how many links it holds, and where it ends.

  HTMLintermediate

• Structure a page with semantic landmarks

  Mark the header, navigation, main, and footer regions so keyboard and screen-reader users can jump between them instead of tabbing through everything.

  HTMLbeginner

Decide whether entered data is acceptable and report the result to the person filling the form.

• Announce field errors without moving the caret

  Report validation failures beside the field they describe, announce them politely, and leave focus where the reader typed.

  JavaScriptintermediate