How to Build a Simple Web Tool from Scratch
The simplest tool you can build — and a genuine first project — is a single web page that takes an input and shows an answer: a calculator, a converter, a checker. No framework, no server, no database. Just three files, or even one. This guide builds a working unit converter and publishes it free.
Step 1: One file, three languages
Create a file called index.html. HTML is the structure (inputs and a result area), CSS is the look, JavaScript is the behaviour. Here is a complete, working metres-to-feet converter:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Metres to Feet Converter</title>
<style>
body { font-family: system-ui, sans-serif; max-width: 480px; margin: 40px auto; padding: 0 16px; }
input, button { font-size: 18px; padding: 10px; margin: 6px 0; }
#result { font-size: 22px; font-weight: bold; margin-top: 16px; }
</style>
</head>
<body>
<h1>Metres to Feet Converter</h1>
<label for="m">Metres:</label>
<input type="number" id="m" value="10" step="any">
<button id="go">Convert</button>
<p id="result"></p>
<script>
function convert() {
var m = parseFloat(document.getElementById("m").value);
var out = document.getElementById("result");
if (!(m >= 0)) { out.textContent = "Enter a length of 0 or more."; return; }
out.textContent = m + " m = " + (m * 3.28084).toFixed(2) + " ft";
}
document.getElementById("go").addEventListener("click", convert);
document.getElementById("m").addEventListener("input", convert);
convert();
</script>
</body>
</html>Step 2: Test it properly
Open the file in a browser by double-clicking it — no server needed. Test five cases: a normal value (10 → 32.81 ft), zero, a decimal, a negative (should show the error message), and an empty field. Then test on your phone's browser too: if inputs are too small or the layout overflows, fix the CSS before publishing. Most first tools fail on mobile, not on maths.
Step 3: Publish it free
Option one: drag the folder onto Netlify Drop for an instant live link. Option two: push it to a GitHub repository and enable GitHub Pages in the repository settings. Both are free for a simple static page. Add a real title and a one-sentence description in the <head> — that is what search engines show — and share the link with five real users before building a second tool. Their confusion is your specification for version two.
From one tool to a toolset
Every new tool is the same pattern: one page, one job, inputs, a formula, a result. Copy the file, change the formula and the labels, and you have a second tool. A collection of single-job tools, linked from one index page, is exactly how the free tools on this site grew — and it is a far better portfolio than one half-finished mega-app.
Frequently asked questions
Do I need a server or a domain to publish a tool?
No. A static HTML page needs only static hosting — Netlify Drop or GitHub Pages both work free. A custom domain is optional and can be added later.
Should I learn a framework first?
No. Frameworks help for large apps, but they hide the fundamentals. Build three small tools in plain HTML, CSS and JavaScript first; frameworks will make sense afterwards.
How do people find my tool?
Give each tool one clear job, a descriptive title, and a sentence explaining what it does. Search engines reward pages that answer one question completely — the same principle behind this site's tool pages.