Set Up Claude Code.

What Claude Code is, briefly

Claude Code is a version of Claude that runs in your computer's terminal — the typing window where you'd run commands. The difference from chatting with Claude in your browser: this version can actually create and edit files on your computer. You don't copy code out of a chat and paste it into a file. You ask Claude to build something, and Claude writes the files for you.

That's the magic for website work. Prompt → Claude makes the files → you look at them in your browser → prompt again to change things. The whole site lives in a folder on your computer. When you're ready, you put the folder on the internet (covered in Chapter 09).

Do you need it?

Honest answer: not for everything. If you're building a single-page site or you just want to play, claude.ai is fine — Claude can give you a complete HTML file, you save it, you open it in a browser. Simple.

But if you're building a real multi-page site for a real client, Claude Code is worth the 30 minutes of setup. Here's the rough divide:

claude.ai (browser)	One file, simple sites, learning. No install required. Free or cheap.
Claude Code (terminal)	Multi-file sites, real client work, repeated edits, Git/GitHub integration, reading existing code in a project. Requires install.

Before you start

You need:

• An Anthropic account — same login you'd use for claude.ai. You'll authenticate Claude Code with it.
• A computer running macOS or Windows (Linux works too, but this guide covers Mac/Windows).
• 15 to 30 minutes.

You don't need to know how to code. You will need to type a few commands into a terminal. If terminals scare you, take a deep breath — you can copy-paste every command in this chapter.

Install

Pick your operating system:

Set up your project folder

Claude Code works inside a folder. One folder per project. The standard practice is to keep all your project folders inside a parent folder called GitHub (since most of these will eventually be pushed to GitHub). Like this:

Create a new project folder

In Terminal:

Now you're inside the folder. From this folder, run:

Claude Code is now running with this folder as its workspace. Anything you ask Claude to build will land in this folder.

Your first build

With Claude Code running, type a prompt and hit Enter. Try:

"Build me a single-page website for a fictional bakery. Use a warm cream background, a serif headline font, and one bold accent color. Mobile-friendly."

Claude will think for a moment, then write an index.html file (and probably a CSS file) right into your folder. Now you need to look at what Claude built — see the next section.

Previewing your site as you build

Claude is making files. You need to see them. Here's how, from simplest to best.

The quick way: double-click the file

Open your project folder in Finder (Mac) or File Explorer (Windows). Double-click the file called index.html. Your browser opens it. You see your site.

This works fine for a single-page experiment. It starts being weird once you have more than one page or anything that loads images from your folder — links between pages can break, some things just don't display right. So for any real project, use the next method.

The better way: a tiny "local website" you visit in your browser

You can run a small program on your computer that pretends to be a web host — just for you, just on your computer. It hands your site to your browser the same way a real website would. This makes everything work properly: clicks between pages, images, the whole thing.

You don't have to install anything new for this. Most computers already have a tool called Python built in, and Python can do this for you in one command.

Step 1. Open Terminal (Mac) or PowerShell (Windows). Get into your project folder by typing:

Step 2. Start the little local website:

You'll see a line of text that says something like "Serving HTTP on...". Leave that terminal window open and running.

Step 3. Open your browser and go to:

Your site shows up. Every time Claude makes a change, you save the file and just refresh the browser to see it. When you want to stop the local website, click back in the terminal window and press Ctrl + C.

If you'd rather not deal with the terminal at all for this, you can ask Claude Code to start it for you in a separate window. Try: "start a local web server in this folder so I can preview at localhost:8000 in another terminal."

Looking at it on your phone

You have to look at the site on your actual phone before you ship anything. Sites look very different on a phone than on a desktop browser, even if you make the browser window narrow. Here's how to do it while you're still building:

1. Make sure your phone and computer are on the same WiFi

   If they're on different networks, your phone can't reach your computer. Same WiFi name = good.

2. Find your computer's address on the WiFi

   This is just a number, like a phone number for your computer. It looks like 192.168.1.42.

   Mac: System Settings → Wi-Fi → click the (i) next to your network → look for "IP Address."

   Windows: open PowerShell and type ipconfig. Look for "IPv4 Address" — it's the line with four numbers separated by dots.

3. Make sure the local website is running (the Python command from above)

   Same command, same terminal window. If it stopped, start it again.

4. On your phone's browser, type your computer's address followed by :8000

   So if your computer's address is 192.168.1.42, you'd visit:

   http://192.168.1.42:8000

   Your site loads on your phone. Now you can see what visitors will see.

5. If your phone says "can't connect"

   Your computer's firewall is probably blocking the connection. On Mac: System Settings → Network → Firewall → allow incoming connections (or temporarily turn the firewall off while testing). On Windows: when you ran the Python command for the first time, Windows probably popped up a window asking if you want to allow it — say yes. If you missed that, look in Windows Defender Firewall settings for Python.

Other things you might install along the way

You don't need any of these on day one. They show up when you need them. Listing here so it's not a surprise later:

• Git — for saving versions of your work and pushing it to GitHub later (covered in Chapter 09). Macs usually have it already (you'll be asked to install Apple's developer tools the first time you use a git command — say yes). Windows: install from git-scm.com.
• Netlify CLI — only if you're building little AI tools (covered in Chapter 11). You'll install it with one command when you get there.
• VS Code Live Server extension — an alternative to the Python method. If you'd rather click a button than run a command, install VS Code (a free editor), install its Live Server extension, then right-click any HTML file and choose "Open with Live Server." It also auto-refreshes when you save, which is nice.

The whole build loop

End to end, here's what your work will look like once everything's set up:

1. You're in Claude Code in one terminal window.
2. You ask Claude to build or change something. Claude writes the files.
3. The local website (Python in another window) is already running, so your site is live at localhost:8000.
4. You refresh your browser (or your phone) to see the change.
5. Don't like something? You ask Claude to change it. Refresh again.
6. Repeat until you're happy, then put the site on the real internet (Chapter 09).

Things that go wrong (and the fix)

• You type claude and it says "command not found" — close your Terminal window completely and open a new one. That fixes it 90% of the time. If it still doesn't work, try reinstalling — on Windows make sure you check the box that says "Add to PATH" during the Node installer.
• Claude says it can't find or write to your files — you're probably running Claude from the wrong folder. Make sure you typed cd into your project folder before running claude. To check where you are: type pwd on Mac or just cd on Windows and hit enter.
• The install command fails because of "permission denied" — on Mac, run the same command but put sudo in front (it'll ask for your Mac password). On Windows, close Terminal and reopen it by right-clicking it and choosing "Run as administrator."
• You accidentally delete or break a file — Claude Code can't undo for you. That's exactly what Git (covered in Chapter 09) is for. Once your work is on GitHub, you can always go back to yesterday's version.

If terminals are too much, here's the simpler path

Skip the install. Use claude.ai in your browser. You can still build real websites — you just won't have the project-folder-aware workflow. Steps:

1. Open claude.ai
2. Start a chat: "Build me a single-page website for X. Output as a complete HTML file with embedded CSS."
3. Claude will return code in the chat. Click the download button (or copy-paste it into a file you save as index.html).
4. Open the file in a browser to preview.
5. For changes, ask Claude in chat ("make the hero darker") and it'll output the updated file.

This works fine for one-page sites. Multi-page or "edit this existing thing" workflows are where Claude Code earns its keep.

What's next

You have Claude Code running and a project folder. Now you need the right tools to point Claude at — fonts, color tools, animation libraries, the resource kit. Next chapter is the curated tool list I actually use.