Build it in HTML

Make a div you can drag with a mouse or a finger, in about 20 lines of JavaScript. Live examples to try, the code to copy, and fixes for jumping and phones.

How CSS transform moves, rotates, scales and skews an element without touching layout. Live examples, why function order matters, and fixes when it does nothing.

Build a back to top button that works without JavaScript, scrolls smoothly, appears after scrolling and shows reading progress. Live examples, code, and fixes.

Smooth scroll with one CSS line, plus scroll-margin-top for sticky headers, scrollIntoView for buttons, reduced motion, and a nav that marks the section in view.

Build a before/after image comparison slider with two stacked layers, clip-path and a range input or drag handle. Live examples, code to copy, and fixes.

Build a drag and drop file upload zone in HTML and JavaScript: dragover and drop, a highlight, a click fallback, image previews and type and size checks.

Build an image or card carousel in plain HTML, CSS and JavaScript. Scroll-snap for swipe, a sliding track with dots, and autoplay that pauses. Live code to copy.

The <marquee> tag is obsolete, though browsers still render it. Build the same scrolling text in CSS with a seamless loop, hover pause and reduced motion.

What happens when an HTML form is submitted: GET vs POST, why unnamed fields vanish, the submit event, FormData, and requestSubmit() vs submit(). Live examples.

How box-shadow works value by value, with a live generator, six presets to copy, cards that lift on hover, and fixes for shadows that get cut off or vanish.

z-index only works on positioned elements and flex or grid items, and only inside its stacking context. Live examples to try, and fixes for when it seems ignored.

Style HTML buttons with CSS, one line at a time: reset, padding, colour, hover, pressed and focus states, plus primary, outline, ghost, danger and loading buttons.

How element.innerHTML reads and sets HTML, when to use textContent or insertAdjacentHTML instead, why += breaks your page, and how to show user text safely.

Hover every CSS cursor value in a live grid, learn which one fits which job, and add a custom cursor image with a hotspot and the fallback keyword it needs.

Find elements with CSS selectors in JavaScript: by id, class, attribute or state. Try selectors live, see why querySelector returns null, and loop a NodeList.

How document.getElementById works: read and set .value, .textContent, .style and .classList, and fix the null error. Live examples and a tip calculator to copy.

Group related form fields with fieldset and legend: named radio groups, disabling a whole section at once, CSS for the border and legend, and fixes for phones.

How CSS opacity works from 0 to 1, why it fades the text too, how to make only the background see-through, and opacity: 0 vs visibility: hidden vs display: none.

Every HTML input type in one live gallery: what each one draws, the value your script gets, the phone keyboard it asks for, and the validation it adds for free.

JSON.parse turns JSON text into objects; JSON.stringify turns them back. A live validator, the error each mistake gives, and a table built from JSON in the page.

What each CSS display value changes: new lines, width and height, margins. Why width does nothing on a span, the inline-block gap, and display: none vs hidden.

What each CSS position value does, what top and left are measured from, and why absolute jumps to the page corner. Live examples to try, and fixes when it breaks.

Set a background colour with CSS in hex, rgb, rgba or hsl, fill the whole page, and keep text readable. Live examples to try, code to copy, and fixes.

How the HTML audio tag works: controls, source fallbacks, why autoplay with sound is blocked, the JavaScript API, and a custom player you can try and copy.

How the HTML ul tag works: ul vs ol vs dl, nested lists, list-style-type values, ::marker, custom bullets and a flex nav bar. Live examples to edit and copy.

What the h1 tag means, how h1-h6 build a page outline, why the level is not the size, and how to size an h1 in CSS with clamp(). Live examples and fixes.

How the CSS border property works: why a border needs a style to show, one side at a time, border-radius for pills and circles, outline vs border, and fixes.

What the DOM is, how it differs from your HTML source, and how JavaScript selects, creates, moves and removes elements. Live tree viewer, kanban example and fixes.

How to make a text input box in HTML: the input tag with a label, value vs defaultValue, input vs change events, CSS for the field, and live examples to copy.

How the HTML textarea works: rows and cols vs CSS, resize: none, auto height, placeholder, reading .value, keeping line breaks, and a character counter.

