Practical developer examples
Each Example answers one task: the problem, a short accurate answer, code you can copy, and an explanation of why it works — plus when the answer stops being the right one.
Browse by language and technology
An Example lives at one URL under its primary language. Technology hubs list the same Examples by framework.
CSS
Examples whose primary code is a stylesheet: selectors, layout, custom properties, and cascade behaviour.
HTML
Examples whose primary code is document markup: elements, attributes, semantics, and native behaviour.
JavaScript
Examples whose primary code is the JavaScript language as it runs in browsers and Node-compatible runtimes.
TypeScript
Examples whose primary code is TypeScript, including its type system, generics, and annotation-driven contracts.
React
Examples built on the React component model, its hooks, and its rendering rules.
Featured examples
Chosen by an editor for the clearest answer to a task people hit often.
Validate form input before the browser submits it
Add cross-field rules to a plain HTML form inside its submit handler, report them through the browser's own validity API, and keep the built-in messages working.
Narrow an unknown API response with type guards
Layer small type predicates over an unknown response and return a narrowing result, so the compiler only exposes fields a runtime check has accepted.
Build a card grid that reflows without media queries
Declare one minimum card width, let the grid count how many tracks fit, and a row of cards reflows from four columns to one with no media query at all.
Associate every form control with an explicit label
Bind each input, select and textarea to a label with matching for and id values so the control has a name, the label is clickable, and errors have something to describe.
Recently published
Ordered by publication date, newest first.
Associate every form control with an explicit label
Bind each input, select and textarea to a label with matching for and id values so the control has a name, the label is clickable, and errors have something to describe.
Group related checkboxes with a fieldset and legend
Give a set of related checkboxes a group name with fieldset and legend, keep every box individually labelled, and know why the same shape must not be used for either-or choices.
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.
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.
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.
Style a visible keyboard focus ring with custom properties
Give keyboard focus a ring that survives both colour schemes and forced-colors mode by driving :focus-visible outlines from width, offset, and colour tokens.
Topics
Bounded knowledge areas. Each hub groups its examples by the primary task they solve.
CSS Layout
Knowledge area for positioning boxes, reflowing across viewports, and expressing visual structure in CSS.
Data Transformation
Knowledge area for reshaping collections and records in memory without losing meaning or accuracy.
DOM Events
A bounded knowledge area covering listeners, event objects, propagation, and browser input lifecycle.
Fetch and HTTP
Knowledge area for requesting, awaiting, cancelling, and interpreting HTTP responses from client code.
Form Validation
Knowledge area for checking user input, reporting field problems, and keeping submission predictable.
React State
Knowledge area for declaring, deriving, and updating component state inside React's render model.