Your First File

Before you start

• The Claude desktop app is open and you're in the Code tab
• Your comms-gut-check folder exists with a project description inside

Step 1: Tell Claude Code to build the first page

Copy the prompt below and paste it into the Code tab. Claude Code will build the first page of your app.

Create a file called index.html in the comms-gut-check folder. It should be a simple web page for a tool called "The Comms Gut Check." Give it:
- A headline: "The Comms Gut Check"
- A short subtitle: "Paste any communication below and get a structured critique."
- A labeled text box where users can paste their text (label it: "Your communication")
- A Submit button below the text box

Keep it plain for now — no colors or design yet. Just the basics.

Step 2: Open the file in your browser

1. Open your file explorer and find the comms-gut-check folder.
2. Double-click index.html to open it in your browser. You should see the headline, subtitle, text area, and button.
3. Verify: the page loads without errors. The text area and button are visible. You're looking at your first web page.

Step 3: Prepare the page for the next module

The skeleton is there — now copy the prompt below and paste it into the Code tab to get the page ready for when we connect it to Claude.

Add a results area below the Submit button — this is where the feedback will appear once the app is connected to Claude. Leave it blank for now. Also tidy up the layout so everything sits neatly centered on the page.

Step 4: Refresh and verify

Refresh the page in your browser. The page should look the same — we only added hidden structure. If anything looks broken, tell Claude Code: "The page looks different after your last change. Please revert it."