What an HTML tool is made of

A tool is a single .html file. Here you see a complete example and learn which part is responsible for what.

A tool has three layers, all in the same file: HTML defines what is there, CSS defines how it looks, and JavaScript defines what happens. The following example is a complete counter. You can copy it, save it as an .html file and load it into the toolbox.

A complete example

A complete counter in one file

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My counter</title>
  <style>
    body { font: 20px system-ui, sans-serif; background: #1b1713; color: #f5ecd8; text-align: center; padding: 2rem 1rem; }
    button { font-size: 2rem; min-height: 64px; padding: 0 2rem; border: 0; border-radius: 16px; background: #f2b84b; color: #2a1a05; }
    #count { font-size: 4rem; margin: 1rem 0; }
  </style>
</head>
<body>
  <h1>My counter</h1>
  <p id="count">0</p>
  <button id="plus" type="button">+1</button>
  <script>
    const count = document.getElementById('count');
    let n = Number(localStorage.getItem('n') || 0);   // fetch the saved value
    count.textContent = n;
    document.getElementById('plus').onclick = () => {
      n++;
      count.textContent = n;
      localStorage.setItem('n', n);                    // remember the value
    };
  </script>
</body>
</html>

What does what

The table shows who does what in this example.

What does what
Part	Job	In the example
<head>	Basics: character set, title, how it is shown on a phone	charset, title, viewport
<meta name="viewport">	Makes the page appear at normal size on a phone instead of tiny	width=device-width
<style> (CSS)	Look: colors, font sizes, spacing, layout	background, button, large number
<body>	Everything that is visible: headings, texts, buttons, input fields	heading, number, “+1” button
id and class	Names that CSS and JavaScript use to find an element	id="count", id="plus"
<script> (JavaScript)	Behavior: calculating, reacting to taps, measuring time, saving data	raise n, show the number
localStorage	The tool's notepad: values that are kept when you close the tool	getItem, setItem

Anything a web page can do, a tool can do: forms, calculations, drawing, sounds, animations, games. What matters is that everything is in this one file.