project weather

Weather

System Text-to-Speech Ready
Slide: 0:00 / 0:00
Slide 1 of 0Interactive Deck

Full Lesson Reference

A web app that shows current weather and a forecast for any city.

What You're Building

A single-page web app that:

  • Takes a city name as input
  • Shows the current temperature and conditions
  • Displays a 5-day forecast
  • Works on any device

When you're done, you'll deploy it to the web for anyone to use.

Why This Project

Everyone checks the weather. Building your own weather app teaches you how real apps work — fetching live data from an API and displaying it.

You'll learn:

  • HTML for structure
  • CSS for styling
  • JavaScript for interactivity
  • Working with external APIs

Before You Start

Make sure you have:

  • A code editor (VS Code or Cursor)
  • Claude Code running
  • A browser (Safari, Chrome, Firefox)

No frameworks. No API keys. Just files and a browser.

The Steps

  1. Starting — Create the project files
  2. Layout — Build the interface
  3. Fetching Data — Connect to a weather API
  4. Forecast — Add the 5-day forecast
  5. Polish — Refine the experience
  6. Deploying — Put it on the web
  7. Next — Ideas for going further

Start Building

Open your terminal, navigate to where you want the project, and begin.

Exercises

  1. Write a one-sentence description of what your weather app should do when a user opens it for the first time — this becomes your guiding intent for the build.
  2. List the three files you'll create (HTML, CSS, JS) and note what each is responsible for before you write any code.
  3. Confirm your environment is ready: open your code editor, start Claude Code, and have a browser open side by side.