Module 1: Setup & First Build

Tier 1: Foundations | Estimated time: 3–5 hours | Prerequisites: None

---

What You'll Get Out of This

By the end of this module, you'll have a working application running in your browser that you built yourself. No prior coding experience required. You'll understand the basic build loop — prompt, review, evaluate, iterate — that you'll use for the rest of this course and beyond.

We're building first and explaining later. The theory comes in Modules 2–5. Right now, you just need to see that this works.

---

Part 1: Installing Everything

You need four things installed on your computer. This is the least exciting part of the course, but it only happens once.

1.1 Your AI Code Editor

You'll use an AI-powered code editor for this course. The two supported options are Cursor and Claude Code. Pick one (you can always switch later).

Whichever tool you choose, the key elements are:

• The file explorer — shows your project files (sidebar in Cursor, or use ls/tree in Claude Code)
• The editor area — where you see and edit code
• The terminal — where you run commands
• The AI panel — where you talk to the AI (chat panel in Cursor, or the terminal itself in Claude Code)

1.2 Node.js

Node.js lets you run JavaScript applications on your computer. Many of the things you'll build in this course need it.

1. Go to nodejs.org
2. Download the LTS (Long Term Support) version — this is the stable one
3. Install it with the default settings
4. To verify it worked, open your terminal (in Cursor: View → Terminal or Ctrl+`) and type:

node --version

You should see a version number like v22.x.x or newer. If you see "command not found," the installation didn't work — close and reopen your terminal and try again.

1.3 Python

Python is used for scripting, automation, and data work. You'll use it heavily in later modules.

Mac: You may need to install Python 3 — download from python.org if python3 --version doesn't work in your terminal. If you see a version number, you're good.

Windows: Download from python.org. During installation, check the box that says "Add Python to PATH" — this is important. Then verify in your terminal with python --version.

1.4 Git

Git is version control software. You'll learn it properly in Module 5, but you need it installed now.

1. Go to git-scm.com
2. Download and install with default settings
3. Verify in your terminal: git --version

1.5 Verify Everything

Open your terminal and run these three commands:

node --version
python3 --version
git --version

(On Windows, use python instead of python3.)

If all three return version numbers, you're ready. If any fail, troubleshoot that one before continuing — check the Troubleshooting Guide.

---

Part 2: Your First Project

2.1 Create a Project Folder

In your terminal, run:

mkdir my-first-app
cd my-first-app

Then open this folder in your editor: File → Open Folder → navigate to my-first-app → Open. (In Claude Code, just run claude from inside the folder.)

You should see an empty folder in the file explorer on the left.

2.2 How You'll Interact with the AI

Your AI tool gives you a conversational interface to describe what you want built. The specifics vary by tool:

In Cursor, there are three modes:

• Tab (Autocomplete) — as you type, Cursor suggests completions. Press Tab to accept.
• Cmd+K / Ctrl+K (Inline Edit) — select code, press Cmd+K, and describe the change.
• Agent (Cmd+I / Ctrl+I) — the main mode. Open the Agent panel and describe what you want to build. Cursor creates files, writes code, installs packages, and builds multi-file projects.

In Claude Code, there are no separate modes — you simply describe what you want in a conversational CLI. Claude Code reads your project files automatically, makes edits, and runs commands. Type your prompt, and it handles the rest.

For your first build, you'll use the Agent / conversational approach. It's the most powerful and the most relevant to how you'll work going forward.

2.3 Your First Build

Start a new AI conversation. In Cursor, open the Agent panel (Cmd+I / Ctrl+I). In Claude Code, just type your prompt directly.

Type this prompt:

Build me a single-page web application that tracks my daily habits. 
I want to be able to:
- Add a new habit with a name
- Check off habits I completed today
- See a simple streak counter for each habit (consecutive days completed)
- Clear all habits

Use HTML, CSS, and JavaScript in a single file called index.html. 
Make it look clean and modern with a blue and white color scheme.
The data should persist in the browser's local storage so it survives page refreshes.

Press Enter (or click Send). Watch what happens.

The AI will:

1. Think about what you asked for
2. Create a file (or multiple files)
3. Write code in those files
4. Possibly ask you to confirm changes

Accept the changes when prompted (in Cursor, click Accept; in Claude Code, type y). Then check your project — you should see a new file (probably index.html).

2.4 See It Run

Open the file in your browser:

• Mac: Right-click index.html → "Reveal in Finder," then double-click the file
• Windows: Right-click index.html → "Reveal in File Explorer," then double-click the file
• Or from the terminal: open index.html (Mac) or start index.html (Windows)

You should see your habit tracker in the browser. Try it:

• Add a habit ("Exercise," "Read," "Meditate")
• Check one off
• Refresh the page — does it remember?

If it works: congratulations, you just built an application. If something's broken, that's normal — and it's actually the more interesting scenario. Read on.

---

Part 3: The Build Loop

What you just did — prompt, review, run, evaluate — is the build loop. You'll use it hundreds of times in this course. Here's how it works:

    ┌─────────┐
    │ PROMPT  │ ← Describe what you want
    └────┬────┘
         │
    ┌────▼────┐
    │ REVIEW  │ ← Look at what the AI produced
    └────┬────┘
         │
    ┌────▼────┐
    │  RUN    │ ← Open it, test it, click around
    └────┬────┘
         │
    ┌────▼─────┐
    │ EVALUATE │ ← Does it do what you wanted? What's wrong? What's missing?
    └────┬─────┘
         │
    ┌────▼────┐
    │ ITERATE │ ← Tell the AI what to fix, add, or change
    └────┬────┘
         │
         └──────→ Back to REVIEW

The key insight: you are not done after the first prompt. The first output is a draft. Your job is to evaluate it critically and iterate until it's right. This is where the "AI is average, you make it exceptional" principle starts.

3.1 Iteration Practice

Your habit tracker probably works, but it's almost certainly not perfect. Here are five iterations to try. Do each one by describing what you want changed in a new AI conversation:

Iteration 1 — Fix something broken: Is anything not working? A button that doesn't respond? A streak that counts wrong? Tell the AI:

The streak counter isn't working correctly — it shows 0 even after I check off a habit. 
Fix the streak calculation so it counts consecutive days.

Iteration 2 — Improve the design:

Make the habit tracker look more polished:
- Add subtle shadows to the habit cards
- Use a nicer font (import Google Fonts, use Inter or similar)
- Add smooth animations when checking off a habit
- Make the "Add Habit" button more prominent

Iteration 3 — Add a feature:

Add a "Weekly View" section below the habits that shows a simple 7-day grid 
for each habit. Each day should be a small square that's filled in (green) 
if the habit was completed and empty (gray) if not.

Iteration 4 — Handle edge cases:

Handle these edge cases:
- Don't allow adding a habit with an empty name
- Don't allow duplicate habit names
- Show a confirmation dialog before clearing all habits
- Add a subtle empty state message when no habits exist yet

Iteration 5 — Make it yours: Pick something you'd actually want to change. Maybe a different color scheme, a different layout, categories for habits, a progress percentage — whatever makes this tool something you'd actually use.

After five iterations, you should have something meaningfully different from (and better than) what the AI first generated.