2 min read
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 elementsDon’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