Add suggestions to any text box with <datalist> and the list attribute. Live examples, datalist vs select, filling it from JavaScript, and fixes when it fails.

How object-fit fits an image or video into a fixed box: fill, contain, cover, none and scale-down side by side, object-position, and why it sometimes does nothing.

How CSS ::before and ::after work: why content is required, why width is ignored, how to position them, and five real uses. Live examples, code and fixes.

How max-width, width and min-width differ, with live examples: a centered column, images that fit, readable line length in ch, and fixes when max-width fails.

Define CSS variables on :root, use them with var() and a fallback, override them per component, change them from JavaScript, and fix the ones that do not work.

Set a CSS background image with url(), then control it with background-size, background-position and background-repeat. Live examples, a full-screen hero, and fixes.

The span tag wraps part of a line so CSS and JavaScript can reach it. Live examples of span vs div, when strong, em or mark fit better, and why width does nothing.

Every CSS filter function on one live example: blur, brightness, grayscale, sepia, hue-rotate and more. Chaining order, backdrop-filter glass, and fixes.

Set line-height in CSS with a unitless number so it scales with each font size. Live examples, the px inheritance trap, one-line centering and fixes.

What the HTML nav tag does, when to use it and when a div or footer is enough. Label several navs, mark the current page, add a skip link. Live examples.

What the hr tag means, why its default line is a grey inset border, and how to set colour, thickness, dashes, gradients and margins. Live styler with CSS to copy.

Cut any element into a triangle, circle or custom polygon with CSS clip-path. Drag points in a live editor, copy the value, and fix shadows and jumpy animations.

How the HTML label tag works: for and id or wrapping, bigger checkbox click targets, screen reader names, layouts, custom toggles, and why a label is not working.

How the JavaScript FormData object reads a form: get vs getAll, append and set, checkboxes, files, converting to JSON, and why console.log shows it empty.

How the HTML ol tag numbers a list: type, start, reversed and li value, list-style-type in CSS, and CSS counters for number badges and 1.1 / 1.2 outlines.

How the HTML img tag works: src and alt, width and height to stop the page jumping, loading="lazy", the gap under images, and a fallback for broken files.

How to mark up a quote with blockquote, q and cite, where to put the source, and how to replace the default indent with a bar, a big quote mark or a card.

What HTML entities are, the few characters you must escape, when UTF-8 lets you type the rest, how &nbsp; really works, and a symbol list you can search and copy.

What belongs in the HTML head tag, the order that avoids garbled text and late styles, head vs header, and a complete head template to copy. With live examples.

What the HTML main tag is for, the one-per-page rule, where it may not go, main vs div and section, a skip link target and a sticky footer layout. Live examples.

When to use the br tag in HTML, when p and margin are the better fit, how to show typed line breaks with white-space: pre-line, and where wbr helps long URLs.

How the HTML figure tag and figcaption work: caption position, the default side margins, caption vs alt, and numbered figures with CSS counters. Live examples.

How CSS text-transform works: uppercase, lowercase, capitalize and none, why capitalize is not title case, lang and Turkish i, and small caps. Live examples.

vertical-align only works on inline boxes and table cells, not on a div. Live examples of every value, the image gap fix, and how to center anything vertically.

text-align lines up the text, images and buttons inside a block, not the block itself. Live examples of center, justify and start/end, plus centering fixes.

Align flex items along the main axis or grid tracks along the inline axis. Try six common values and diagnose missing space, growth and auto margins.

How CSS aspect-ratio sizes any box: 16:9 video frames, square tiles, 4:3 cards. Live examples, the padding hack it replaces, and fixes when it does not work.

An HTML comment is <!-- text -->. Write one-line and multi-line comments, avoid the nesting trap, use the editor shortcut, and comment inside CSS and JavaScript.

What the HTML aside tag is for, how it differs from section and div, and how to build a sidebar that drops below on phones and one that stays sticky. Live examples.

The strong tag marks important text, b only draws the eye, and both look bold. Live examples of strong vs b, font-weight 100 to 900, and why 600 can look like 700.