Set up the basic HTML/CSS/JS project structure for both games.

Today is your first coding day. Before you type a single character, let's understand what you're building on top of. Watch one or both of these:

Video 1: HTML in 100 Seconds — Fireship (2 min)

Ultra-fast introduction to HTML — the skeleton of every website. Fireship explains what HTML does and why every web page starts with it.

Video 2: CSS in 100 Seconds — Fireship (2 min)

Now add paint to the skeleton. CSS controls colors, fonts, layout — everything you see.

Video 3: JavaScript in 100 Seconds — Fireship (2 min)

The brain. JavaScript makes pages interactive — buttons click, data changes, games run. This is where your game logic will live.

Discussion after watching: If a website is a human body, HTML is the bones, CSS is the skin and clothes, and JavaScript is the brain. Which of these three do you think your game will use the most? (Trick question — it uses all three equally!)

Every web-based game starts with the same foundation: an HTML file for structure, a CSS file for appearance, and JavaScript files for logic. We create a clean folder structure that will support the entire project.

File Role Analogy
index.html Structure — what's on the page The skeleton
style.css Appearance — how it looks The skin and clothes
main.js Logic — what happens when you click The brain
game/state.js Game data — tracks all numbers The memory
game/loop.js Game actions — the core loop code The muscles
Ami — Combat Risk Engine

Create the project folder for AmiLurie.com. Use the same folder structure shown in the code scaffolding below. This will be the home for all game code going forward.
Ida — Economic Growth Engine

Create the project folder for Built: Foundations. Use the same folder structure shown in the code scaffolding below. This will be the home for all game code going forward.

Rules for this activity:

  1. No copy-paste. Type every character yourself. This is how your fingers learn the patterns.
  2. Instructor creates the folder first. Kids watch, then create their own from memory.
  3. After each file, save and refresh the browser. Check for errors immediately.
  4. If something breaks, read the error message out loud. Errors are teachers, not failures.

Step-by-step:

  1. Create a new folder on your Desktop called ami-game (or ida-game)
  2. Open the folder in your code editor (VS Code recommended)
  3. Create index.html — type the full HTML boilerplate below, character by character
  4. Create style.css — type the CSS reset below
  5. Create main.js — type console.log("Game Loaded");
  6. Create a subfolder called game
  7. Inside game/, create empty files: state.js and loop.js
  8. Open index.html in your browser. Press F12. Check the Console tab.

The magic moment: When you see "Game Loaded" in the console, you just made a website. Everything from here is just adding to this foundation.

 /index.html /style.css /main.js /game/state.js /game/loop.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Game</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Game Title</h1> <div id="game-container"></div> <script src="main.js"></script> </body> </html> /* style.css — CSS Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: sans-serif; background: #111; color: #eee; } // main.js console.log("Game Loaded");
  • Watch at least one Fireship video and discuss
  • Create the folder structure (no copy-paste!)
  • Write index.html with proper HTML5 boilerplate by typing it yourself
  • Link style.css and main.js correctly
  • Add console.log("Game Loaded") to main.js
  • Open in browser and verify console output (F12 → Console)
  • Change the page title to your game name and refresh to see the change
    •
    Checkpoint

    Page loads in browser with no errors. Console shows "Game Loaded".

    No game logic. No visuals. No Three.js yet. Just the skeleton.

    Forgetting to link the CSS or JS file — double-check the <link> and <script> tags in your HTML.

    Using wrong file paths — make sure the filenames match exactly, including capitalization.

    Not checking the browser console for errors — always open DevTools (F12) and look at the Console tab.

    This is the first time they type real code. Go slow. The pace should feel almost boring to you — that means it's right for them. Every character matters: a missing > will break the page, and that's a learning moment, not a failure.

    Walk through each file together. Explain what each file does. Use the body analogy: HTML = bones, CSS = skin, JS = brain. Ask them to point at their screen and say which file controls what they see.

    No copy-paste for the first file. This is critical. Typing builds muscle memory and forces them to notice every angle bracket, semicolon, and quote mark. After the first file, they can reference (but still type) the remaining files.

    If they get frustrated by errors, remind them: "Every professional programmer sees errors every day. The skill isn't avoiding errors — it's reading them." Have them read the error message out loud before trying to fix it.

    If one child finishes early, have them change the background color in CSS to something fun. This shows them the power of CSS immediately.

    Looking ahead: Tomorrow we create the gameState object — the brain of your game. Every number, every score, every decision will live in one place.