HTTP Status Code Basics
Tags: http, sinatra, codenewbie, beginners
Published: 2019-12-01 20:44:49

## What is an HTTP Status?

    HTTP stands for *Hypertext Transfer Protocol*. HTTP is the foundation of how we communicate with the internet. Any time you've clicked a link online, or typed a URL into your browser, you were making an HTTP request. The HTTP request goes out to the server, and the server sends a response back. What happens in response to you request is decided by the HTTP status the server sends back.  

---

## HTTP Status Categories:

### 1xx:

    100 statuses are informational, and generally mean that the server received and understood the request, and is continuing to process it. 

### 2xx:

    A 200 status means that everything is OK and indicates a successful response from the server. The server understood the request, processed it, and returned the requested data. Any time you successfully connect to a webpage and see the expected output, thats a 200 status. 

    **Here's a silly metaphor for you:** Imagine that your browser is a coffee shop, and the server is the barista. You walk up to the counter, give the barista your name and your order, and they hand you back a cup with your name on it that has the correct beverage in it. That's a 200 status. Everything went as expected and you received back what you expected from the server. 

### 3xx:

    A 300 status indicates a redirect. This can be a web address that has permanently moved and gets forwarded, or can be a redirect the developer has built in to the user-interface (like being redirected to your user account admin page after logging in to a website). For example, in the Sinatra project that I recently built, every `post` action ends with a redirect based on the users input. When a user logs in, they are redirected back to the their user page. This shows as a 303 (or "see other") HTTP status, after a successful log in attempt. If the log in attempt fails,  they are redirected to the 'Sign Up' page, which also shows as a 303 HTTP status. A similar process happens on the 'Sign Up' page. When the redirected page is finally displayed to the user, that's a 200 status.

**Here's another silly metaphor:** Let's imagine the coffee shop scenario again. You walk up to your barista and ask for your coffee order. This time, instead of handing you the coffee directly, they tell you to go down to the end of the counter to pick up your order. You *redirect* yourself to the end of the counter, where your order is waiting for you. The process of walking to the end of the counter is the 303 status, which redirects you. As soon as you receive your coffee, that's the 200 response you received from the redirect location. 

### 4xx:

    400 statuses indicate a bad request. In direct contrast to the 200 status, a 400 status not only doesn't understand your request, but can't process it, and might not have any idea what you're looking for *or* what you asked for! 

    The most widely recognizable 400 status is the 404 "Not Found" response. This response indicates that whatever you looked for couldn't be found. The frustrating thing about a 404 is that the thing you requested *might* exist, but the server didn't understand how you asked for it, and therefore couldn't find it. This can occur when you navigate to a URL the website doesn't know about or that doesn't exist. Imagine that a website has a URL like `www.website.com/some-page`, but you tried to navigate to `www.website.com/some-other-page`. The website won't know about that URL you typed in and give you a 404 response. 

    **Let's do another coffee metaphor!** Recently, someone asked me to explain what a 404 response was in layman's terms. This is actually how I came up with the coffee metaphor. Imagine the coffee shop you wanted to go to is next door to a French bakery. The owner of the French bakery only speaks French. You aren't paying attention to what you're doing (or where you are) and walk into the French bakery and asked for your usual coffee order. The poor French baker looks back at you and says "*Quoi?".* Turns out not only does the *server* not understand what you asked for, but you're looking for it in the wrong place!  

### 5xx:

    500 statuses indicate server errors. This can be a number of problems, including a bad gateway, a gateway timeout, and a downed server. A plain '500' response is the most generic and simply indicates an "Internal Server Error". In my current Sinatra project, this happens most often when trying to navigate to a sub-domain for a resource that does not exist. For example, you can visit to a users page by navigating to `/users/:id`, but if you request an `id` for a user that does not exist, this will result in a 500 error. The server understood what you wanted, but didn't have the requested resource to give back to you. 

    **Here's one last silly coffee metaphor for you:** Ok, so, we're back at your favorite cafe. Today you're in the mood to try something new. So instead of asking for your usual caramel latte, you ask the barista if they can make you a lavender latte. The barista knows what a latte is, and they know that they have a bunch of different flavor syrups, so they tell you they'll go check to see if they have any lavender on hand. But it turns out they don't carry lavender! The *server* understood your request, and knew where to find what you wanted, but they just didn't have what you asked for. 

---

    There are dozens and dozens of possible HTTP statuses, and this is just a **very** high level over-view. But I hope that this helps you understand what's happening "under the hood" while you're interacting with your favorite websites, and when/if you encounter an HTTP response/status you're unfamiliar with.

--- 
**Bonus Metaphor** (thank you [Yechiel] (https://dev.to/yechielk) for the reminder) : The [HTTP Status Code 418] (https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/418) states "I'm a teapot". So if you walked up to your teapot and asked for a cup of coffee, it would respond with a 418 Status code. And then promptly provide you with a cup of tea.