🐱 API Learning Lab

API Learning Lab

Learn how APIs work by making real HTTP requests.

  1. YOU
  2. ↓
  3. REQUEST
  4. ↓
  5. API SERVER
  6. ↓
  7. RESPONSE
  8. ↓
  9. YOU
Start Learning

What is an API?

An API (Application Programming Interface) is a way for one program to ask another program for something. Think of a restaurant:

🧑 Youthe client
→
🧑‍🍳 Waiterthe API
→
🍳 Kitchenthe server
→
🍽️ Foodthe response

You ask the waiter for food. The waiter takes your request to the kitchen. The kitchen prepares the food. The waiter brings the result back. An API works in a similar way.

HTTP is the set of rules browsers and servers use to talk.
Client asks (your browser). Server answers.
URL is the address. Endpoint is one specific URL an API offers, like /404.
GET means "please give me something".
Why do we use GET?

Because most of the time we just want to read something without changing it. GET is the polite, safe way to say "show me".

Why does the server return a status code?

A picture, text or data alone doesn't say if things went well. The status code is a short number that tells you the result at a glance.

Interactive HTTP Playground Start Here

Type a status code and send a real request to HTTP Cats.

2. Your Request

No request sent yet.
↓

3. Server

🌐 HTTP.CAT SERVER
↓

4. API Response

No response yet.
↓

5. What Happened?

Enter a status code and send the request.

Request Inspector

Send a request to see its parts.

Response Inspector

Send a request to see the response.
Why is 404 an error?

Because the client asked for something that isn't there. The server worked fine, but the thing you asked for doesn't exist at that address. Any 4xx code means "the request had a problem".

Request / Response Visualizer

💻 Client
REQUEST →
🖥️ Server
← RESPONSE
💻 Client

Click the button to watch the journey.

HTTP Status Code Explorer

Click a status code to learn more.

HTTP Methods

What is JSON?

JSON is a common format APIs use to send structured data. It is easy for people to read and for programs to understand.

{
  "name": "Ahmed",
  "city": "Dubai",
  "age": 25
}

Keys are labels, strings are text in quotes, and numbers have no quotes.

Why does JSON exist?

Different programs need one shared way to describe data. JSON is simple, so almost every language can read and write it.

Headers

Headers are small notes attached to requests and responses, such as Content-Type: application/json, which says what kind of data is inside.

What is CORS?

Sometimes a browser can contact a server, but JavaScript is not allowed to read the response because of browser security rules.

The HTTP Cats example: Showing the cat with an <img> tag works, because images may be displayed from any site. Reading the same response with fetch() from your own page can be blocked unless the server sends a header such as Access-Control-Allow-Origin. That is why this lab uses an image.

CORS is a browser safety feature, not proof that the API is broken. The server answered, but the browser protected the user.

Why can't JavaScript always read another server's response?

Otherwise any website could secretly read your private data from other sites you're logged into. CORS lets a server say which sites are allowed.

API Learning Roadmap