Introduction

When one decides to jump into the realm of Web development, they are greeted by the 3 fundamental blocks of any website (HTML, CSS, JS). And it is from here where one's journey usually takes off, and branches out into many domains (Frontend, Backend, FullStack) and many technologies (Angular, React, Vue etc).

But if I were to point-blank ask you: "Do you know how the web works?", would you be able to answer? I don't blame you, and there's no harm in acknowledging that.

As budding web developers, we're so engrossed in the "development" side that we never really stopped to smell the roses and know how the "web" works.

But looking ahead, it is handy to know what happens, beneath all the packages, libraries and frameworks, and how your application works and interacts with users. And to me, that is what separates an experienced Senior Developer from a Junior Developer

Let's begin the journey

I'm pretty sure that for all the readers of this blog post, their first interaction with the web started from their browsers (remember the good old days, with Internet Explorer?).

Let's say it's 2007 and you want to log into your Club Penguin account and continue mastering the art of Card-Jitsu.

Here's what you would do:

1. You would open your browser
2. Enter the URL in your browser (ex: "clubpenguin.com")
3. Press Enter

To the average user, it may not seem like much is happening. But in fact, there are a lot of quirky and magical connections happening that we cant see.

Let's take a peek into how the web works

You've now told the browser, "Hey browser, I want you to take me to Club Penguin's website". But in reality, the browser does not even know where to even start looking for your result.

What your browser will instead do, is locate a DNS Server and check whether it has the IP address of that particular domain within its database

💡 DNS: Domain Name System, a distributed database which keeps records of domain names and their corresponding IP addresses.

You can think of an IP address like your own home address. It tells anyone that asks that "Hey, I am Club Penguin, and my IP address is 108.123.1.1" and will take you to that particular server that says "Hey I am 108.123.1.1! Bring your request to me!"

And once the server receives the request, it then goes about preparing and sending the response data back to your browser

Decoding the mystical URL

Before we move on further, it is just as important to know the request you are sending to the destination server. So let's decode the meaning behind the URL

URL: Uniform Resource Locator

Let's suppose you want to log in to your ClubPenguin account. Naturally, this is the URL you would have typed into your browser's address field. Let's break down the URL further into parts

Protocol: It determines how the data is transferred between browser and server. You would be familiar with HTTP and HTTPS

Subdomain: As the name says, it represents a part (or sub category) of a top-level domain. It allows the division of domains into smaller segments.

Root Level Domain: Also called Domain Name, it is the registered identification that is stored in DNS which specifies where the website is located.

Top-Level Domain: As the name says, it is the highest level domain within the DNS hierarchy. These can be considered as zones which are standardized by international bodies like ICANN

Path: It refers to the specific page under the root domain. Think of it like the root domain is a big folder containing many subfolders or pages.

The Oompa Loompas of the internet

One thing I'm sure you must be asking is "How does my browser know to take me to that IP address?" To understand that, we will first have to know about routing.

💡 Routing: It is the process of figuring out the ideal path from the user to the server (or source to destination). This process is handled by devices known as Routers.

You can think of the entire internet as a web of routers that are interconnected with each other, and passing requests between them as they direct users (browsers) to their destinations (servers). Thus the user is routed from their local IP address to the server IP address. This entire process is oblivious and hidden to the user, and to them, they just care to get to the destination, much like Augustus who doesn't care how the Oompa Loompas process the chocolate, he just wants to be given infinite chocolate!

Thus when your browser declares that it wants to visit 108.123.1.1, it sends a request to the nearest router which then passes the request to the next router and so on until you end up at the server that hosts the website. Once the server receives the request, it goes ahead and responds with the data required and is then rendered on the browser, and we can finally get to practising Card-Jitsu!

Resources

While I have tried my best to simplify the basics of how the web works, I would strongly recommend that you check out other resources to further your understanding.

• MDN: How the web works
• freeCodeCamp: How the web works

Wrapping up!

We've covered a lot about how the web works, I hope by reading this blog, you now have a good understanding of what happens underneath it all when you enter a URL in your browser!

While knowing these are not mandatory to be called a Web Developer, it helps to not just write code optimized for the web, but also grow in your career and become a Senior Developer.

• Want to continue this discussion? Let's converse on Twitter
• Curious about what I'm up to besides writing blogs? Check out my Github

Till next time, take care and cheers! 🥂