Build it in HTML

Change list bullets and numbers with list-style-type: every value, custom strings and emoji, list-style-image, inside or outside, ::marker and @counter-style.

Why a flex or grid item refuses to shrink and pushes things off screen, and how min-width: 0, minmax(0, 1fr) and clamp() fix it. Live demos you can edit.

How CSS grid-auto-flow places items: row, column and dense, how grid-auto-rows and grid-auto-columns size the tracks the browser adds, and a masonry-style gallery.

Why icons, avatars and buttons get squashed in a flex row, how flex-shrink: 0 stops it, and how the browser decides who shrinks most. Live demos and fixes.

justify-self moves one grid item left, center or right inside its cell. Try it live with justify-items and place-self, and see why flexbox ignores it.

hyphens: auto splits long words at syllables, but only when the page sets a language. Try none, manual and auto live, plus ­, hyphenate-character and justify.

Indent the first line of a paragraph with CSS text-indent, make a hanging indent for reference lists, and add a drop cap with ::first-letter. Live demos and code.

Read a picked file in the browser with FileReader: readAsText, readAsDataURL and readAsArrayBuffer, onload and onerror, file.text(), image previews and CSV tables.

Format numbers in JavaScript with Intl.NumberFormat: currency, percent, units, 1.2K compact notation, decimal places, formatToParts, and a live price formatter.

Run heavy JavaScript in a Web Worker so the page never freezes. One-file setup with a Blob URL, postMessage, progress, cancel with terminate, and transferables.

Make a UUID with crypto.randomUUID(), build short IDs and passwords with crypto.getRandomValues(), and fix the "not a function" error on http pages. Live examples.

Read and set location.hash in JavaScript, react with the hashchange event, and build hash tabs for a one-file page. Live examples, encoding rules and history.

Record a canvas animation to a video file with MediaRecorder and captureStream, no camera needed. Pick a mimeType, collect chunks, download the file, add sound.

Use TextEncoder and TextDecoder to count real UTF-8 bytes, catch broken input with fatal, and Base64-encode Korean or emoji text. Live examples and code to copy.

Make sound with an AudioContext: oscillators, gain envelopes that stop clicks, resume() for autoplay, a playable keyboard synth and an AnalyserNode visualiser.

Build a custom right-click menu with the contextmenu event. Keep it on screen, close it on Escape or a click outside, and open it by keyboard and long press.

Draw a line chart in HTML from an array of numbers with plain SVG and a short script: scales, axes, gridlines, hover tooltip, responsive viewBox, several series.

Build a flowchart in HTML with no library: CSS grid or flex places the boxes, SVG paths draw the arrows from measured positions, and a ResizeObserver redraws them.

WebGL in a plain HTML page: get a context, write a vertex and a fragment shader, fill a buffer, animate with uniforms and add a texture. Live examples and fixes.

What the W3C Nu HTML validator checks, the errors it finds most often, and how browsers quietly repair them. Live demos show the repaired tree and a small checker.

Write formulas in HTML with the <math> tag: mi, mn, mo, fractions, powers, subscripts and square roots. Live examples, a tested browser table and accessibility tips.

Read what a user typed or picked: .value, valueAsNumber, valueAsDate, checked, selects, radio groups and FormData. Live examples, a working calculator and fixes.

How CSS content-visibility skips off-screen rendering, why it needs contain-intrinsic-size, and what auto and hidden do to Ctrl+F, focus and screen readers.

Put a border on one side with border-left, border-top, border-bottom or border-right. Accent bars, underlines, logical sides for RTL, and triangles, with live code.

How CSS border-image cuts a picture into nine pieces and draws it as a border. Live examples for slice, fill, width, outset and all four repeat modes.

What margin-left: auto does in a flex row, how margin: 0 auto centres a block, margin-top: auto in a column, collapsing margins and negative margins, tried live.

What CSS bottom, top, left and right measure from, how the inset shorthand works, and how inset: 0 stretches a box. Live examples, a pinned card footer and fixes.

How CSS object-position places an image inside its box: keywords, percentages, edge offsets, focal points for avatars and banners, and animating it. Live demos.

Put sesame dots or circles over or under text with CSS text-emphasis. Set the shape, color and side, and fit numbers in vertical text. Live examples.

field-sizing: content makes inputs, textareas and selects size to their text. Live examples, min and max limits, a support check and a short JavaScript fallback.

