All HTML guides

A browser cannot read Sass. Compile .scss to CSS, or compile it inside one HTML file with the sass package from a CDN. Live examples, code and fixes.

ApexCharts needs Angular only if your app is Angular. In one HTML file it is a script tag, a div and render(). Live examples, code to copy, and the usual mistakes.

Save a folium map as one HTML file with m.save, see what the file contains, fix a grey or empty map, and share it as a link. Live Leaflet examples to try.

Use lit-html 3.2.1 in a single HTML file: a pinned CDN import, live examples with render() and a LitElement tag, and fixes for the usual mistakes.

Use Ionic Framework in a plain HTML file with two CDN tags and no build step. Live examples, code to copy, common mistakes, and how to share the page as a link.

HTML has no notification tag. Use the JavaScript Notification API: ask permission on a click, then show one. Live examples, copyable code and fixes.

SVGSVGElement is the JavaScript object behind an inline svg tag. A short guide with live examples: size, viewBox, click coordinates, animation clock.

Glitch ended project hosting on July 8, 2025. Fold index.html, style.css and script.js into one HTML file, try a CSS glitch text effect, and share it as a link.

Add a browser payment sheet to an HTML page with the Payment Request API. A minimal example to run, the request object, the errors show() throws, and a fallback.

EventSource in JavaScript opens a one-way stream from a server to your page. Live examples, the stream format, reconnecting, and the mistakes to avoid.

What HTML events are, how onclick and addEventListener differ, which events you will use most, and why a handler runs on page load. Live examples to try and copy.

Show a browser notification from an HTML page with the Notification API: ask permission on a click, pass a title, body and tag, and fix denied and phone errors.

Add animate on scroll to a single HTML file with the AOS library: a stylesheet, a script, AOS.init() and a data-aos attribute. Live examples, settings and fixes.

AMP HTML is a restricted subset of HTML. See the smallest valid page, try a live rule checker, learn why images need width and height, and share a plain version.

How the JavaScript submit event works: when it fires, what event.submitter tells you, why preventDefault must come first, and one listener for many forms.

PyScript in a single HTML file: the two head tags, a script of type py, the mistakes that leave a page blank, and why a share link cannot run it.

Show LaTeX math in one HTML file with KaTeX: the three tags to copy, the delimiters it finds, live examples, and the mistakes that leave raw dollar signs on screen.

How SolidJS differs from React, and how to run Solid in a single HTML file with no build step. Live examples, the three imports, common mistakes and a share link.

Build a parcel viewer in one HTML5 file: draw parcels from GeoJSON as SVG, click for details, zoom, and share it as a link. Also what the Parcel bundler is.

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.

Built a quiz or activity in Gemini Canvas? Copy its HTML, paste it into NOS and send students one link that opens in any browser, with no Gemini access needed.

Made a quiz in Gemini Canvas? Copy the code, share it as a link that opens on any phone or laptop, and fix a question later without changing the link.

School Google accounts cannot share Gemini Canvas links. Copy the code out, paste it into NOS, and send a normal link that opens on any phone with no sign-in.

A first-time Gemini Canvas tutorial for teachers: prompt a lesson page, check the preview, tweak the wording, then share a link students can open.

Pasting AI-made HTML into a Moodle page can lose the scripts. Put the page at a link and add it as a URL resource. Steps, settings and fixes.

Moodle removes scripts from pasted text, so an AI-made quiz goes dead. Give the page its own link and add it as a URL in your course. Steps and a quiz to copy.

Your Blackboard Ultra may not run pasted HTML. Turn the page ChatGPT, Claude or Gemini made into a share link and add it as a web link students can open.

Attaching an .html file hands students a file to open. Paste a share link into Classroom's Link option instead, so the page opens as a page. Steps and fixes.

Students build an HTML page, but a file is awkward to open. Have them paste it into NOS and turn in the share link in Google Classroom. Steps for teachers.

Pasted AI-made HTML loses its scripts in the Canvas editor. See what Canvas keeps, how to link a working page instead, and what you give up versus embedding.

Ask an AI for a locked-puzzle escape room on your unit, share it as one link, and know what restarts when a student reloads. Free demo and prompt included.

A digital escape room maker you can write with an AI chat: one HTML page with locks and clues, shared as a link students open on any device without an account.

Ask an AI for a clickable timeline in one HTML file, check the dates, and send students a link that opens on phones. Includes how to fix a date.

Turn a course syllabus into one scrollable web page with the schedule and policies, send a single link, and correct it mid-term without resending anything.

Classroom websites free: ask an AI for one page with your schedule, links and contacts, then share it as a link. No site builder, and no sign-in for families.

Skip the template hunt. Describe your class page to an AI, paste the HTML, fix names and dates by clicking, and send parents one link. Two pages to copy.

An original fictional weekly family update with learning plans, checked dates, optional home conversation and a private reply route.

A free back to school newsletter template you can copy: supplies, daily routine and contacts on one page. Ask AI to fill it in, then send families a link.

Show your slides in the room, then give families a link they can reopen on a phone: schedule, supply list and contact in one page. AI prompt and steps.

A free sub plans template as one web page: schedule, seating notes and routines. Copy it, fill it in, and send one link you can still change the night before.

A parent teacher conference template with times, room and what to bring, shared as one link. When a time changes, you fix one line and the link stays the same.

A free Kahoot alternative: have an AI write a quiz page, share it as a link, and students play on any phone with no account. Scores are not saved.

Make a Jeopardy-style review board with AI as one web page. Show it on the class screen from a link, keep score by team, and skip PowerPoint macros.

Have an AI write a choose your own adventure as one HTML file, test every route, and send students a link that opens on their own phone or laptop.

A unit-price lesson in45-minute and 35-minute versions, with worked examples, an exit key and a prompt for a constrained AI draft.