Skip to content
beginnerPhase 29 · Web Foundations

HTTP Status Codes

Know 2xx, 3xx, 4xx, and 5xx status codes and when to use each.

30m
0 problems
Topic Progress0%

2xx Success

Status codes in the 2xx range indicate the request was successfully received, understood, and processed.

Common 2xx Codes

Code Name Usage
200 OK Standard success response
201 Created Resource created successfully
202 Accepted Request accepted, processing pending
204 No Content Success, no response body
206 Partial Content Partial resource returned (range requests)

200 OK

The most common success code. Used for successful GET, PUT, PATCH, or DELETE.

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

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

201 Created

Used when a new resource is created (typically after POST).

HTTP/1.1 201 Created
Location: /api/users/2
Content-Type: application/json

{"id": 2, "name": "Bob", "email": "bob@example.com"}

202 Accepted

Used for asynchronous operations. Request is accepted but not yet processed.

HTTP/1.1 202 Accepted
Content-Type: application/json

{"taskId": "abc-123", "status": "processing"}

204 No Content

Success with no response body. Common for DELETE operations.

HTTP/1.1 204 No Content

206 Partial Content

Used with Range requests for large files or media streaming.

HTTP/1.1 206 Partial Content
Content-Range: bytes 0-1023/4096
Content-Length: 1024
Content-Type: video/mp4

<binary data>

3xx Redirection

Status codes in the 3xx range indicate the client needs to take additional action.

Common 3xx Codes

Code Name Usage
301 Moved Permanently Resource permanently moved (SEO preserved)
302 Found Temporary redirect
303 See Other Redirect with GET (after POST)
304 Not Modified Cached version is valid
307 Temporary Redirect Preserve method
308 Permanent Redirect Permanent, preserve method

301 Moved Permanently

Resource permanently moved. Browser updates bookmarks. SEO link juice passed.

HTTP/1.1 301 Moved Permanently
Location: https://www.newsite.com/page
Cache-Control: max-age=3600

302 Found (Temporary Redirect)

Temporary redirect. Original URL still valid. Don't update bookmarks.

HTTP/1.1 302 Found
Location: /maintenance.html

304 Not Modified

Cached response is still valid. No body sent. Saves bandwidth.

HTTP/1.1 304 Not Modified
ETag: "abc123"
Cache-Control: max-age=3600

Redirect Best Practices

// After successful POST, redirect to GET
app.post('/users', (req, res) => {
  const user = createUser(req.body);
  res.redirect(303, `/users/${user.id}`);  // 303 changes to GET
});

// Permanent redirect for moved content
app.get('/old-page', (req, res) => {
  res.redirect(301, '/new-page');
});

// Temporary redirect during maintenance
app.get('/status', (req, res) => {
  res.redirect(307, '/maintenance');
});

4xx Client Errors

Status codes in the 4xx range indicate the client made an error.

Common 4xx Codes

Code Name Usage
400 Bad Request Malformed syntax or invalid data
401 Unauthorized Authentication required
403 Forbidden Authenticated but not authorized
404 Not Found Resource doesn't exist
405 Method Not Allowed HTTP method not supported
409 Conflict Resource state conflict
422 Unprocessable Entity Validation errors
429 Too Many Requests Rate limit exceeded

400 Bad Request

Client sent invalid data.

HTTP/1.1 400 Bad Request
Content-Type: application/json

{"error": "Invalid email format", "field": "email"}

401 Unauthorized

Client must authenticate.

HTTP/1.1 401 Unauthorized
WWW-Authenticate: Bearer realm="api"
Content-Type: application/json

{"error": "Authentication required"}

403 Forbidden

Client is authenticated but not authorized.

HTTP/1.1 403 Forbidden
Content-Type: application/json

{"error": "Insufficient permissions"}

404 Not Found

Resource doesn't exist.

HTTP/1.1 404 Not Found
Content-Type: application/json

{"error": "User not found"}

429 Too Many Requests

Rate limit exceeded.

HTTP/1.1 429 Too Many Requests
Retry-After: 60
X-RateLimit-Limit: 100
X-RateLimit-Remaining: 0

{"error": "Rate limit exceeded. Try again in 60 seconds."}

