Step 1: Starting

Create the project files and get something on screen.

Create the Project

Make a new folder for your project:

Create a new folder called Weather with three files:
- index.html
- styles.css
- script.js

Set up a basic HTML page that links to the CSS and JS files.
Add a heading that says "Weather" so we know it's working.

Let Claude create the files.

Open in Browser

Find your index.html file and open it in a browser (double-click or drag to browser).

You should see your heading. If you do, the setup works.

How Web Projects Work

Unlike native apps, web projects don't need to compile. You edit files, refresh the browser, and see changes immediately.

The three files have different jobs:

• HTML — The content and structure
• CSS — How it looks
• JavaScript — How it behaves

They work together. HTML references the other two.

Add Basic Structure

Update the HTML to have:
- A search area at the top for entering a city
- A main area where we'll show weather results
- Keep it semantic — use appropriate HTML elements

Don't worry about styling yet. Just structure.

Checkpoint

By now you should have:

• Three files created (HTML, CSS, JS)
• Page loads in browser
• Basic structure in place

What You Learned

• Web projects are just files
• HTML links to CSS and JS
• Edit → Save → Refresh workflow

Tip: Want Claude to produce more polished styling as you build? Later in the course you'll learn about skill files — drop-in markdown files that teach Claude design conventions, responsive patterns, and more.

Exercises

1. Paste the "Create the Project" prompt, then open index.html in your browser to confirm the "Weather" heading appears.
2. Paste the "Add Basic Structure" prompt, then view the page source (or read the HTML) and check that semantic elements were used for the search and results areas.
3. Make a tiny change to the heading text, save, and refresh the browser to practice the Edit → Save → Refresh loop.