Advanced 15 min

Working with APIs & Data

Everything you have built so far is static — it shows the same thing every time someone opens the page. But what if your page could show today's weather, the latest news headlines, or live stock prices? That is what APIs do: they let your page talk to other services on the internet and pull in fresh data whenever someone visits.

The good news? You do not need to understand the technical details. You describe what you want to Claude, and it writes all the connection code for you. But knowing the basics helps you ask better questions and debug faster when something goes wrong.

What is an API?

An API is like a waiter at a restaurant. You (your webpage) give the waiter (the API) your order (a request). The waiter goes to the kitchen (the server) and brings back your food (the data). You do not need to know how the kitchen works — you just need to know how to place an order.

API stands for Application Programming Interface, but the name does not matter nearly as much as the concept: it is a way for your page to ask another service for data and get a structured response back.

Your Page
The customer
Request
The order
API Server
The kitchen
Response
The food
Display
You eat

Every time you check the weather on your phone, scroll through social media, or see a map embedded on a website, APIs are working behind the scenes to fetch that data in real time.

The Weather Dashboard Project

Let us put this into practice. You want a weather dashboard — a page where you type a city name and instantly see live weather data. Here is what you tell Claude:

Terminal — Claude Code
you: Build me a weather dashboard. When I type a city name and press search, it should show the current temperature, weather condition (sunny, cloudy, rain), humidity, and wind speed. Use the OpenWeatherMap API. Make it look clean with weather icons and a blue gradient background.
 
claude: I'll build a weather dashboard for you using the OpenWeatherMap API.
 
Creating file: index.html
Creating file: style.css
Creating file: app.js
 
Done! I created three files:
- index.html — the page structure with a search bar and weather cards
- style.css — blue gradient background, clean card layout, responsive design
- app.js — fetches weather data from OpenWeatherMap and updates the display
 
You will need a free API key from openweathermap.org to use it.
Sign up at https://home.openweathermap.org/users/sign_up

Notice how Claude created three separate files and told you exactly what you need to do next — get an API key. That brings us to an important topic.

API Keys — Your Access Pass

An API key is like a membership card. When your page sends a request to an API, it includes the key so the service knows who is asking. This lets the service track usage, enforce limits, and block abuse.

Most APIs offer a free tier that is more than enough for personal projects. OpenWeatherMap, for example, gives you 1,000 free requests per day — plenty for a personal weather dashboard.

Here is the critical rule:

Warning

Never put API keys directly in HTML or JavaScript files. Anyone visiting your page can view the source code and steal your key. Always ask Claude to handle keys server-side or through environment variables.

Here is how to set up a key safely. First, create a .env file in your project folder:

.env
OPENWEATHER_API_KEY=abc123yourkey

Then tell Claude how you want it handled:

Terminal — Claude Code
you: Store the API key in a .env file and load it server-side. Don't expose it in the HTML or JavaScript that the browser sees.
 
claude: I'll set up a small server that reads the API key from .env and proxies the weather requests. The key stays on the server and never reaches the browser.
 
Creating file: server.js
Updated: app.js
Creating file: .gitignore (excludes .env from version control)

Claude creates a lightweight server that sits between your browser and the weather API. Your browser asks your server for weather data, and your server (which has the key) forwards the request to OpenWeatherMap. The key never appears in client-side code.

How a Fetch Request Works

When Claude builds API-powered features, it writes something called a fetch request. Here is a simplified version of what that looks like:

app.js
1// 1. Ask the weather API for data
2fetch('https://api.openweathermap.org/data/2.5/weather?q=London')
3 
4 // 2. Convert the response to something we can read
5 .then(response => response.json())
6 
7 // 3. Use the data to update the page
8 .then(data => {
9 document.getElementById('temp')
10 .textContent = data.main.temp + '°C';
11 });

You do not need to memorize this. When you ask Claude to "fetch weather data and display it," this is what it writes behind the scenes. But understanding the flow helps you debug when things go wrong:

  1. Ask — Your page sends a request to a URL (called an endpoint)
  2. Receive — The API sends back data in a format called JSON
  3. Display — Your code pulls specific values out of the response and puts them on the page

If you ever see data not showing up, it almost always means one of those three steps failed. And you can tell Claude exactly which step to investigate.

Free APIs for Beginners

The best way to learn is to experiment. Here are six APIs that are free and beginner-friendly. Several of them do not even require an API key — you can start using them immediately.

OpenWeatherMap

Current weather, forecasts, and historical data for any city in the world.

REST Countries

Population, capital, languages, currency, and flag for every country.

No key needed

The Dog API

Random dog photos, filterable by breed. Endless cute content for testing.

No key needed

Quotable

Random inspirational quotes with author attribution. Great for quote generators.

No key needed

NewsAPI

Top headlines and article search across thousands of news sources worldwide.

JSONPlaceholder

Fake users, posts, and comments for testing. Perfect for practicing without consequences.

No key needed
Try This

Build a simple page using one of the no-key-required APIs above. Start with this prompt: "Build me a page that shows a random dog photo with a button to load a new one. Use the Dog API." It is one of the most satisfying beginner projects — you get a working, fun page in under a minute.

When Things Go Wrong

APIs are external services, which means they can fail in ways that your own code cannot. Here are the three most common issues and exactly what to tell Claude when they happen:

The Problem What to Tell Claude
"The API is returning an error" "Check the API URL and make sure the key is correct. Show me the full error response."
"The data shows as [object Object]" "You need to access a specific property. Console.log the full API response so I can see the structure."
"It works locally but not on my deployed site" "The API key might need to be configured in the hosting environment variables."

The pattern is always the same: describe the symptom to Claude and ask it to investigate. You do not need to know what went wrong — you just need to describe what you are seeing.

Review Flashcards

Click each card to reveal the answer. Use the arrows to move between cards.

Card 1 of 5

Quick Check

1. What does an API do?

A It stores your files on the internet
B It lets your webpage get data from other services
C It converts your HTML into a mobile app
D It protects your website from hackers

2. Why should API keys be kept secret?

A They contain your personal password
B They slow down your website if visible
C Anyone could use or abuse your key and get your access revoked
D They are encrypted and cannot be read anyway

3. Which of these APIs requires NO key to use?

A OpenWeatherMap
B NewsAPI
C Both OpenWeatherMap and NewsAPI
D REST Countries and The Dog API

Key Takeaways

  • APIs let your pages pull live data from external services — weather, news, photos, and more.
  • Think of an API as a waiter: you place an order (request), and it brings back your food (data).
  • API keys must be kept secret. Store them in .env files and never put them in client-side code.
  • The fetch flow is always: Ask (send a request), Receive (get JSON data), Display (put it on the page).
  • Many APIs are free and require no key at all — perfect for experimenting with your first data-powered projects.