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).

In Cursor: Go to cursor.com, download for your OS, install, and sign in. You'll see a code editor (based on VS Code) with an AI agent panel built in.

In Claude Code: Install from your terminal with npm install -g @anthropic-ai/claude-code (you'll need Node.js first — see 1.2 below, then come back). Once installed, run claude in your terminal to start a session. Claude Code is a conversational CLI — no separate editor needed, though you can use it alongside any code editor. Once set up, install the course skills plugin for helpful shortcuts: claude /install-plugin github.com/ethancstuart/zero-to-shipped-skills

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.

Go to nodejs.org
Download the LTS (Long Term Support) version — this is the stable one
Install it with the default settings
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.

Go to git-scm.com
Download and install with default settings
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:

Think about what you asked for
Create a file (or multiple files)
Write code in those files
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.

Part 4: What Just Happened

Let's name what you did, because you'll do it again in every module:

You described what you wanted in plain English. Not in code, not in a technical spec — just a clear description of the end result.
The AI translated your description into working code. HTML for the structure, CSS for how it looks, JavaScript for how it behaves. You don't need to understand any of that yet (Module 3 covers it).
You evaluated the output. Not "does the code look right" (you can't read it yet) but "does the application do what I wanted?" This is product judgment applied to a new medium.
You iterated by describing changes in plain English. You didn't edit the code. You described what was wrong or what you wanted differently, and the AI made the changes.

This is the build loop. It works for habit trackers, dashboards, data tools, presentations, automations, and everything else you'll build in this course.

How This Differs from Writing a User Story

If you're a PM, you're used to writing requirements. "As a user, I want to track my habits so that I can build consistency." That's a user story — it describes the why and leaves the how to engineering.

Prompting an AI coding tool is different. You're describing the what in precise detail: what fields, what behaviors, what layout, what happens when you click this button, what the empty state looks like. You're not writing a spec for someone else to interpret. You're describing the finished product directly.

The more precise your description, the better the output. This is Module 2's entire focus.

Part 5: When Things Break

Things will break. This is normal and expected. Here's your debugging protocol for now (Module 3 goes deeper):

The Error Message Is Your Friend

If your app doesn't work, open your terminal or your browser's developer console (Right-click → Inspect → Console tab). There's probably an error message. You don't need to understand it — just copy the entire error and paste it into the Agent panel:

I'm getting this error when I try to add a habit:
[paste the error here]

Fix this.

AI coding tools are very good at fixing errors when you give them the actual error message.

The "It Runs But Does the Wrong Thing" Protocol

If there's no error but the behavior is wrong, describe the problem specifically:

Bad: "It doesn't work."
Good: "When I check off a habit and refresh the page, the checkmark disappears. The habit name is saved but the completion status isn't."

Specificity is everything. The more precisely you describe what's wrong, the better the AI can fix it.

The Nuclear Option

If things are truly broken and you can't figure out why, it's okay to start over. Delete the files and re-prompt from scratch, incorporating what you learned from the first attempt. This is not failure — it's iteration with a clean slate. You'll learn in Module 5 (Version Control) how to avoid needing the nuclear option by saving checkpoints of your work.

Go Deeper

Want to explore beyond the habit tracker? Try building one of these as a second project using the same build loop:

A personal bookmark manager (save URLs with tags, search and filter them)
A simple daily journal (text entry per day, browse past entries)
A Pomodoro timer with task tracking

Or ask your AI tool: "What are 5 simple web apps I could build in an afternoon as a complete beginner?" and pick one that interests you.

If You Get Stuck

The AI isn't responding or seems frozen: Long prompts can take 30-60 seconds. Wait for the response. If it's been over 2 minutes, try starting a new session.

The file was created but nothing shows in the browser: Make sure you're opening the right file — index.html specifically. If you see a blank white page, open the browser console (Right-click → Inspect → Console) — there's likely a JavaScript error preventing the app from loading.

The AI created multiple files but you only expected one: This is fine. Sometimes it splits HTML, CSS, and JavaScript into separate files. As long as the app works when you open index.html, the structure doesn't matter at this stage.

You've iterated 5+ times but the app still has issues: Start a new conversation (the context gets noisy after many back-and-forth exchanges). Summarize the current state: "I have a habit tracker that does X and Y, but Z is still broken. Here's the error: [paste error]. Fix Z without changing X and Y."

Checkpoint

You've completed Module 1 when:

Your AI code editor (Cursor or Claude Code), Node.js, Python, and Git are installed and verified
You built a working application from a natural language prompt
Your app is running in the browser
You iterated at least 5 times, improving the app with each iteration
You can describe the build loop (prompt → review → run → evaluate → iterate) in your own words
You've experienced at least one thing breaking and used the debugging protocol to fix it

What's Next

You built something. It works. But you also probably noticed that some AI outputs were better than others, you couldn't evaluate the code quality (only whether the app behaved correctly), and you're not sure how to describe what you want more precisely.

Module 2 addresses all three: Prompt Engineering & Critical Thinking — how to make AI output dramatically better through better inputs, and how to evaluate what you get back.

Next: Module 2: Prompt Engineering & Critical Thinking →