Skip to content
beginnerPhase 29 · Web Foundations

HTTP

Master the HyperText Transfer Protocol: methods, headers, status codes, and request lifecycle.

45m
0 problems
Topic Progress0%

HTTP Protocol Basics

HTTP (HyperText Transfer Protocol) is the application-layer protocol used for transmitting hypermedia documents. It's the foundation of data communication on the web.

Key Characteristics

  • Client-Server: Browser (client) initiates requests, server responds
  • Stateless: Each request is independent; server doesn't retain state
  • Text-based: Headers are human-readable text
  • Connectionless: Connection closes after response (HTTP/1.0)

HTTP Versions

Version Year Key Features
HTTP/0.9 1991 GET only, no headers, HTML only
HTTP/1.0 1996 Headers, status codes, content types
HTTP/1.1 1997 Persistent connections, chunked encoding, host headers
HTTP/2 2015 Multiplexing, header compression, server push
HTTP/3 2022 QUIC protocol, UDP-based, 0-RTT connection

HTTP Messages

HTTP Request (Client → Server)
┌─────────────────────────────────────────┐
│ GET /index.html HTTP/1.1                │  ← Request line
│ Host: www.example.com                  │  ← Headers
│ Accept: text/html                      │
│ Accept-Language: en-US                 │
│ Cache-Control: no-cache                │
│                                        │
│ (empty line)                           │  ← Separator
│ (request body for POST/PUT)            │  ← Optional body
└─────────────────────────────────────────┘

HTTP Response (Server → Client)
┌─────────────────────────────────────────┐
│ HTTP/1.1 200 OK                        │  ← Status line
│ Content-Type: text/html; charset=utf-8 │  ← Headers
│ Content-Length: 1234                    │
│ Cache-Control: max-age=3600            │
│                                        │
│ (empty line)                           │  ← Separator
│ <html>...</html>                       │  ← Response body
└─────────────────────────────────────────┘

HTTP Request Structure

An HTTP request consists of three parts: the request line, headers, and an optional body.

Request Line

METHOD /path HTTP/version

Examples:
GET /api/users HTTP/1.1
POST /login HTTP/1.1
PUT /users/123 HTTP/1.1

Common Request Headers

Header Purpose Example
Host Target domain www.example.com
Accept Expected response types text/html, application/json
User-Agent Client software info Mozilla/5.0...
Authorization Authentication credentials Bearer token123
Content-Type Body format application/json
Cookie Stored cookies session=abc123
Cache-Control Caching directives no-cache, max-age=3600
Accept-Language Preferred languages en-US, en;q=0.9

Request Body Examples

JSON (POST):

POST /api/users HTTP/1.1
Content-Type: application/json

{
  "name": "Alice",
  "email": "alice@example.com"
}

Form Data (POST):

POST /login HTTP/1.1
Content-Type: application/x-www-form-urlencoded

username=alice&password=secret123

Multipart (File Upload):

POST /upload HTTP/1.1
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary

------WebKitFormBoundary
Content-Disposition: form-data; name="file"; filename="photo.jpg"
Content-Type: image/jpeg

<binary data>
------WebKitFormBoundary--

HTTP Response Structure

An HTTP response consists of the status line, headers, and the response body.

Status Line

HTTP/version STATUS_CODE REASON_PHRASE

Examples:
HTTP/1.1 200 OK
HTTP/1.1 404 Not Found
HTTP/1.1 500 Internal Server Error

Common Response Headers

Header Purpose Example
Content-Type Response body format text/html; charset=utf-8
Content-Length Body size in bytes 1234
Set-Cookie Store cookies on client session=abc123; HttpOnly
Cache-Control Caching instructions max-age=3600, no-store
Location Redirect URL /new-page
ETag Resource version identifier "abc123"
Access-Control-Allow-Origin CORS permission *

Response Body Formats

HTML:

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8

<!DOCTYPE html>
<html>
<head><title>Example</title></head>
<body><h1>Hello, World!</h1></body>
</html>

JSON:

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

{"id": 1, "name": "Alice", "email": "alice@example.com"}

Binary (Image):

HTTP/1.1 200 OK
Content-Type: image/png
Content-Length: 15643

<binary image data>

Connection Management

HTTP/1.0: New connection per request
HTTP/1.1: Persistent connections (default), pipelining
HTTP/2: Multiplexing over single connection
HTTP/3: UDP-based (QUIC), eliminates head-of-line blocking

Practice Problems

0/3solved
Build HTTP Component

Create a reusable React component implementing HTTP. Include proper state management and accessibility.

Solution
// Production-ready component with:
// - Proper TypeScript types
// - Accessibility (ARIA)
// - Error boundaries
// - Loading states
// - Memoization where needed
HTTP Testing

Write unit and integration tests for HTTP using React Testing Library.

Solution
// Test coverage:
// 1. Rendering tests
// 2. Interaction tests
// 3. Edge case tests
// 4. Accessibility tests
HTTP Performance

Optimize HTTP for performance. Consider memoization, code splitting, and bundle size.

Solution
// Optimization techniques:
// 1. React.memo / useMemo / useCallback
// 2. Code splitting with lazy()
// 3. Virtual scrolling for lists
// 4. Image lazy loading
// 5. Bundle analysis

Quiz

1. What does HTTP stand for?

Question 1 options

2. Which HTTP feature allows multiple requests over a single connection?

Question 2 options

3. What does 'stateless' mean in HTTP?

Question 3 options

4. Which HTTP version uses the QUIC protocol?

Question 4 options

Flashcards

Question

What are the three parts of an HTTP request?

Click to reveal answer

Answer

Request line (method + path + version), Headers (key-value pairs), and optional Body (payload data).

Question

What is the difference between HTTP/1.1 and HTTP/2?

Click to reveal answer

Answer

HTTP/2 adds multiplexing (parallel requests), header compression, and server push. HTTP/1.1 uses persistent connections but no multiplexing.

Question

What does Content-Type header specify?

Click to reveal answer

Answer

The media type of the request or response body (e.g., text/html, application/json, image/png).

Question

What is the Host header used for?

Click to reveal answer

Answer

Specifies the domain name of the server being requested. Required in HTTP/1.1 for virtual hosting.

Question

What is HTTP?

Click to reveal answer

Answer

HTTP is a key concept in frontend development.

Revision Notes

Key Takeaways

  • 1.HTTP is the foundation of web communication
  • 2.HTTP is stateless - each request is independent
  • 3.HTTP/2 and HTTP/3 significantly improve performance
  • 4.Headers carry metadata about requests and responses
  • 5.The request-response cycle is the core of web interaction

Interview Tips

  • •Explain the difference between HTTP/1.1, HTTP/2, and HTTP/3
  • •Know the structure of HTTP requests and responses
  • •Understand why HTTP is stateless and how sessions work around it
  • •Be familiar with common HTTP headers and their purposes

Cheat Sheet

HTTP Cheat Sheet

Protocol Versions:

  • HTTP/1.0: Basic, new connection per request
  • HTTP/1.1: Persistent connections, host header
  • HTTP/2: Multiplexing, header compression
  • HTTP/3: QUIC/UDP, 0-RTT

Request Structure:

METHOD /path HTTP/version
Header: value

body

Response Structure:

HTTP/version STATUS reason
Header: value

body

Key Headers:

  • Host: Target domain
  • Content-Type: Body format
  • Authorization: Auth credentials
  • Set-Cookie: Store cookies
  • Cache-Control: Caching rules