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 stratego.html the game 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.js the game rules and the computer opponent

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.

4. Link to something you built somewhere else

Not everything has to live in this folder. Realm Master is built and kept somewhere else — this site just points at it.

In content.js, find externalApps and add a block:

{
  rune: '\uD83C\uDFB2',
  title: 'What you made',
  where: '',
  body: 'One sentence about it.',
  url: 'https://the-address-of-it',
  showOn: ['home', 'dnd']
}

showOn decides which pages it appears on. where is an optional small line above the title — leave it empty for none. Leave url empty and the card stays hidden, so you can list an idea before it is finished.

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. Open stratego.js and find scoreMove. Every line in there is one opinion about what makes a move good. Change the numbers and see if you can beat it.
  • Add a game. Chess, Connect Four, Battleship. Start by copying stratego.html and emptying out the middle.
  • 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