Ever wondered how the web works?

impoort design from "."

In this blog, I am going to tell you how the web works the moment you type the address of your website into your browser and hit “ENTER”. We will also talk about some concepts you need to know as a web develope

The link you type in your web browser is called Uniform Resource Locator (URL) and it is the address of a specific location on the web. The resources are the components that make up the address of that particular website.

Some of these resources are images, videos, web pages, etc. When you type the address of your website and you hit enter, two components come into play:

  1. The browser which is also called the client

  2. The computers hosting our website are called the servers

This is what we call the client-server model. The client requests a service and the server provides this service

The message these two use to communicate is formatted based on a protocol called HyperText Transfer Protocol(HTTP)

In simple terms, HTTP is what the client and the server use to talk to each other.HTTP is just plain text language for communicating over the internet. We also have HTTPS which is HyperText Transfer Protocol Secure. With HTTPS, the message that is exchanged between the client and the server are not in plain text but are encrypted. This encryption helps protect sensitive information, such as login credentials, personal details, and financial transactions, from being intercepted by attackers. So the client sends a request to the server and the server responds by providing what the client requested. In the context of data exchange using the HTTP protocol, every interaction comprises two essential messages: a request, which signifies what the client is asking for, and a response, which provides what the client requested. Now what is in this request and response?

GET /index.html HTTP/1.1: This is the request line, indicating that you are requesting the resource /index.html using the HTTP/1.1 protocol. 1.1 specifies the version of the HTTP request

Host: www.codewithmosh.com: This header specifies the domain of the server you are making the request to.

Accept-Language: This header indicates the language the client (browser) accepts in this case English

HTTP/1.1 200 OK: This is the status line, indicating that the request was successful (status code 200) 200 means successful or OK.

Date: The date and time of the response.

Content-Type: The type of content the server is sending back to the client in this case text/html The last part is the HTML document that represents the page of the requested address or URL

Now, as the browser reads this HTML document, it constructs the Document object Model(DOM). This is the model that represents the structure of the HTML document. As the browser is reading this HTML document, that is returned from the server, it discovers references to other resources in the document like images, videos, etc, each of these resources has an address URL. so for each resource the browser sends a different HTTP request to the server to fetch those resources. Many of these requests are sent in parallel so we can see the page as quickly as possible. Once the browser has all these resources it will render(display) the HTML document.

So this is what happens when you type an address in your browser and hit enter.

Let’s break down the client-server architecture so that a layman will understand.

Imagine you’re at a restaurant, and you want to order some food. In this scenario:

  1. You (the Customer) is the user of the browser:
  • You sit at the table, look at the menu, and decide what you want to eat.
  • When you’re ready to order, you call the waiter (browser).
  1. The Waiter is the Go-Between (browser):
  • The waiter takes your order and carries it to the kitchen.
  1. The Kitchen is the Server: