Box Runner

Appearance

Stage 0 — Create the Game Screen ​

Build the very first webpage for Box Runner. No Git yet — this is the "before" state so the save system feels meaningful later.

What You'll Learn ​

  • How to create a project folder
  • How to write a minimal HTML5 page
  • How to open an HTML file directly in your browser

Prerequisites ​

  • A text editor (VS Code, Sublime, even TextEdit)
  • A web browser (Chrome, Firefox, Safari, Edge)
  • A terminal you are comfortable opening

You do not need Git installed yet. That comes in Stage 1.

What Changes ​

You create a new folder called box-runner and add one file inside it: index.html. The HTML file has a title, a tagline, and a Start Game button.

Outcome ​

When you double-click index.html (or run open index.html), your browser shows a plain white page with:

  • A heading that says Box Runner
  • A line of text: Press Start to begin your adventure.
  • A button labeled Start Game

The button does not do anything yet. That is fine — this tutorial is about Git, not JavaScript. The webpage is just a prop so every Git commit corresponds to something you can see.