Build it in HTML

What Capacitor does with an HTML file, a working single-file page you can try here, the commands to wrap it as an iOS or Android app, and the usual mistakes.

Turn speech into text in a web page with the SpeechRecognition API. Live examples to try, code to copy, and fixes for permission, prefix and stops-listening errors.

Babel is a JavaScript compiler. Load it from a CDN and a text/babel script tag turns JSX and modern JavaScript into code a browser runs. Live examples and fixes.

Drive an on-screen HTML graphic from another tab with the BroadcastChannel API. Live controller and scoreboard examples, code to copy, and why messages go missing.

Add HTML, CSS and JavaScript to a Squarespace Code block: the Type setting, style tags, a snippet to copy, and fixes for code that shows up as plain text.

Make a phone vibrate from a web page with navigator.vibrate(). Live examples, pattern arrays, the tap rule, why it does nothing on some devices, and a fallback.

The storage event fires in other tabs when localStorage changes. The smallest two-tab example, the event fields, and why it skips the tab that made the change.

Bulma in a single HTML file: the one link tag that loads it, a starter page, columns that stack on phones, the few lines of JavaScript it leaves to you, and fixes.

Pyodide runs Python in the browser through WebAssembly. A working single-file HTML example, how to show output and load packages, and the mistakes to avoid.

textformatupdate is a browser event that tells a custom editor which text an IME is composing to underline. Live examples, TextFormat values, and the Outlook mix-up.

UIEvent is the browser interface behind clicks, keys, focus and wheel events. See detail and view in a live page, and what React.UIEvent hands your handler.

What the SVG path element is in HTML and what SVGPathElement gives you in JavaScript: measure a path, walk along it, build one in code. Live examples to copy.

Splide JS is a slider and carousel library. The smallest single-file HTML that works from a CDN, the options that matter, common mistakes, and how to share it.

ReportingObserver is a browser API that hands your JavaScript the deprecation and CSP violation reports the browser makes. Live demos, code to copy, and fixes.

TextEvent and the textInput event are deprecated. See what fires when someone types in an HTML text field, with live examples, and which events to use today.

Brython runs Python inside an HTML page. Copy a one-file example, see the three parts it needs, the mistakes that stop it, and how to share the page as a link.

Build a digital clock in JavaScript in one HTML file: the smallest working code, how each line works, 12-hour and alarm versions, common mistakes and a share link.

Build an analog clock with HTML, CSS and a little JavaScript. Live examples, the hand-angle formulas, a fix for the backward-spinning second hand, and a share link.

Copy to clipboard with JavaScript in one HTML file: a working example, the fallback, formatted copy, the click rule, React and console notes, and fixes.

Build infinite scroll in JavaScript with one HTML file and no library: the smallest working version, how it works, common mistakes, and how to share it as a link.

Lazy loading images in HTML takes one attribute: loading="lazy". Live examples, a script version for CSS backgrounds, and the mistakes that undo it.

A typing effect in CSS needs one HTML file and no JavaScript. Live examples, the CSS explained line by line, the usual mistakes, and how to share it as a link.

Pagination in JavaScript is one slice and one subtraction. Live examples with page numbers and a table, the bugs to avoid, and how to share the page as a link.

Build a weather app with JavaScript in one HTML file: build the API URL, fetch, check the answer, show it. Live examples, the code to copy and the usual fixes.

Tic tac toe in JavaScript, start to finish: a working game in one HTML file, how each part works, the bugs that break it, and how to share it as a link.

Build rock paper scissors in JavaScript inside one HTML file: the smallest working code, how each line works, the common mistakes, and how to share it as a link.

Build a random quote generator in one HTML file with an array, Math.random and a button. Live examples, a no-repeat fix, and when you can skip a quote API.

Build a color picker in JavaScript in one HTML file: the smallest working version, a custom picker with hex, copy and eyedropper, and a link to share it.

Build a currency converter in JavaScript inside one HTML file: a rates table, two dropdowns, one formula, Intl formatting, live examples and the mistakes to avoid.

Build a unit converter in JavaScript in one HTML file: working code, why a base unit beats pairs, temperature, a currency version, common bugs, and a share link.

Build an expense tracker in JavaScript in one HTML file: add, list, total and delete, with money kept in whole cents. Live examples, full code, common fixes.

Build a pomodoro timer in JavaScript in one HTML file: the smallest working version, the focus and break cycle, the mistakes that lose time, and a share link.

Try Array.map in two live HTML demos. Build product price cards, inspect returned values, and avoid the common mistake.

Try Array.filter in two live HTML demos. Build available product picker, inspect returned values, and avoid the common mistake.

Try Array.reduce in two live HTML demos. Build shopping cart total, inspect returned values, and avoid the common mistake.

Try Array.sort in two live HTML demos. Build numeric price sorting, inspect returned values, and avoid the common mistake.

Try String.split in two live HTML demos. Build comma-separated tag chips, inspect returned values, and avoid the common mistake.

Try String.replace in two live HTML demos. Build first welcome-message placeholder, inspect returned values, and avoid the common mistake.

Try String.replaceAll in two live HTML demos. Build complete badge-message update, inspect returned values, and avoid the common mistake.

Try String.trim in two live HTML demos. Build pasted team-name cleanup, inspect returned values, and avoid the common mistake.

Try Object.keys in two live HTML demos. Build editable settings fields, inspect returned values, and avoid the common mistake.

Try Object.entries in two live HTML demos. Build labeled department budget rows, inspect returned values, and avoid the common mistake.

Try Number.parseInt in two live HTML demos. Build imported seat count, inspect returned values, and avoid the common mistake.

Try Number.toFixed in two live HTML demos. Build two-decimal price display, inspect returned values, and avoid the common mistake.

Try optional chaining in two live HTML demos. Build optional booking contact, inspect returned values, and avoid the common mistake.

Try destructuring in two live HTML demos. Build booking summary fields, inspect returned values, and avoid the common mistake.

Try spread in two live HTML demos. Build independent preferences preview, inspect returned values, and avoid the common mistake.

Try Array.find in two live HTML demos. Build booking reference lookup, inspect returned values, and avoid the common mistake.

Try Array.findIndex in two live HTML demos. Build urgent ticket locator, inspect returned values, and avoid the common mistake.

Try Array.some in two live HTML demos. Build overdue task alert, inspect returned values, and avoid the common mistake.

Try Array.every in two live HTML demos. Build launch readiness checklist, inspect returned values, and avoid the common mistake.

Try Array.toSorted in two live HTML demos. Build independent catalog ordering, inspect returned values, and avoid the common mistake.

Try Array.reverse in two live HTML demos. Build newest-first activity feed, inspect returned values, and avoid the common mistake.

Try Array.toReversed in two live HTML demos. Build two views of one history, inspect returned values, and avoid the common mistake.

Try Array.slice in two live HTML demos. Build three-result search preview, inspect returned values, and avoid the common mistake.

Try Array.splice in two live HTML demos. Build replace a workshop session, inspect returned values, and avoid the common mistake.

Try Array.toSpliced in two live HTML demos. Build compare agenda revisions, inspect returned values, and avoid the common mistake.

Try Array.concat in two live HTML demos. Build combine guest rosters, inspect returned values, and avoid the common mistake.

Try Array.flat in two live HTML demos. Build workshop room roster export, inspect returned values, and avoid the common mistake.

Try Array.flatMap in two live HTML demos. Build order packing board, inspect returned values, and avoid the common mistake.