5xx Server Errors

Status codes in the 5xx range indicate the server failed to fulfill a valid request.

Common 5xx Codes

Code Name Usage
500 Internal Server Error Generic server error
501 Not Implemented Feature not supported
502 Bad Gateway Upstream server returned invalid response
503 Service Unavailable Server overloaded or maintenance
504 Gateway Timeout Upstream server too slow

500 Internal Server Error

Generic server error. Log the details for debugging.

HTTP/1.1 500 Internal Server Error
Content-Type: application/json

{"error": "Internal server error", "requestId": "abc-123"}

502 Bad Gateway

Proxy/gateway received invalid response from upstream.

HTTP/1.1 502 Bad Gateway
Content-Type: text/html

<h1>Bad Gateway</h1>
<p>The proxy server received an invalid response from the upstream server.</p>

503 Service Unavailable

Server temporarily unavailable (overloaded, maintenance).

HTTP/1.1 503 Service Unavailable
Retry-After: 300
Content-Type: application/json

{"error": "Service temporarily unavailable. Please try again later."}

504 Gateway Timeout

Upstream server didn't respond in time.

HTTP/1.1 504 Gateway Timeout
Content-Type: application/json

{"error": "Upstream server timeout"}

Error Handling Best Practices

// Always return meaningful error responses
app.use((err, req, res, next) => {
  console.error(err.stack);
  
  // Don't expose internal details in production
  res.status(err.status || 500).json({
    error: err.message || 'Internal server error',
    requestId: req.id
  });
});

// Log 5xx errors for monitoring
if (res.statusCode >= 500) {
  metrics.increment('server.error');
}

Practice Problems

0/3solved
Build HTTP Status Codes Component

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

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

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

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

Optimize HTTP Status Codes 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. Which status code indicates a resource was successfully created?

Question 1 options

2. What is the difference between 401 and 403?

Question 2 options

3. When should you use 301 vs 302 redirect?

Question 3 options

4. What does 429 Too Many Requests mean?

Question 4 options

Flashcards

Question

What do 2xx status codes mean?

Answer

Success. The request was received, understood, and processed successfully (200 OK, 201 Created, 204 No Content).

Question

What is the difference between 301 and 302?

Answer

301 is permanent redirect (SEO preserved, update bookmarks). 302 is temporary (original URL still valid).

Question

When do you use 404 Not Found?

Answer

When the requested resource doesn't exist on the server. Common for missing pages or invalid API endpoints.

Question

What does 500 Internal Server Error mean?

Answer

The server encountered an unexpected error. Check server logs for details. Don't expose internals to clients.

Question

What is HTTP Status Codes?

Answer

HTTP Status Codes is a key concept in frontend development.

Revision Notes

Key Takeaways

  • 1.Status codes indicate success (2xx), redirection (3xx), client errors (4xx), or server errors (5xx)
  • 2.Use 201 Created for resource creation, 204 No Content for successful deletion
  • 3.301 is permanent, 302 is temporary - affects SEO and caching
  • 4.401 means unauthenticated, 403 means unauthorized
  • 5.Always return meaningful error messages with appropriate status codes

Interview Tips

  • Know the most common status codes in each category
  • Understand the difference between 401 and 403
  • Know when to use 301 vs 302 vs 307 redirects
  • Explain how to handle errors gracefully in APIs

Cheat Sheet

HTTP Status Codes Cheat Sheet

2xx Success:

  • 200 OK: Standard success
  • 201 Created: Resource created
  • 202 Accepted: Async processing
  • 204 No Content: Success, no body

3xx Redirection:

  • 301 Moved Permanently: SEO preserved
  • 302 Found: Temporary redirect
  • 304 Not Modified: Cache valid

4xx Client Errors:

  • 400 Bad Request: Invalid data
  • 401 Unauthorized: Auth required
  • 403 Forbidden: Not authorized
  • 404 Not Found: Resource missing
  • 429 Too Many Requests: Rate limit

5xx Server Errors:

  • 500 Internal Server Error: Generic
  • 502 Bad Gateway: Upstream invalid
  • 503 Service Unavailable: Overloaded
  • 504 Gateway Timeout: Upstream slow