All HTML guides

How the HTML select tag works: option value vs text, optgroup, a placeholder that cannot be submitted, multiple select, reading values in JavaScript, and styling.

Get the user's location with navigator.geolocation: the permission prompt, HTTPS, options, error codes 1-3, iframe permission, and haversine distance.

How IntersectionObserver works in JavaScript: threshold, rootMargin and root, with live examples for scroll reveal, infinite scroll and seen tracking, plus fixes.

Parallax scrolling in HTML: background-attachment: fixed, CSS perspective, a JavaScript layer effect and scroll-driven animations. Live examples and phone fixes.

Make a frosted glass card with CSS: a see-through background, backdrop-filter blur, light border and shadow. Live generator, readable text, fallbacks and dark mode.

How CSS perspective adds real depth to rotateX, rotateY and translateZ. Parent property vs perspective(), preserve-3d, backface-visibility, a cube and a tilt card.

How @keyframes and the animation properties work: from, to and percentages, duration, delay, fill-mode, steps() and the shorthand order, with live examples to copy.

How the CSS order property reorders flex and grid items: default 0, negative values, ties, moving a sidebar on phones, and why Tab still follows the HTML.

How the CSS gap property spaces items in flexbox, grid and multi-column layouts, why it beats margins, and what to check when gap does nothing.

How the HTML video tag works: controls, poster, source formats, muted autoplay, a CSS-style background video, WebVTT captions and a custom player to copy.

When to use the HTML section tag, and when article or a div fits better. How a section becomes a region landmark, heading levels, and a blog page example.

Style underlines and strikethroughs with text-decoration: style, colour, thickness and offset. A live builder, the child-underline trap and link styles to copy.

Set dir="rtl" for Arabic and Hebrew, isolate user names with <bdi>, and write CSS that flips on its own. Live examples, code to copy, and fixes for jumbled text.

Style a web page for printing with @media print: hide menus, print link addresses, keep background colours, set @page margins and add a Print button. Live examples.

Make a web page read text aloud with the Web Speech API: speak, pause and stop, pick a voice, fix an empty getVoices() list, and highlight words as they are read.

How the svg tag in HTML works: the viewBox coordinate system, rect, circle, line, polygon and path, fill and stroke, groups, text, CSS styling and accessibility.

Build a drag-to-reorder list in plain HTML and JavaScript: the Drag and Drop API, a pointer version that works with touch, keyboard moves and reading the new order.

How CSS min-height differs from height, why 100vh is too tall on phones and what dvh fixes, why flex children need min-height: 0 to scroll, and when % is ignored.

Flow text into newspaper columns with CSS columns. Live examples for column-count, column-width, column-span and break-inside, plus a masonry-style card wall.

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.