What happens when you load freecodecamp.com in your browser?
Published: 2022-05-28 07:51:18


 
 Understanding how the web works is as important as learning any skill about the web. What users see is a webpage which loads in the browser as soon as the user enters a URL but, there's a lot more things happening in the background which we will get know in this blog post by taking an example of loading **freecodecamp.com** in the browser.


**It all starts with entering the website URL (freecodecamp.com) into your browser**


##The browser looks up the IP address for the domain name via DNS

Computers talk to each other using IP addresses but since humans cannot memorize thousands of strings of numbers so we use Domain names. For example, if we want to buy something from amazon, we think of 'amazon' and not any large string of numbers.

DNS (Domain Name System) is responsible for translating domain names into its corresponding IP address.
 
After typing the URL and pressing enter, the browser looks-up for the IP address for the domain name **(freecodecamp.com)** through DNS. This is done so that we can get the IP address of the server to which we have to establish a connection.

##The browser sends HTTP request to the server
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36vrpetfqmmari254kxk.png)

The servers supports multiple services like email, webpages, chats etc.
After the browser has connected to the server, it sends a HTTP request to the server to access these services. A HTTP request contains a request method, headers and a body.
A request method is the method which is performed on a given resource. Some examples of request methods are GET, PUT, POST etc.

Now lets take a look what an HTTP request looks like

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ta9dnsrahyh6ev2juker.png)

- The request URL is the URL which we entered in our browser 
- The request method is set to **GET** as we want to get 
  those webpages from the server

- The remote address is the IP address of the domain name we 
  got via DNS.

Along with the IP address, there's an integer attached (443), this is called a **PORT number**. The PORT number 443 signify that this a secured request (HTTPS) for a web page.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mzoxk5inw03a77vpyhhx.png)


When a HTTP request is initiated, a request header is generated by the browser and sent to the server. This header contains all the necessary information about the request like:

- Requested URI
- Request method
- Path
- The type of data that browser will accept (html, xml, text 
  etc)


##The server sends back a HTTP response

The server processes the request, creates a response and sends it back to the client :

- Status code, which informs the client the status of the 
  request
- Response header
- Requested resource

 
The response **Status Code** indicates whether a specific HTTP request has been successfully completed.

The response status codes are grouped in five classes :

- Informational responses (100–199)
- Successful responses (200–299)
- Redirection messages (300–399)
- Client error responses (400–499)
- Server error responses (500–599)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ta9dnsrahyh6ev2juker.png)

In our example, the response status code we got in response is **301**, which indicates that the requested resource has been moved to a different URL.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/duai3d6suk9n9604opju.png)

This new URL is mentioned in location key of the response header, which is **freecodecamp.org**.

Now a new HTTP request is created for **freecodecamp.org** and is sent to the server.

The response status code we get is **200**, which indicates that the request has succeeded.  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ws9kgkxqcq93tl4btmil.png)


##The browser begins rendering the HTML

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvqjnxpt0xfhke1aa6w0.png)

The browser renders the index.html which we get as a response from response header.

**The browser sends HTTP requests for additional objects embedded in HTML (images, css, JavaScript).**

There it is! Our webpage has successfully loaded in our browser.