Testing Locally

Before sharing your project with the world, let’s make sure it works properly on your own computer.

“Local” means on your own computer (as opposed to “the cloud” or “online”).

When you test locally:

• Only you can see it
• Changes appear instantly
• You can break things safely (no one else will see!)
• It’s free - no hosting needed

Switch to GitHub Desktop. You should see the above bar at the top. The left-most section is the repository you are on. The middle section is the branch you are on and the rightmost section is the ‘actionable’ section.

Use the branch selector to select the branch that Claude worked on.

After you select the correct branch, you may see a button to “Pull Origin”. Do that. If not click on ‘Fetch Origin’ and wait for the app to check for updates.

There are two methods, you can choose between to test Claude Code’s work.

If you choose to build a simple static project, then the simplest way to view your project is to navigate to the folder in your file finder and open the index.html file

Opening this file should open a new browser window and you should be able to view your project.

Some features (like loading data or using certain JavaScript) require a “real” server. Here’s how to set one up:

Windows:

1. Press ⊞ Win + R to open Run dialog
2. Type cmd and press Enter
3. The Command Prompt window will open

Mac:

1. Press Cmd + Space to open Spotlight
2. Type Terminal and press Enter
3. The Terminal window will open

In the terminal, use cd (change directory) to go to your project folder. You can use the system’s folder information menu action to find the full folder pathname.

Windows:

cd Documents\GitHub\my-project

Mac:

cd ~/Documents/GitHub/my-project

You can verify you’re in the right place by running:

• Windows: dir
• Mac: ls

You should see your project files (or an empty folder if you just created it).

Now that you have navigated to your project folder in the terminal, run the follwoing command:

Python 3:

python -m http.server 8000

Python 2 (older systems):

python -m SimpleHTTPServer 8000

This should setup the local server at port 8000 and when it’s running, it should open up your browser automatically to the correct url. If it doesn’t use the url below.

http://localhost:8000

If you encounter any error in the terminal window, copy and paste that error into Claude’s chat and Claude will be able to tell you what you need to do.

Go through your project and check these things:

• Does everything appear on screen?
• Do the colors look right?
• Is text readable (not too small/large)?
• Do images load correctly?

• Do buttons do something when clicked?
• Do links go to the right places?
• Do forms accept input?
• Do animations/effects work?

Most browsers let you simulate mobile devices:

1. Right-click anywhere on the page
2. Click “Inspect” or “Inspect Element”
3. Click the device toggle icon (looks like a phone/tablet)
4. Select different devices to test

When something’s not right, you have options:

Go back to Claude Code and describe the issue:

When I click "Submit", nothing happens. The form should
show a success message.

Or take a screenshot of the error and describe how you would want to fix it.

The color contrast of the button on the homepage isn't as per accessibility guidelines. Can you fix it?

Open your browser’s developer tools:

• Windows: Press F12 or Ctrl + Shift + I
• Mac: Press Cmd + Option + I

Look for red error messages in the Console tab. These tell you what went wrong. If you can’t understand what they mean, paste these messages into Claude chat and it will be able to help you take the next steps.

Possible causes:

• Wrong file path (check the src attribute)
• File is in the wrong folder
• Typo in the filename (case matters!)

Fix: Make sure your image path matches exactly where the file is:

<!-- If image is in the same folder -->
<img src="photo.jpg" alt="Photo">

<!-- If image is in an "images" folder -->
<img src="images/photo.jpg" alt="Photo">

Possible causes:

• CSS file not linked in HTML
• Typo in the CSS link path
• Browser cached old version

Fix: Check your HTML <head> section:

<link rel="stylesheet" href="styles.css">

Try hard refresh: Ctrl + Shift + R (Windows) or Cmd + Shift + R (Mac)

Possible causes:

• Script file not linked
• Script loaded before HTML elements exist
• Syntax error in code

Fix: Check Console for errors, and make sure your script is at the bottom of the body:

<body>
  <!-- Your content -->

  <script src="script.js"></script>  <!-- Put scripts at the end! -->
</body>

Now that you’ve got the first version of your vibe coded project running. You can proceed to make changes or head to deploy it on Github.