Tutorial

Your first conversation with Claude Code

This is where it gets real. You're going to describe what you want, and Claude Code is going to build it.

Step 1: Open a new project folder

Before you start, create a folder on your computer where your website files will live.

  1. Open Finder (Mac) or File Explorer (Windows)
  2. Navigate to your Documents folder (or wherever you like)
  3. Create a new folder — name it something like my-website

Step 2: Open that folder in Claude Code

In Claude Code:

  1. Click Open Folder (or File → Open Folder)
  2. Select the my-website folder you just created
  3. You'll see the folder open in the sidebar on the left

This tells Claude Code where to put the files it creates.

Step 3: Start your conversation

In the text input at the bottom of the screen, paste or type your starter prompt from the previous step.

Your message might look something like:

"Build me a personal webpage about my love of fly fishing. Include sections for my favorite rivers in Montana, a gear list, and a short 'about me' paragraph. Make it feel outdoorsy and clean, with a nature-inspired color palette."

Hit Enter (or click the send button) and watch what happens.

What you'll see

Claude Code will:

  1. Acknowledge your request and describe its plan
  2. Start writing files — you'll see them appear in your sidebar
  3. Typically create an index.html file (your main page) and possibly a styles.css file

This usually takes 15–45 seconds. Let it finish.

Pro tip: If something doesn't look right once you see the result, take a screenshot and paste it directly into the chat. Type something like: "Here's a screenshot of what it looks like — can you fix the layout issue in the header?" Claude will figure out what's wrong and fix it. This is one of the most powerful workflows you'll use.

Once Claude Code is done generating, move to the next step to see it in your browser.