Your first website, from message to link

What you’ll do: you’ll build a café’s website with Claude, from an empty folder to a link you open on your phone and send to a friend. You don’t write code: you answer questions, choose and check. Time: 30–45 minutes. You’ll need: Claude Code installed and signed in to your account (module 00), with a Claude Pro subscription. Along the way you’ll also make a free account on Vercel, the service that keeps the site on the internet.

The café can be made up or a real one from your town. If it’s real, use only information anyone can see: the name, the address, the opening hours.

The steps

Make an empty folder and start Claude in it. Open the terminal (Mac: Cmd+Space, type “Terminal”; Windows: “PowerShell”). Type these one at a time, pressing Enter after each:
```
mkdir cafe
cd cafe
claude
```
mkdir makes a new folder, cd goes into it, and claude starts Claude Code there. What you should see: Claude Code’s welcome screen and the place where you type.
Let it ask before it starts. It’s the trick from module 01: instead of guessing, Claude finds out from you what it needs. Send this (the > sign shows where you type; don’t copy it):
```
> I want to build a one-page website for a café.
  Before you start, ask me the questions you need, one at a time.
  Don’t write any file until I say “start”.
```
What you should see: Claude asks you, for example, what the café is called, where it is, its opening hours, what’s on the menu and how customers contact it. Answer briefly, with what you know. Where you don’t know, write “you choose”.

Tell it to build. When it has finished asking, write:

> Start. A single file, index.html, with all the styling inside it, no libraries and no photos.
  It has to look good above all on a phone. The booking button opens WhatsApp,
  and the phone number can be tapped to call.

What you should see: Claude shows you the file it wants to create and asks for permission. You approve. At the end, the file index.html appears in the cafe folder.

Open the site on your computer.
```
> Open index.html in my browser.
```
What you should see: Claude asks permission to run a command (for example open on Mac or start on Windows), then the site opens in your browser. Make the browser window narrow, as narrow as a phone, and look at how it rearranges itself.
Correct what you don’t like. Look at it like a customer of the café and ask for one or two changes, one at a time. For example:
```
> The title is too small on a phone. And put the opening hours right under the title, not at the end.
```
After each change, reload the page in the browser (F5, or Cmd+R on Mac). What you should see: Claude changes only what you asked for and asks permission first.

Have Claude check before you publish.

> Check the site yourself before we publish it: are the WhatsApp link and the phone link
  in the right format? Is it easy to read on a phone screen? Is anything missing that
  a customer would look for? Tell me what you found, then fix it.

What you should see: a short list of what it checked and what it fixed. If it says everything is fine, ask it “how did you check?”. That way you find out whether it really looked.

Check whether you have Node.js. Publishing to Vercel uses a small program that needs Node.js. Write to Claude:
```
> Do I have Node.js installed? Check with node -v.
```
What you should see: a version number, for example v22.11.0. If Claude says you don’t have it: go to nodejs.org, download the LTS version and install it with the default options. Then close the terminal, open it again and type cd cafe, then claude --continue. That way you pick up the conversation exactly where you left it.
Make a Vercel account and sign in, in a separate window. Leave the window with Claude open. Open another terminal and type:
```
npx vercel login
```
If it asks Ok to proceed? (y), press y and Enter. The Vercel program downloads. What you should see: a line starting with Visit, with a link and a code. The browser opens on its own; if it doesn’t, open the link yourself. There you make a free account (simplest with Google or GitHub) and confirm. Check in the browser that it’s the same code as in the terminal. At the end, the terminal says Congratulations!: you’re signed in. You can close this window.
Publish the site. Go back to Claude and write:
```
> Publish the site on Vercel, to production, with the command npx --yes vercel deploy --prod --yes.
  Then tell me the public link and check with curl that it opens without any login.
```
What you should see: Claude asks permission to run the command. You approve. After about a minute, the line Aliased appears in the output, with a link ending in .vercel.app. That’s the public link, and Claude confirms the page responds.
Open it on your phone. Type the link into your phone’s browser or send it on WhatsApp to a friend. Tap the booking button and the phone number. What you should see: your site, on the internet, just like on your computer. The button opens WhatsApp and the number starts a call.

You’re done when

The cafe folder has an index.html file that Claude wrote, not you
You asked for at least one correction and Claude changed only what you asked for
The site opens on your phone, from a .vercel.app link, without asking you to sign in
The WhatsApp button and the phone number work when you tap them

If you get stuck

Claude started writing the file before it finished asking. Press Esc to stop it and write: “Wait. Questions first, one at a time.”
PowerShell shows “running scripts is disabled on this system”. Windows is blocking the npx shortcut. Type npx.cmd vercel login instead of npx vercel login.
“node” or “npx” isn’t found, even though you installed Node.js. A terminal opened before the install doesn’t know about it yet. Close every terminal window and open a new one.
The link asks you to sign in to Vercel. You opened the long link, the one with a string of letters and numbers. The public link is the one next to Aliased. If you can’t find it, ask Claude: “What’s the public production link, the one next to Aliased?”
Claude says you’re not signed in to Vercel. Step 8 didn’t finish. Do it again in the separate window, then ask Claude to publish again.
You want to change something after publishing. Ask for the change, then “publish again, the same way”. The link stays the same.

Good to know: Vercel’s free plan is for personal projects, like this one. A site made for a client who pays you is something else. Where to keep it and what it costs, you’ll learn in module 12, “First client”.

The steps

You’re done when

If you get stuck

Checked off everything under “You’re done when”?