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.
Create CLAUDE.md
Now give Claude a file that describes your project. This is called CLAUDE.md — Claude reads it automatically every time you start a session, so it always knows what you’re building.
Create a CLAUDE.md file for this project.
Here's what it should say:
# Weather Dashboard
A single-page web app that shows current weather for any city.
## What This Is
- A weather dashboard using vanilla HTML, CSS, and JavaScript
- Uses the Open-Meteo API (free, no API key needed)
- Clean design with weather icons and readable layouts
## Design Goals
- Minimal and clear — the weather data is the focus
- Weather icons that match conditions
- Works well on desktop and mobile
## Tech
- index.html, styles.css, script.js
- No build tools or frameworks
- Open-Meteo API for weather dataClaude will create the file in your project folder. From now on, every time you start Claude in this folder, it picks up where you left off.
Want to understand why this matters? Read the Your Project’s Brain guide.
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 elementsDon’t worry about styling yet. Just structure.
Checkpoint
By now you should have:
- Three files created (HTML, CSS, JS)
- Page loads in browser
- CLAUDE.md created
- 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.