Build it in HTML

An id names one element, a class labels many. See why #id beats three classes, what a duplicate id breaks, and how to name and select each in CSS and JavaScript.

How requestAnimationFrame works: the timestamp, speed that does not depend on frame rate, cancelAnimationFrame, and one update per frame. Live examples and fixes.

Format dates in JavaScript for people and for machines: toLocaleDateString options, Intl.DateTimeFormat, "3 days ago", yyyy-mm-dd, and the off-by-one-day bug.

Build an image lightbox in plain HTML and JavaScript with the dialog element: captions, next and previous, arrow keys, swipe, and focus back on the thumbnail.

Draw a CSS layout as text with grid-template-areas. Try a live area editor, switch layouts with container queries, and fix areas that silently do nothing.

Build a card layout in HTML and CSS: the markup, buttons pinned to the bottom, a responsive grid, a whole-card link that keeps inner buttons working. Live examples.

Try every CSS blend mode on a live example, make text that inverts over any background, tint images with background-blend-mode, and fix blending that does nothing.

Use CSS mask-image with a gradient to fade text and scroller edges, or with an SVG to recolour icons. Live examples, code to copy, and fixes.

CSS counters beyond lists: counter-reset, counter-increment, counter-set, 01 and Roman styles, 1.1 headings, "Figure 3" captions and a no-JavaScript checkbox tally.

One CSS property tints native checkboxes, radio buttons, range sliders and progress bars. Live examples, which controls it reaches, dark mode and what it can't do.

Play a sound effect from JavaScript with new Audio().play(), handle the autoplay error, overlap sounds, and make beeps with the Web Audio API. Live examples.

Set vertical text with writing-mode: vertical-rl, keep letters upright with text-orientation, fit numbers with text-combine-upright, and build sideways headers.

Wrap text around a circle, a polygon or an image's transparent parts with CSS shape-outside. Live examples, shape-margin, clip-path and fixes when it fails.

Detect DOM changes in JavaScript with MutationObserver: options, records, batching and the infinite-loop trap. Live examples to try, code to copy, and fixes.

Detect when an element changes size, not just the window. ResizeObserver entries, the box option, sharp canvas charts, and the fix for the loop error.

Typewriter text in pure CSS with steps() and ch, why normal fonts break it, and a JavaScript version that types, deletes and loops. Live examples and code.

Make a card change layout based on the box it sits in, not the window. container-type, @container, named containers and cqi units, with live examples and fixes.

Open the camera from a web page: a file input with capture, or getUserMedia into a video. Take a photo on a canvas, pick the back camera, and fix the errors.

flex-direction sets which way flex items flow, and justify-content and align-items turn with it. Live examples of row, column, the reverse values and a phone layout.

Place grid items with grid-row-start, grid-column and span. A live lab shows line numbers, -1, implicit tracks, overlap with z-index and grid-auto-flow: dense.

Attach a tooltip or menu to a button with anchor-name, position-anchor and position-area, flip it when space runs out, and add a small JavaScript fallback.

How CSS outline works: width, style, colour and outline-offset, rounded outlines, :focus vs :focus-visible, a focus ring that survives forced colours, and fixes.

How async and await work in JavaScript: what a Promise is, try/catch, Promise.all vs allSettled vs race, await in loops, timeouts and cancelling. Live demos to try.

CSS logical properties name sides by text flow, so one stylesheet works in ltr, rtl and vertical text. The full physical-to-logical map, live demos and fixes.

Scale pixel art and QR codes without blur using image-rendering: pixelated. Compare auto, pixelated and crisp-edges live and turn off canvas smoothing.

Build a footer with HTML and CSS: when footer is the page landmark, what goes inside, columns that stack on phones, a footer that stays at the bottom, dark contrast.

How touchstart, touchmove and touchend work, why pointer events are the simpler choice, and how to detect a swipe and a pinch. Live examples to try on a phone.

Get a random integer between min and max in JavaScript, shuffle an array fairly, and know when Math.random is not enough. Live examples and code to copy.

Build a particle effect in plain HTML and JavaScript: a fountain, a network background that reacts to the pointer, and a confetti burst. Live code to try and copy.

