How The Web Works | Behind the scenes of a Website

how the web works techyexplorer

You must have clicked through a link or Googled “how the web works” and you landed up here on this website. So, how did it happened? Be it, you are just a curious techy explorer or an aspiring web developer, understanding the fundamentals of web will help in the long run.

In this blog we will discuss the behind the scenes of a website. What happens when we view a webpage on our computers or phones.

The Journey in a Nutshell

The moment we hit ENTER after typing the URL or click a link to the website, the request is sent to Domain Name Server, which is like the phone book for websites. The Domain Name Server converts the human-readable website URL to IP address for the server which hosts the website. An IP address is like an unique identifier assigned to every single device connected to the Internet.

The browser then makes a request to the server which hosts the website, with that IP address. The server handles the request and sends the response to the browser. Then it starts sending the website files in small chunks. The browser assembles the chunks and displays the full website to us in form of web page.

Now, lets dive deep.

Clients and Servers

The web is a client server system. Your computer is the client and the remote computers that store webpages, sites, or apps are the servers.

client server model
Image Credits: MDN Web Docs

When you want to view a website, the client device (your computer) makes a request to the server (some computer on the internet where the website files are hosted) and downloads a copy of webpage from the server and displays it in the web browser.

In this client server model, the internet connection allows the devices to send and receive the data in the web. Then there is TCP/IP (Transmission Control Protocol and Internet Protocol) which is a networking protocol that allows two computers to communicate.

So, when we type the URL of the website; something like techyexplorer.com and hit ENTER, the request goes to one of the many special computers on the internet known as Domain Name Servers. But why?

DNS Explained

Internet is massive and how the computers know where each other are?

Internet DNS

So, if you visit techyexplorer.com, how does you browser knows where the techyexplorer.com server is in the internet?

This is where the Domain Name System (DNS) comes in. DNS is like the phonebook of the internet. The real web addresses, the IP addresses are just strings of numbers like 63.245.215.20.

It represents a unique location on the web but it is hard to remember. We are humans and we might be able to remember the names of hundred of websites but to remember something like IP addresses, its tough. Of course unless you are a robot.

Are you a robot?

Loading ... Loading ...

So, the Domain Name Servers translate human-readable domain names that we type in the browsers into IP addresses.

Now, the browser sends an HTTP request message to the server, asking it to send a copy of the website to the client.

HTTP – How computers talk

Hypertext Transfer Protocol (HTTP) is an application-layer protocol computers use to transmit data. HTTP(S) is the agreed-upon protocol that your browser uses to communicate with the server. It defines how the request and the response will look like, what data they will have and how will it be submitted.

Additionally there is HTTPS which is HTTP Secure. It is like HTTP but encrypted, ensuring that the transmitted data is only viewable by the intended receipt.

Once the server receives the request, it performs certain actions and responds with a status code to the client which is, server just basically saying “Yo! you can have a look at the website. Here it is.”

Then, the server starts sending the website files in the chunks of packets to the client device.

The browser assembles the small chunks into a complete web page and displays it to the user. But what are those website files?

Website Component Files

So, now we know that visiting a website is requesting for website files form a server computer on the internet and our browser creating a webpage for us from those files. Those website files are mainly of two types:

1. Code Files

The websites are primarily built using HTML, CSS and JavaScript. Lets have a look into them:

a. HTML – The Skeleton

HTML is the core markup language for creating web pages. It stands for “Hyper Text Markup Language” and it describes the structure of a webpage.

Technically, it’s not a programming language – we can’t write any logic with it.

HTML programmer meme techyexplorer

b. CSS – The Styling

Cascading Style Sheets (CSS) is the language used to style the HTML documents. It is a style sheet language which describes how the HTML elements are to be displayed on the screen.

c. JavaScript- The Dynamic and Interactive

HTML and CSS are mainly for the look and are static. JavaScript gives the web page dynamic and interactive capabilities. It can be used to change the website whilst the user is viewing it.

2. Asset Files

The server would not only send the codes files but also other files like images, videos, audios, etc which we are collectively calling here as the asset files.

So, the browser assembles all these files and present a beautiful web page to you.

One more time – How The Web Works

So, lets do this one more time.

The moment we hit ENTER after typing the URL or click a link to the website, the request is sent to Domain Name Server, which is like the phone book for websites. The Domain Name Server converts the human-readable website URL to IP address for the server which hosts the website.

The browser then makes a request to the server which hosts the website, with that IP address. The server handles the request and sends the response to the browser. Then it starts sending the website files in small chunks. The browser assembles the chunks and displays the full website to us in form of web page.

Hope this makes more sense now and you have got an idea about what goes behind the scenes and how the web works.

1 thought on “How The Web Works | Behind the scenes of a Website”

Leave a Comment

Your email address will not be published. Required fields are marked *