Set up your build environment

Steps

1. 1

   Open Terminal

   On a Mac, press Cmd + Space, type Terminal, and press Enter. On Windows, open Start and type PowerShell. You’ll see a blinking cursor. That’s the terminal waiting for you.

2. 2

   Find where you are

   Type these one at a time and press Enter after each. Do this any time you feel lost.

   pwd

   Copy

   ls

   Copy

   

3. 3

   Make your project folder

   This makes a folder on your Desktop and moves you into it. You’ll use it for the rest of this lesson.

   cd ~/Desktop && mkdir my-first-project && cd my-first-project

   Copy
4. 4

   Install your AI coding tool

   Pick one. Claude Code lives in the terminal and is best for learning it, and it needs a paid Claude plan. Cursor is an app that feels closer to a design tool: download it from cursor.com, choose File, then Open Folder, and pick my-first-project. For Claude Code on a Mac, run this, then type claude. On Windows, use the PowerShell command on Anthropic’s setup page.

   curl -fsSL https://claude.ai/install.sh | bash

   Copy

   claude

   Copy
5. 5

   Ask it to make something

   Type a request in plain words, like a brief. When it’s done, type /exit, then run ls. Your new file is there.

   Make an index.html with my name in big type and one line about me.

   Copy

Claude Code helps, but learn this first

Once Claude Code is set up in step 4, it runs inside this same window. You can ask it in plain words to make a folder, install something, or start a preview, and it runs the commands for you. It shows you each command and asks before it runs it.

You can also run a command yourself without leaving it. Start the line with !, like !ls. Press Esc to stop Claude mid-answer, and ↑ to bring back an earlier request.

That’s why the basics still matter. When it asks “Can I run npm install?”, you need to know what that means before you say yes. Knowing the terminal lets you check its work, fix small things yourself, and use the many tools that have no app at all. It unlocks so much.

Open your folder as a local site

Double-clicking index.html opens it, but the address bar starts with file://. That’s fine for plain HTML. Some things only work when the page comes from a server, the way a real site does. A local server is a tiny program on your laptop that hands your folder’s files to the browser.

localhost

A preview link only your computer can open. Like a Figma prototype shared with nobody but you.

:8000

The port. Think of it as which door the preview uses. If one door is taken, use another, like 8001.

the server

Only runs while that terminal tab stays open. Close the tab and it stops. The page stays on screen until you refresh, then it’s gone.

Open Terminal and do these three things first. That way this part works on its own, even if you’re coming back after a break.

1. On a Mac, install Apple’s Command Line Tools. It’s free, Install is safe to click, and it takes a few minutes. It’s the same install that gives you git, so Set up GitHub (02) is already covered. If it says they’re already installed, you’re set. On Windows, skip this.

xcode-select --install

2. Go to your project folder. This line makes it first if it isn’t there yet. On Windows, if Part 1 already made it, just type cd ~/Desktop/my-first-project.

mkdir -p ~/Desktop/my-first-project && cd ~/Desktop/my-first-project

3. If there’s no index.html in the folder yet, paste this to make one. Skip it if Claude Code already made one in Part 1, because this would replace it.

echo 'Hello, world.' > index.html

Now start the local site. On Windows, type python -m http.server 8000 instead.

python3 -m http.server 8000

Now open http://localhost:8000 in your browser. Your index.html shows up, and the terminal adds a line every time the page loads. When you’re done, press ctrl + C in that tab.

Prefer a button? The Live Server extension in VS Code does the same thing with one click. It’s optional. Learning the command first means you’re never stuck when a tool changes.

Where it trips people up: if you see a list of files or a 404, you started it in the wrong folder. Stop it, cd into the right one, and start again. If you see “Address already in use,” another preview already has that door. Stop the old one or use 8001. If you closed the terminal, the page stays until you refresh, then it’s gone. Start the server again.

Set up a local testing server, MDN ↗Read. Mozilla’s guide to exactly this.

python -m http.server ↗Python Morsels. 2 min, shows this exact command.

What is localhost? ↗Hostinger. 3.5 min, the idea in plain words.

Steps

1. 1

   Install Git

   On a Mac, you already installed this in chapter 01, in Terminal basics Part 2. Run this to check. On Windows, download Git for Windows from git-scm.com and keep the default settings.

   git --version

   Copy
2. 2

   Tell Git who you are

   Use the same email as your GitHub account. This name shows up on every change you save.

   git config --global user.name "Your Name"

   Copy

   git config --global user.email "you@example.com"

   Copy
3. 3

   Set up an SSH key

   This is a saved login for your laptop, so GitHub stops asking for a password. Press Enter for every question, then copy the key. On GitHub, open your photo, then Settings, then SSH and GPG keys. Click New SSH key, paste, and save.

   ssh-keygen -t ed25519 -C "you@example.com"

   Copy

   pbcopy < ~/.ssh/id_ed25519.pub

   Copy
