Claude Code for everyone

Claude Code became generally available on May 22, 2025. Try it today by building a small business page in a new local folder, opening the result in your browser, and making one precise improvement.

Before you start

• A computer supported by the current Claude Code installer, an internet connection, and a terminal app.
• Claude Code access through a supported subscription, Claude Console account, or an organization-provided connection. General availability does not mean free access for every Claude account.
• An empty folder for a practice website, a text editor, and a browser.
• A business name, a truthful description, one service, and the contact details you want on the practice page.

Want to do it yourself?

Difficulty

4 out of 10

Estimated completion time

45–90 minutes

Skills you’ll need: Install the tool, work in a practice folder, and inspect a generated page and one revision in the browser.

I’ll do it myselfI’d rather get help

How this helps your brand

A small business page lets you practise presenting a truthful offer and a clear contact action. Checking the real file helps you see the difference between a local first version and a published customer destination.

1. 1

   Step 1: Install the current tool for your computer

   Use the current Claude Code quickstart at code.claude.com/docs/en/quickstart and choose the installation instructions for your operating system and shell. This guide uses the terminal interface; the 2025 announcement is historical background, not an installation manual.

   After installation, open a new terminal and run claude --version. Continue when it prints a Claude Code version. If the command is not found, follow the quickstart’s PATH troubleshooting rather than installing another copy at random.

2. 2

   Step 2: Start in an empty practice folder

   A terminal is a window where you type commands. Each session has a current folder. Put this exercise in a new folder named first-claude-page so you can recognize every file it creates.

   In the terminal, type cd followed by the folder’s full path in double quotes, then press Enter. For example, cd "/Users/yourname/Desktop/first-claude-page" on a Mac. Use your own path. Then run claude and complete the sign-in prompts.

   If the browser does not open for login, follow the terminal’s option to copy the login URL. If your organization supplies access, use its required connection instructions instead of setting up a second billing account.

3. 3

   Step 3: Ask for a page with a clear boundary

   Paste the prompt below and fill in the brackets. It asks for one index.html file with its styling included. Keeping the exercise to a standalone page avoids needing a development server, extra packages, or a database.

   Use real details: “Orchard Lane Repairs fixes household appliances in North York” is more useful than “make a professional business site.” Decide on one main action, such as emailing for an estimate.

   Read any permission request before approving it. The expected work here is creating index.html in the empty folder. If Claude proposes installing a framework or connecting an external service, remind it of the one-file requirement.

   Illustrated exampleA bounded first prompt with real business details

   first request

   Build in this empty folder using only one file:
   index.html, with CSS inside it.
   
   Business: Orchard Lane Repairs
   What we do and where: household appliance
   repairs in North York
   Main action: email [email protected]
   
   Do not invent details. Use no packages,
   external services, or remote images.

   01

   Set the boundaryOne file keeps this first exercise easy to open.

   02

   Use checked factsReal service, place, and email details make review possible.

   03

   State what is outNo invented claims, packages, or connected services.

4. 4

   Step 4: Open the actual file and check it

   When Claude finishes, find index.html in your file manager and open it with your browser. The browser should display a page rather than the source text. If your system opens an editor, use the browser’s Open File command to select it.

   Check your name, service description, contact address, and the main action. Narrow the browser window to see whether text wraps and the button remains visible. Do not send a real email just to test the link: check that the draft opens with the correct recipient.

   A local HTML page is a first version on your computer. Publishing on a public web address is a separate step.

   Illustrated exampleMake sure the browser shows the file Claude edited

   Claude Code edited/Users/me/Desktop/first-claude-page/index.html

   compare full path

   Browser opened/Users/me/Desktop/first-claude-page/index.html

   ✓ Same file

   01TruthName, service, recipient

   02ActionEmail draft has right address

   03FitNarrow the browser window

   If the page looks unchanged after an edit, check that both paths point to this same file.

5. 5

   Step 5: Make one change you can recognize

   Return to the same Claude Code conversation and ask for one visible improvement. For example: Change the main button label from “Contact” to “Email for an estimate”, and keep its email address unchanged.

   Refresh the browser after the edit. Confirm that the label changed and the recipient is still correct. If nothing changes, compare the full path of the browser’s file with the file Claude edited; opening a different copy is an easy mistake.

   If the page breaks, give Claude the exact symptom and ask it to fix only the last change. Use the previous saved copy if you need to restore the page before trying again.

   Illustrated exampleChange one visible detail, then verify the result

   One precise request

   Change the main button label to “Email for an estimate”. Keep its email address unchanged.

   1

   EditContact → Email for an estimate

   2

   RefreshReopen the same local file.

   3

   Confirm bothNew label appears; recipient is unchanged.

   Contact→Email for an estimate[email protected] still correct

6. 6

   Step 6: Save the version and its limits

   Copy the working folder somewhere you can find later. Keep a short note with the business details you checked and the change you made.

   Do not treat a decorative contact section as a working submission system. In this exercise, the contact action is an email link that relies on the visitor’s configured email application. Ask separately for forms, online payments, or booking integrations when you are ready to specify and test those workflows.

Build my first practice website in this empty folder using only one index.html file, with CSS inside it. First confirm that the folder is empty apart from any Claude configuration; if there is existing website work, stop and tell me before overwriting it.

Business name: [name]
What we do and where: [truthful description]
Audience: [who the page is for]
One service to describe: [service and actual details]
Main action: email us at [email address] for [reason]
Visual feel: [plain description of the style]

Include a clear heading, a short service explanation, and one main email link with a descriptive label. Make the text and layout readable in a narrow browser window. Do not invent prices, reviews, qualifications, or guarantees. Use no external libraries, remote images, forms, accounts, payments, or package installation.

When finished, name every file created or changed, explain how to open index.html directly in a browser, and give me a short checklist. Describe any checks you could not run. Do not publish anything.