Engineering Fluency OS

Why This Matters

Every webpage, every API call, every image download — they all happen through HTTP (HyperText Transfer Protocol). When you type a URL into your browser, HTTP defines exactly how your browser asks for a page and how the server responds.

Understanding HTTP means understanding the conversation between clients and servers. Every web developer reads and writes headers, chooses methods, and debugs status codes daily. It is the language of the web.

Define Terms

Visual Model

ClientBrowser

GET /apiHeaders + Body

ServerWeb Server

200 OKJSON / HTML

request

response

The full process at a glance. Click Start tour to walk through each step.

HTTP follows a request-response cycle: the client sends a request and the server returns a response.

Code Example

Code

// Making HTTP requests with fetch (modern JavaScript)

// GET request — retrieve data
async function getUser(id) {
  const response = await fetch(`https://api.example.com/users/${id}`);

  console.log(response.status);       // 200
  console.log(response.statusText);   // "OK"
  console.log(response.headers.get("content-type")); // "application/json"

  const user = await response.json(); // parse JSON body
  return user;
}

// POST request — send data
async function createUser(name, email) {
  const response = await fetch("https://api.example.com/users", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer my-token"
    },
    body: JSON.stringify({ name, email })
  });

  if (response.status === 201) {
    console.log("User created!");
  } else if (response.status === 400) {
    console.log("Bad request — check your data");
  }

  return response.json();
}

// HTTP Methods Summary:
// GET    — Read data      (no body)
// POST   — Create data    (has body)
// PUT    — Replace data   (has body)
// PATCH  — Update partial (has body)
// DELETE — Remove data    (no body)

Interactive Experiment

Try these in your browser's developer tools (Network tab):

Reload any webpage and inspect the first request. What method and status code do you see?
Look at the response headers. Can you find Content-Type, Cache-Control, and Set-Cookie?
Visit a URL that does not exist on a website. What status code does the server return?
Use the browser console to run fetch("https://httpstat.us/418").then(r => console.log(r.status)) — what do you get?

Quick Quiz

Coding Challenge

Status Code Classifier

Write a function called `classifyStatus` that takes an HTTP status code (number) and returns a string describing its category: '1xx Informational' for 100-199, '2xx Success' for 200-299, '3xx Redirection' for 300-399, '4xx Client Error' for 400-499, and '5xx Server Error' for 500-599. Return 'Unknown' for anything else.

Loading editor...

Real-World Usage

HTTP is the backbone of the modern web:

Web browsing: Every page load is an HTTP GET request. Forms submit via POST. Assets (images, CSS, JS) each require separate HTTP requests.
APIs: REST APIs, GraphQL endpoints, and webhooks all communicate over HTTP. Most mobile apps talk to their backend via HTTP.
HTTP/2 and HTTP/3: Modern versions add multiplexing (multiple requests over one connection), header compression, and server push for better performance.
Status codes in practice: Monitoring systems track 5xx rates to detect outages. CDNs use 301/302 for redirects. Rate limiters return 429 Too Many Requests.
Headers in practice: Authorization carries auth tokens, Cache-Control governs caching, Content-Type tells the client how to parse the body.

HTTP