Skip to content

HTTP

Learn HTTP — the protocol that transfers every web page, and the status codes that describe responses.

What you'll learn

  • What HTTP is and how requests and responses work
  • The meaning of common HTTP methods (GET, POST, PUT, DELETE)
  • How status codes categorize responses
  • The difference between HTTP and HTTPS

Concept

HTTP

HTTP (HyperText Transfer Protocol) is the set of rules that governs how clients and servers communicate on the web. Every time your browser loads a page, it speaks HTTP with the server. Understanding HTTP is understanding the web's conversation.

Requests and Responses

An HTTP exchange has two parts:

Request (client → server):

GET /users/42 HTTP/1.1
Host: api.example.com
Accept: application/json

Response (server → client):

HTTP/1.1 200 OK
Content-Type: application/json

{"id": 42, "name": "Ada"}

The request has a method, a path, and headers. The response has a status code, headers, and a body.

HTTP Methods

| Method | Purpose | |--------|---------| | GET | Read data (fetch a page or resource) | | POST | Submit data (create a new resource) | | PUT | Replace a resource entirely | | PATCH | Partially update a resource | | DELETE | Remove a resource |

GET and POST are the most common. GET should never change data; POST is used for forms and creating things.

Status Codes

The first digit tells the category:

  • 2xx — Success (200 OK, 201 Created).
  • 3xx — Redirect (301 Moved, 304 Not Modified).
  • 4xx — Client error (404 Not Found, 401 Unauthorized).
  • 5xx — Server error (500 Internal Server Error, 503 Service Unavailable).

When something breaks, the status code tells you whose fault it is: 4xx means you sent a bad request; 5xx means the server failed.

HTTPS

HTTPS is HTTP encrypted with TLS. The "S" stands for Secure. Without it, your traffic travels in plaintext — anyone on the network can read passwords and cookies. Modern browsers require HTTPS for most features, and you should never send sensitive data over plain HTTP.

Example

              // Fetching data from an API using HTTP GET
async function getUser(id) {
  const response = await fetch(`https://api.example.com/users/${id}`);

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
  }

  const user = await response.json();
  return user;
}

// Sending data with HTTP POST
async function createUser(data) {
  const response = await fetch("https://api.example.com/users", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data),
  });
  return response.json();
}

fetch() is the browser's built-in HTTP client. The first call does a GET and parses JSON. The second sends a POST with a JSON body. Checking response.ok handles non-2xx status codes.

Try it

  • JWT Decoder

    JWTs travel in HTTP Authorization headers. Decode one to inspect the claims a server sent.

  • Hash Generator

    ETags and integrity checks use hashes sent over HTTP. Generate one to see how content addressing works.

Common mistakes

The mistake

Ignoring non-2xx HTTP responses in fetch().

The fix

fetch does not throw on 404 or 500 — only on network failure. Check response.ok or response.status and handle errors explicitly.

The mistake

Using GET to send sensitive data in the URL.

The fix

URLs are logged by servers and proxies and saved in browser history. Use POST with a request body for sensitive data, and always use HTTPS.

Related Resources

Related Guides

Practice HTTP

2 exercises

Practice HTTP

Look up unfamiliar terms

A beginner-friendly glossary explains jargon in plain English — variables, functions, DOM, Promise, and more.

View glossary

Build real projects

Apply what you learned by building guided projects with starter code and solutions.

View projects

Decode error messages

Plain-English explanations of common errors — what they mean, why they happen, and how to fix them.

View errors