Use text-box-trim and text-box-edge to cut the empty space above capitals and below the baseline, so buttons and headings line up. Live examples, code, fallback.

Make text italic or bold in HTML with a tag or CSS. Live examples of font-style italic and oblique, font-weight numbers, fake italic and bold, and variable weights.

Set wght, wdth, slnt, opsz and custom axes with font-variation-settings, or with font-weight and font-stretch. Live sliders, a system font that works, and fixes.

What the HTML cite tag is for, how it differs from the hidden cite attribute on q and blockquote, and how dfn, abbr and links build a glossary readers can use.

Put arrowheads on SVG lines and paths with the marker element: marker-start, marker-mid, marker-end, orient, markerUnits and context-stroke, with live examples.

Fill SVG shapes, text and strokes with linearGradient and radialGradient. Stop offsets, stop-opacity, gradientUnits, spreadMethod and fixes, with live examples.

Build SVG filters from primitives: feGaussianBlur, feDropShadow, feColorMatrix, feFlood, feComposite and feDiffuseLighting, then apply them to HTML with CSS.

Pinch to zoom an image or map inside a page with pointer events: two fingers, zoom around their midpoint, Ctrl + wheel on desktop and a reset button. Live examples.

Add swipe gestures to HTML with pointer events: follow the finger, decide on distance or speed, tell a swipe from a scroll, and use touch-action: pan-y. Live code.

div is a block box for layout, span is an inline box for a few words. See the layout boxes in a live demo, check for a meaningful tag first, and avoid nesting traps.

What meta charset="utf-8" does, why it must sit in the first 1024 bytes, and how a BOM or the server header overrides it. Live demos decode the same bytes.

How the HTML p tag really works: why a div or list inside a paragraph splits it, when the closing tag is optional, and how to space and size readable paragraphs.

How to style the body element: remove the default 8px margin, why the body background fills the window, 100% vs 100dvh, theme classes and modal scroll lock.

Every way to write colors in HTML and CSS: names, 3 to 8 digit hex, rgb(), hsl(), oklch(), transparency and currentColor, plus a live contrast ratio calculator.

isolation: isolate makes an element a stacking context and changes nothing else. Stop z-index leaks, contain mix-blend-mode, and find contexts with a live inspector.

What text-rendering, font-kerning, -webkit-font-smoothing and font-size-adjust really change, measured in Chromium. Live tests for your own fonts, plus the code.

Set how wide a tab is with the CSS tab-size property. Live examples for pre and textarea, tabs vs spaces, white-space, and a code viewer with a tab width picker.

How the SVG circle and ellipse work: cx, cy, r, rx and ry as attributes and CSS properties, animating cx with a transition, rounded rect corners and a drag editor.

How SVG text works: x and y, text-anchor, dominant-baseline for vertical centring, tspan line breaks, textPath on a curve, and labels screen readers can read.

What forced colors mode does to your CSS, and the fixes: @media (forced-colors: active), system colours like Canvas and Highlight, forced-color-adjust, testing.

Build a heart like button from a real button with aria-pressed, an SVG heart and a count. Add a pop animation, reduced motion and an optimistic update.

Add keyboard shortcuts with JavaScript keydown: e.key vs e.code, Mac Cmd vs Ctrl, skipping text fields, preventDefault, a Ctrl+K command palette and a help dialog.

Four hover effects in plain CSS: a lifting button, a growing underline, an image zoom and a sliding caption. Live examples, keyboard focus and touch screens covered.

How the JavaScript wheel event works: deltaY and deltaMode, why preventDefault is ignored, trackpad pinch as ctrlKey, sideways scroll and canvas zoom.

What element.textContent reads and sets, how it differs from innerText with hidden text and line breaks, why it is faster, and how to put user text on a page safely.

Build a CSS-only carousel with ::scroll-marker, ::scroll-button, scroll-target-group and scroll-initial-target. Live demos, tested engines and a script fallback.

Close the gaps around Japanese and Chinese brackets and commas with text-spacing-trim, and add space next to Latin text with text-autospace. Live demos included.

Change the colors inside a color font with font-palette and @font-palette-values. Live examples on the Segoe UI Emoji font, measured browser results, and fixes.

Use CSS object-view-box with inset() to crop and zoom an image or video on the element itself, animate the zoom, and add a fallback for browsers that ignore it.

box-decoration-break: clone gives every wrapped line its own padding, corners and shadow. Live examples, the -webkit- prefix rule, and boxes split across columns.