The instructions

How to build here

This website is made of plain files. No frameworks, no build step, nothing clever. If you can edit a text file, you can change this entire site.

What it is made of

Three kinds of file, and that is the whole list:

  • .html — one file per page. The structure: headings, buttons, boxes.
  • .css — how everything looks. Colours, spacing, fonts.
  • .js — what moves and reacts. The game, the dice, the map, the confetti.

The folder looks like this:

isaacrcarter/ wrangler.toml the publishing settings public/ index.html the front page dnd.html the dice and character sheets homes.html the world map math.html the video page dashboard.html your quests and XP build.html this page 404.html shown when a page is not found assets/ content.js ALL THE WORDS <- start here site.css ALL THE COLOURS site.js builds the menu on every page party.js the confetti dnd.js the dice and character logic stratego/ Frontline, the game you and Dad built index.html the game itself app.js screens, taps, turns, the solo opponent engine.js the rules: ranks, combat, movement deployment.js what counts as a legal army styles.css the game's own look sw.js lets it work with no signal

The one file to know

public/assets/content.js holds nearly every sentence on this site: the birthday message, the menu, the cards on the front page, the four homes, the list of math episodes. Change the text between the 'quote marks' and that is it.

The only rule

Keep the quote marks and the commas where they are. If the site goes blank after an edit, you deleted one of them. Put it back, or press undo (Cmd + Z) until it works again.

Three things you will do most

1. Change some words

Open public/assets/content.js, find the sentence, type a new one. Save.

2. Change the colours

Open public/assets/site.css. The first twenty lines are all the colours the site uses, each with a name like --gold and --ember. Change --gold: #e8b84b; to any other colour code and every gold thing on every page changes at once.

Colour codes are six characters after a #. Search the web for "hex colour picker" to get one for any colour you can imagine.

3. Add a whole new page

  1. Duplicate math.html and rename the copy — say chess.html.
  2. Open it and change the <title> and the heading.
  3. Open content.js and add a line to the nav list:
    { label: 'Chess', href: '/chess' },
  4. Publish. The page is live at isaacrcarter.com/chess.

Notice the trick: a file called chess.html becomes the address /chess. You never type the .html part in the browser.

Seeing your changes before the world does

In the Terminal, go to the project folder and run:

npx wrangler dev

That gives you a web address starting with localhost. It is a private copy of the site running on your own computer. Edit a file, reload the page, see the change. Nobody else can see it. Press Ctrl + C to stop.

Publishing it to the real internet

npx wrangler deploy

That is the whole thing. About five seconds later, isaacrcarter.com is showing your new version to anybody in the world who visits.

It works because the site lives on Cloudflare, which keeps a copy of these files in data centres all over the planet and serves whichever one is nearest to the person visiting. That is why it loads instantly in Cape Town and in California.

If you break something badly

You cannot permanently break it. The old version is still on Cloudflare — open the Cloudflare dashboard, find this project under Workers, and roll back to the version before yours. Then fix the file and deploy again.

Where to go next

  • Make the Stratego computer smarter. The game lives in public/stratego/. The rules are in engine.js and the opponent's thinking is in app.js. The copy here is the built version, so the comfortable place to edit it is the original project in Code Projects/frontline, then copy the files across.
  • Add a game. Chess, Connect Four, Battleship. Make a folder under public/ with its own index.html, the way stratego/ does, and it gets its own address.
  • Put your math videos up. The instructions are on the math page.
  • Add a page nobody else has. That is the actual point of owning a domain. It does not have to be useful.

The deal

The domain is registered for you and the site is live. Ask when you get stuck — but change things without asking first. It is yours, and the undo button always works.

Happy birthday.

Back to the front page