←EasyCode logoEasyCodeLab

Codelab: Weather Dashboard

Build a Weather Dashboard from scratch — a complete project using the free Open-Meteo API, practiced in a real code editor and browser.

Step 1 of 8

Project Setup

In this codelab, you'll build a Weather Dashboard that fetches real weather data and displays it in a clean interface. Unlike previous lessons that used our sandbox, this project is designed to be built in a real code editor on your computer.

What you'll need:

  • A code editor (VS Code, or any text editor)
  • A modern web browser (Chrome, Firefox, Edge, or Safari)
  • An internet connection (to fetch weather data)

Setup steps:

  1. Create a new folder on your computer called weather-dashboard
  2. Inside that folder, create a single file: index.html
  3. Open index.html in your code editor
  4. We'll write all HTML, CSS, and JavaScript in this one file

We'll use the Open-Meteo API — a completely free, no-signup-required weather API. It provides real weather data for any location using latitude/longitude coordinates. No API key needed!

Tip
To open your HTML file in the browser, you can simply double-click it in your file manager. Or right-click and choose 'Open with' and select your browser. The URL will start with file:/// — that's normal for local files.