All HTML guides

Pick on the characters that get confused, not on looks. And on a page, a font file is a download, which changes the calculation.

Generating a static copy removes the database, the plugins and the patching. What survives the conversion and what has to be replaced first.

A layout designed for a page keeps its proportions and loses its readability on a phone. Which publications should convert and which should be rebuilt.

Export produces markup positioned to match the page. It preserves appearance at one width and does not reflow, which is the point of a page.

Timeline tools export a folder that runs anywhere. The questions are weight, what happens on touch, and whether the interaction earns its cost.

Screenplay formatting is a standard and a fixed document is the right carrier. What an address adds is knowing it was opened.

A connection shortcut in plain text, and a common phishing tool. Why they get stripped, and what to send colleagues instead.

A project document is read sceptically, on a phone, by people checking whether it changed. Publishing decisions matter as much as the writing.

Merge, split, compress and convert are all free somewhere. The question is whether the file left your machine and how long it stayed.

Building visually is genuinely faster for many people. The question nobody asks in the trial is what survives if you stop paying.

Static, functions, a container or a machine. Each step up adds capability and adds something you now maintain, and many projects can stop at the first.

Scheduling tools work. What loses bookings is a bare link with no context, an embed that fails on phones, and too many options.

Four pages, one stylesheet, your own domain. What to write, in what order, and why a framework is usually more work than plain styling.

Before a product exists, a page describing it honestly with a price and one way to respond tells you more than another month of building.

Small numbers make most analytics meaningless. Three things are worth watching, and enquiries matter more than all the visit figures.

Five jobs, five tools, and the one nobody sets up properly is how documents reach clients. That one decides how the work looks.

They all turn source content into pages. Pick on the language your team reads and whether the build will still run in three years.

Upload an .html file to Discord and the channel sees source code, not the page. What the file preview shows, and how to send a link that opens in the browser.

LinkedIn does not run your HTML as a post. Choose a document or a working page link, inspect the preview, and keep page corrections separate from card updates.

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.