4. 4

   Install VS Code

   Download it from code.visualstudio.com. Open Extensions with Cmd + Shift + X, search for GitHub Pull Requests, and click Install. You’ll use it for reviews later.

5. 5

   Start Git in your project

   Go to your project folder and turn Git on. Nothing visible happens, and that’s normal.

   cd ~/Desktop/my-first-project && git init

   Copy
6. 6

   Make your first commit

   This saves a snapshot of everything in the folder. You just used Git.

   git add . && git commit -m "first commit"

   Copy
7. 7

   Push it to GitHub

   Right now your work only lives on your laptop, like a Figma file you never shared. Pushing puts a copy on GitHub, so it’s backed up and anyone with the link can see it. On GitHub, click + at the top right, then New repository. Name it my-first-project, leave everything else empty, and click Create repository. In the Quick setup box, click SSH and copy the address. Then run these three lines with your own address. Refresh the repo page and your files are there. After this first time, git push on its own is enough.

   

   git remote add origin git@github.com:your-username/my-first-project.git

   Copy

   git branch -M main

   Copy

   git push -u origin main

   Copy

Where Claude Code fits

Claude Code can do all of this for you. Ask it to “commit this with a clear message and push it,” and it will. Do your first commit by hand anyway. Then when it asks to run git push, you know exactly what you’re saying yes to.

Steps

1. 1

   Pick something small

   One page, one job. A link-in-bio page, a one-page portfolio, or a tip calculator. If you can describe it in one sentence, it’s the right size.

2. 2

   Write the brief

   Open Claude Code or Cursor inside my-first-project and describe it like you’d brief a designer: who it’s for, what’s on the page, and the feel.

   Build a one-page portfolio in index.html and style.css. My name in big type, three projects as cards, a contact link. Calm, lots of whitespace.

   Copy
3. 3

   Look, then give notes

   Open localhost:8000 from Terminal basics, Part 2, and look. Give one note per round, like a design crit: more space between the cards, make the heading bigger. Refresh after each change.

4. 4

   Save and push

   Check it on localhost first. When you like it, save a version and send it up to GitHub.

   git add . && git commit -m "first build"

   Copy

   git push

   Copy
5. 5

   Put it live

   On your repo page, open Settings, then Pages. Under Build and deployment, choose Deploy from a branch, pick main and /(root), and click Save. Within about 10 minutes your link shows at the top: your-username.github.io/my-first-project.

   

6. 6

   Send it to one person

   Send the link to one friend and ask one question: what’s confusing? That’s your first round of user feedback.

Where Claude Code fits

This whole chapter runs through Claude Code or Cursor. When something breaks, paste the error in and ask what it means. Ask it to commit and push when you’re happy. That isn’t cheating. That’s the workflow.

Steps

1. 1

   Open your page two ways

   Start the local site from Terminal basics, Part 2, then open localhost:8000. Open the my-first-project folder in VS Code too. Code on one side, page on the other.

   cd ~/Desktop/my-first-project && python3 -m http.server 8000

   Copy
2. 2

   Change the words

   In index.html, find the h1. Change the words between the tags, save with cmd + S, and refresh the browser. That’s HTML: what’s on the page, and in what order.

   Your Name

   Copy
3. 3

   Style it

   If your folder has no style.css yet, make one next to index.html and paste this link inside the <head> of index.html. Then add these lines to style.css. Change one number at a time, save, and refresh. That’s when it clicks.

   <link rel="stylesheet" href="style.css">

   Copy

   body { font-family: Georgia, serif; color: #1a1a1a; padding: 48px; }

   Copy

   h1 { font-size: 56px; color: #5b2a86; margin: 0 0 8px; }

   Copy
4. 4

   Look under the hood

   Open any website, right-click a button, and choose Inspect. That panel is Browser DevTools. It’s Dev Mode for the whole web, and you can change things live to see what happens.

5. 5

   Make it work on phones

   Add this at the bottom of style.css. Then drag your browser window narrower and watch the page switch at 600px. That switch point is a breakpoint.

   @media (max-width: 600px) { body { padding: 24px; } h1 { font-size: 36px; } }

   Copy
6. 6

   Put your changes live

   Save a version and push, the same as in Ship your first build. Your live link updates within a few minutes.

   git add . && git commit -m "made it mine" && git push

   Copy

Where Claude Code fits

Claude Code or Cursor wrote most of this page for you in 03. Learning it by hand still matters. When you know what padding, flexbox, and a media query are, you can give the AI real design notes, like “add 24px of padding to the cards,” instead of “make it look nicer.”