Practical CSS and JavaScript components

Guide Updated 24 October 2026

Use these guides to build controls, overlays, tables and charts with complete original CSS and JavaScript examples. Start with the interaction you need, work through the awkward cases, then use the comparison data to narrow the implementations worth trying.

Start with the interface problem

Choose the guide that matches the part of your interface you need to change. Each example stands on its own, with no analytics script or remote dependency. All implementation code is original.

• Replace a jQuery slider: map controls, stop rotation on keyboard focus as the APG recommends, and remove the component cleanly.¹
• Build a tooltip for pointer and keyboard: combine hover and focus, handle Escape and decide when content needs a popover.
• Keep responsive tables understandable: retain header relationships while adding horizontal scrolling and written selection states.
• Pair CSS bars with their data: distinguish positive values, negative values, zeroes and missing observations.
• Inspect carousel replacements: compare recorded configurations without turning the results into a league table.
• Inspect tooltip and popover implementations: compare opening, persistence, dismissal and overflow behaviour.
• Compare tooltip overflow approaches: choose between local positioning, a portal, the top layer and CSS anchors.
• Expand and zoom images: follow the inline and dialog examples through opening, zooming and closing.
• Keep line charts aligned with their table: preserve gaps and zeroes when drawing with SVG or canvas.

Use the comparison data

The carousel index contains eighteen package configurations and two related original CSS scroll-snap patterns. Its rows identify the version, dependencies, published file sizes, configuration and behaviour fields. The two CSS patterns share a platform; they are not separate software products. Filters narrow the records without assigning a score or ordering vendors by merit.

The tooltip and popover ledger applies the same approach to twenty implementations. Software integrations and native browser patterns are labelled separately. Start with the interaction you need, then read the configuration and the note behind each value. A useful result needs both the outcome and the conditions that produced it.

The planned chart data-alternative ledger is not included. The bar and line guides already include original synthetic data and examples that keep the chart and table aligned. Those examples are individual teaching fixtures, rather than a completed comparison of charting tools.

Follow an example into your project

Read the answer, copy the complete example and work through its cases before adding your own content. Use the demo to explore this guide map. Keep the example’s data, controls and cleanup together until you understand which state belongs to the component and which belongs to its containing page.

The editorial policy, methodology and corrections process explain how the work is maintained. About and disclosure describe the new publication’s independence and sponsor boundaries. Sponsor modules cannot alter a dataset row, ranking, result or primary answer.

Not covered on this page

• A complete implementation for every project requirement.
• The planned chart data-alternative ledger.
• Continuity with, or republication of, a previous operator’s work.