Weather
A weather app with data visualization, custom iconography, and visual storytelling.
What You’re Building
A single-page weather app that turns raw data into a beautiful, intuitive experience:
- Search any city and see current conditions at a glance
- A temperature graph that charts the forecast over the next 5 days
- Custom weather iconography that matches conditions
- A responsive layout that works on any device
When you’re done, you’ll deploy it to the web for anyone to use.
Why This Project
Weather data is everywhere, but most weather apps look the same. This project is your chance to do better.
You’ll take raw numbers — temperature, wind speed, conditions — and present them through thoughtful data visualization, clear iconography, and visual storytelling. A temperature graph makes trends obvious. A wind compass gives direction meaning. The right icon tells you more than a paragraph of text.
This is a design problem as much as a technical one.
You’ll learn:
- HTML for structure
- CSS for styling and data presentation
- JavaScript for interactivity and visualization
- Working with external APIs
- Turning raw data into something people actually want to look at
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
- Starting — Create the project files
- Layout — Build the interface
- Fetching Data — Connect to a weather API
- Forecast — Add the 5-day forecast
- Polish — Refine the experience
- Deploying — Put it on the web
- Next — Ideas for going further
Start Building
Open your terminal, navigate to where you want the project, and begin.