Part 2: Building a Mortgage Calculator With No Code

Last time I built a website in five minutes and it showed a 404 error. That was the point: the pipe from my laptop to the internet was built, and there was nothing in it yet.

Today I put something in it. I did not write any code, I did not open a code editor, and I did not upload anything anywhere. I described a page in one sentence and it appeared on the internet.

Then, to prove it was not a fluke, I changed it and it happened again.

Part 2 is about five minutes. The written version below has the exact prompts, which are easier to copy than to pause a video for.

One install, and the only money in the series

Claude Code. Download it, install it, sign in. Mac and Windows both.

This is the only thing in the entire series you pay for. Git, GitHub and Vercel are genuinely free. Claude needs a paid plan and the entry tier runs about twenty dollars a month. If you already pay for ChatGPT, it is the same order of thing.

Desktop or web — pick one, and I picked desktop

There are two ways to use it and they work differently enough that mixing them up will waste your morning.

The web version connects straight to a GitHub repository. There is no folder on your computer. You point it at a repo and it works there.

The desktop app works on a folder on your machine, and that folder talks to GitHub through Git.

This series uses desktop, and there is a reason beyond preference: if you use the web version, the Git we installed in the last episode was never needed. I would rather teach the version where you can see the files, because in a few episodes we are going to care about what is in them.

One thing people go hunting for and never find on the desktop app: there is no step where you connect Claude to GitHub. No Authorize button, no integration settings page. Claude works on a folder, the folder talks to GitHub through Git, and that is the whole connection. If you go looking for a settings screen you will be looking for a while.

GitHub is not Dropbox

This is the one that confuses everybody, so it is worth being blunt about.

When you created the repository last episode, nothing was created on your computer. It existed only on GitHub. That is exactly why we ended with a live website and an empty laptop.

There is no folder you picked and nothing syncs automatically. The connection gets made when you clone: whatever folder you are sitting in becomes the linked folder, and the link is stored inside it, in a hidden directory called .git. That is what remembers which repository this folder belongs to.

And nothing goes up to GitHub until something explicitly pushes. Saving a file changes nothing. That is why every prompt below ends with "commit and push it" — leave those words out and the file exists on your laptop and nowhere else, and the website does not change.

Getting the code onto my machine

I made an empty folder named after the project and opened it in Claude. First time you open a folder it asks whether you trust it. Say yes. It is asking because it is about to be able to read and change files in there, which is precisely what we want it to do.

Then, instead of looking up the command, I asked:

"Clone this repository into the current folder — not into a subfolder: [your repository URL]"

The "not into a subfolder" part matters. Without it you end up with mortgage-calculator inside mortgage-calculator, which works but reads like a mistake every time you open it.

It asked permission before running anything. That is what you want from a tool that can change your files, and you will see a few of these prompts early on. They are safe to approve here because everything is happening inside the one project folder — nothing else on your computer is in scope.

A browser window may pop up asking you to sign in to GitHub. That is Git asking, not Claude, and it is proving you are allowed to touch your own code. Once, then never again.

The sentence that became a webpage

Here is the whole thing:

"Create an index.html in the root of this folder — a simple page with 'Mortgage Calculator' as the heading and 'Coming soon' underneath, clean and centred. Plain HTML and CSS only, no frameworks, no build step. Then commit and push it."

Three things in there are doing more work than they look.

"Plain HTML and CSS only, no frameworks." Without that it might build something considerably more sophisticated than I need. I told it the ceiling, not just the goal.

"Commit and push it." That is the part that puts it on the internet. Not saving — publishing.

And I described the outcome, not the steps. I did not say create a file, add a heading tag, centre it with flexbox. I said what I wanted to exist and let it work out how. That is the actual skill, and it is the one that transfers to everything else you will ever build.

Nobody told Vercel anything

This is the part I want you to sit with.

I switched to Vercel — and I had not touched Vercel. I had not uploaded anything. I had not logged into it that day. And there was a new deployment, already building, called "add a placeholder landing page."

It noticed on its own. It has been watching that repository since the moment I connected it, four minutes into the previous episode. Something changed on GitHub, so it rebuilt and republished.

Green checkmark, refresh the phone, and the 404 was gone.

Then I did it again

One demonstration could be luck. So I changed the page to say "Coming next week" instead, and asked Claude to commit and push that too.

Same thing. New deployment appeared by itself. Went green. The live site updated.

That is the loop, and it is the only one you need:

Describe what you want. It writes the code and pushes it. Vercel notices and publishes it. Your phone shows it.

I am going to run that same loop perhaps forty more times over the next three episodes, and it will not get more complicated than what happened here. The calculator is not a harder version of this. It is this, repeated, with better sentences.

What it actually cost

Two episodes in: about ten minutes of work, one twenty-dollar subscription, and a live website that updates itself when I describe a change.

Compare that to what a small custom web tool quotes at from an agency and the gap is not a rounding error. That is the whole argument for learning this, and it is why I am filming it rather than writing about it in the abstract.

Part 3

Next episode the calculator does something. Five inputs, a real payment figure, and the Canadian math that most online calculators quietly get wrong — they use the American monthly-compounding formula, which overstates what your client actually pays. Getting that right is the difference between a demo and a tool you would send to somebody.

If you want to follow along, the setup from the first episode takes about fifteen minutes and costs nothing. Do that, install Claude, and you will be exactly where I am at the start of Part 3.