Turn on tabular numbers, ligatures, small caps, slashed zeros and fractions in CSS. Live demos that test your installed fonts, the code, and why nothing changes.

How background-clip and background-origin decide where a background is painted and where it starts. Live demos for gradient text, textured text and gradient borders.

Build click-to-call, text and email links in HTML: the tel: format, sms: and mailto: with encoded text, button styling, accessible link text and sandbox limits.

will-change tells the browser a property is about to animate. Add it just before, remove it after, and watch for the z-index and position: fixed side effects.

Mix two colours in CSS with color-mix(), lighten or darken with relative colour syntax, and build a whole palette plus hover states from one brand variable.

Style a parent by what it contains with CSS :has(). Cards, form states, a scroll lock, quantity queries and a theme switch, plus specificity and fallback rules.

How to use the h2 tag and h3 to h6 under it: picking a level from its place in the page, subtitles with hgroup, and a live outline viewer that checks your headings.

What the HTML base tag does to every relative link, image and #anchor on a page. Live examples for href and target, the trailing slash rule, and fixes.

How the HTML kbd tag marks keys and typed input, when to use samp and var instead, how to nest them for shortcuts, and CSS for key caps you can press.

How background-size works: cover, contain, auto, one and two values, percentages and background-origin, plus repeat round and why fixed backgrounds fail on phones.

How srcset w and x descriptors, sizes and the picture element decide which image file loads. Live demos show the chosen file through currentSrc.

When to use del, ins or s for crossed-out text, what datetime and cite do, how to mark a sale price, and a live diff that writes del and ins for you.

The HTML noscript tag shows its content only when JavaScript is turned off, not when a script fails. Live examples, head vs body rules and mistakes to avoid.

white-space: nowrap keeps text on one line. See nowrap, pre, pre-wrap, pre-line and break-spaces side by side, plus text-wrap balance and pretty.

Keep the footer at the bottom of short pages with flexbox or grid and min-height: 100dvh. Live examples, plus why position fixed and sticky differ.

Build a sidebar in HTML with aside and CSS grid, make it sticky, turn it into a drawer on phones and collapse it to icons. Live examples and code to copy.

Build a stopwatch in HTML and JavaScript with performance.now(), pause and resume, lap times and digits that do not jitter. Live examples to try and code to copy.

Build a flip card in HTML and CSS with perspective, preserve-3d and backface-visibility. Hover or click to flip, keyboard support, and cards that fit their text.

CSS scroll snap in plain words: scroll-snap-type, scroll-snap-align, scroll-snap-stop and scroll-padding. Live examples to try, and fixes when nothing snaps.

How CSS transition works: property, duration, delay, ease, cubic-bezier and steps, allow-discrete for display: none, and the transitionend event.

How CSS transform-origin picks the point an element rotates and scales around: keywords, percentages, px, the 3D z value and transform-box for SVG. Live demos.

Read ?q=... from the address, build a query string from a form, and update the address bar without a reload. get, getAll, set, append and encoding, live.

How stroke-dasharray and stroke-dashoffset cut an SVG stroke into dashes, draw a line on screen and fill a progress ring. Live examples, code and fixes.

Make a dot follow a curve with CSS offset-path and offset-distance: path(), ray(), circle(), offset-rotate and offset-anchor, with live examples to copy.

Style SVG shapes from CSS with fill and stroke, cut holes with fill-rule evenodd, fade them without a dark band, and outline text with paint-order. Live examples.

Wrap a DOM change in document.startViewTransition() and style it with view-transition-name and ::view-transition-old/new. Live examples, fallback and reduced motion.

Run a CSS animation on scroll instead of time: animation-timeline with scroll() and view(), named timelines, timeline-scope and animation-range, plus a fallback.

What each touch-action value lets the browser do, why a finger drag scrolls the page, and how overscroll-behavior stops scroll chaining and pull-to-refresh.

Change the blinking text cursor colour with caret-color, try the block and underscore shapes of caret-shape, and build a terminal-style caret. Live examples.

What appearance: none removes on each form control, why checkboxes vanish, and the states you must redraw. Live examples to toggle, test and copy.

The CSS color-scheme property tells the browser which schemes a page supports, so inputs, scrollbars and default colours go dark. Live examples and light-dark().