By the end of this chapter, you have a real web address you can send to anyone. A page Claude wrote and you put online yourself. Count 20 minutes, still without a terminal.
What we build
A presentation page: your business, a project, or just you. A single file, index.html, with the text and the styling inside. No database or form to wire up: the smallest possible site, for a first launch with nothing to break.
You need the Claude app with its Code tab, installed in chapter 2, and a browser.
Step 1, a folder for the page
In your code folder, create a my-first-page folder. Then, in the Code tab of the Claude app, choose Local, click Select folder and pick my-first-page.
One folder per project: in a moment, you will put this whole folder online.
Step 2, describe the page
Give Claude the content, the style and the constraints. The more precise you are, the less you fix afterwards:
"Create a presentation web page for [your business, in one sentence]. A single index.html file, with the styling in the same file. Three sections: who I am, what I offer, how to reach me (a mailto link to [your email]). Colors: [two colors]. The text is in English. The page must be easy to read on a phone."
Claude proposes the file. Accept it, then click the change counter to see what it wrote. You don't need to understand all of it: mainly check that your texts are there.
Step 3, look at it
Open the my-first-page folder in Finder (Mac) or File Explorer (Windows) and double-click index.html. The page opens in your browser.
For now it only exists on your computer: the address starts with file://. Nobody else can open it.
Step 4, improve it in two or three requests
Look at the page as a visitor would, then ask for one fix at a time:
"The title is too small on a phone. Make it bigger and reduce the space above it."
"I put a photo in the folder, it's called photo.jpg. Add it next to the who I am section, round, 160 pixels."
After each request, reload the page in the browser. To see the phone version, make the browser window narrower.
Fix one thing at a time. Three fixes in the same message means three places where Claude can misunderstand, and you no longer know which one broke the page. One at a time, you see right away what changed.
Step 5, put it online with Vercel Drop
Vercel hosts websites. Its Drop tool puts a folder online by drag and drop, with no Git and no terminal.
- Create a free account on vercel.com.
- Go to vercel.com/drop.
- Drag your
my-first-pagefolder onto the page. - Choose your Vercel team (your personal account) and give the project a name, for example
my-first-page. - Click Deploy.
Vercel creates the project, uploads your files and publishes the page. At the end, you get a public address like my-first-page.vercel.app. Open it on your phone: it's live.
Vercel's free plan is for personal, non-commercial use. For a test page, a resume or a side project, it's perfect. For the website of a business that sells, you need Vercel's paid plan or another host: see chapter 15.
Step 6, update the live page
You change something with Claude in your folder, and the live version doesn't move. That's expected: Drop sends a copy of the folder at a given moment.
To publish the new version, open your project in the Vercel dashboard and drag the folder onto it. Vercel creates a new production version, at the same address.
Don't go back through vercel.com/drop: every drop there creates a new project, with a new address.
What comes next
What you just did on a small scale, you will do again on every project. A real app adds user accounts, a database, payments and a domain name of your own. For that, you first need to know how to talk to Claude (chapter 5) and to plan before coding (chapter 6).
Key takeaways
- One folder per project, described precisely from the first request.
- One fix at a time, checked in the browser.
- vercel.com/drop for the first launch, then a drag and drop onto the project in the dashboard for every update.
- Vercel's free plan covers personal projects, not a commercial website.
End-of-part quiz
Part 1: Getting started
7 questions. You pass the part with 6 correct answers or more.