Build it in HTML

Build an HTML range slider: show its value as it moves, style the track and thumb with CSS, fill the track, add ticks, and make a two-thumb price filter.

How the HTML abbr tag marks abbreviations, why its title tooltip misses phone and keyboard users, and how to style it and add a popup that works for everyone.

Use <sup> and <sub> for exponents, chemical formulas, ordinals and footnotes. Live examples, the CSS that stops uneven line spacing, and linked footnotes.

Use <code> for inline code and <pre><code> for code blocks. Live examples for whitespace, long lines and tab-size, plus a block with line numbers and a copy button.

The em tag marks stress that changes what a sentence means. Live examples of em vs i vs cite, true and fake italics, and styling emphasis without italics.

What each font-size unit measures from, why em shrinks nested lists, why rem follows the reader's text setting, and fluid type with clamp(). Live examples.

How addEventListener works: vs onclick, target vs currentTarget, bubbling and capture, once, passive and signal, and why removeEventListener seems not to work.

How the HTML meter tag shows a level in a known range, why its colour changes with low, high and optimum, meter vs progress, and how to style it. Live examples.

How CSS border-radius works: one to four values, the slash syntax for oval corners, circles, pills, nested corners, clipping children, and blob shapes. Live demos.

What CSS float is for, with live examples: wrap text around an image, clear: both, fix a parent with zero height, and wrap text around a circle with shape-outside.

The mark tag highlights text that matters right now, such as search matches. Live examples of styling it, mark vs strong vs span, and a safe search-in-page box.

Build a hamburger menu with a real button, a CSS icon that turns into an X, a drop-down or drawer, and closing on Escape, link click and outside click.

How to center a div horizontally and vertically: flex, grid, margin auto, text-align and absolute positioning, tried live, plus why centering is not working.

How setTimeout and setInterval work, how to stop them with clearInterval, why timers drift, and how to debounce input. Live examples to try and code to copy.

What thead, tbody and tfoot do, why the browser adds a tbody you never wrote, how to group rows with several tbody elements, and a live table with totals.

Give a table a real title with <caption>, move it with caption-side, and style whole columns with <colgroup> and <col>. Live demos show which CSS works on col.

What the td, th and tr tags do, how th differs from td, when to add scope, and how to pad and align cells. Live examples to try, code to copy, and fixes.

How the HTML dl, dt and dd tags work: several dd per dt, div groups, the default indent, a two-column CSS grid, and when to use dl instead of a table or ul.

Use the HTML ruby tag with rt and rp to put small readings above text: furigana for kanji, pinyin for Chinese. Live examples, CSS for rt, and fixes.

The HTML <template> tag holds markup that stays hidden until you clone template.content. Live examples for repeating rows, slots and a small custom element.

The HTML style tag puts CSS inside the page. Where it goes, why order and specificity decide the winner, the media attribute, and swapping themes with JavaScript.

Build a toggle switch in HTML and CSS on a real checkbox: track, knob, keyboard focus, disabled state, sizes, iOS look, a button version, and fixes when it breaks.

Open menus and panels with the HTML popover attribute and a button, no JavaScript needed. Auto vs manual, styling, positioning and popover vs dialog, live.

Make any element fullscreen with one JavaScript call: a fullscreen button, exit detection, :fullscreen styling, iframe permission, and fixes when it is refused.

Make a file in the browser with new Blob(), give it a blob: URL with createObjectURL, and use it for downloads and previews. Live examples, code, and fixes.

How element.classList adds, removes, toggles and checks CSS classes, why className = wipes the others, and how class toggles drive tabs, accordions and transitions.

Cut long text with "..." in CSS: the three properties for one line, line-clamp for several lines, and fixes for when the ellipsis will not show in flexbox or tables.

align-items places flex and grid items across the main axis. Try stretch, center and baseline live, compare it with align-content, and fix it when nothing moves.

How text-shadow works value by value, with a live generator, glow, neon, outline and letterpress examples to copy, and a fix for hard-to-read text over images.

Style scrollbars with scrollbar-color, scrollbar-width and ::-webkit-scrollbar. Which one the browser uses, how to hide a bar safely, and scrollbar-gutter.

A CSS loading spinner from one div and a keyframe: ring, dots, bars, pulse and skeletons, sized in em, read by screen readers, and shown only after a delay.

flex-wrap lets flex items move onto a new line instead of shrinking or overflowing. Try it live, set how many fit per row with gap, and fix a stretched last row.

Every value grid-template-columns accepts, with a live builder that shows the column sizes in px. fr math, minmax(0, 1fr), auto-fill vs auto-fit, rows and areas.

How the HTML checkbox works: checked attribute vs .checked, what a form sends, select all with indeterminate, accent-color and custom CSS boxes, with live demos.

How HTML radio buttons work: grouping by name, the default checked one, reading the value in JavaScript, keyboard use, and card-style radios in CSS. Live examples.

pointer-events: none lets clicks, taps and hover go to whatever is underneath. Live examples, the child-with-auto trick, SVG values, and what it does not block.

Set letter-spacing and word-spacing in CSS, and why em beats px. Live sliders, the off-centre button fix, ligatures, and a WCAG text spacing test to try.

Build a star rating from radio buttons: CSS-only hover, half stars, a read-only 4.3 display with partial fill, and an average screen readers can read. Live code.

The CSS box model with live demos: how width adds padding and border, why vertical margins collapse, and how to read box sizes in DevTools and JavaScript.

How flex-grow shares free space, how flex-shrink removes overflow, and what flex: 1, flex: auto and flex: none really mean. Live calculator, layouts and fixes.

What each CSS overflow value does, why overflow-x: hidden turns y into auto, hidden vs clip for sticky, and how to find what scrolls a phone page sideways.

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.