How the Web Works: A Behind-the-Scenes Look

Let’s understand what happens when we type in a website address and hit Enter. We get our screen painted with website components, but how does it happen?

1. Finding the Website

To access a website, we usually enter its name in our browser. However, our computer doesn’t understand the name of the website in the way we do.

Instead, it uses IP addresses—strings of numbers that serve as unique identifiers for every device on the Internet. So, when we search for a website, our computer needs to find its IP address.

2. Your ISP: The Internet Gateway

When you type, let’s say, “google.com” in your web browser, your device does not directly connect to the website. Instead, it sends a request to your Internet Service Provider (ISP) asking for the website’s IP address.

An ISP is a company that provides you with internet access, and it varies from country to country.

3. DNS: The Internet’s Phonebook

The ISP also doesn’t know where “google.com” is located. To find out, it contacts the Domain Name System (DNS), which acts like a giant phonebook for the Internet.

The DNS stores all website’s IP addresses alongside their domain names. So when the ISP receives a request for google.com, it contacts the DNS to find out the IP address associated with that domain.

The DNS then responds with the IP address, which the ISP sends back to your browser.

4. Connecting to the Website

Once we have the IP address, your browser prepares an HTTP request. This request then travels through a network of cables and routers to reach its destination.

The server that receives your request acts like a warehouse that stores all the files that make up a website. It searches for the HTML, CSS, and JavaScript files that build ‘google.com’ and sends them back to your browser.

5. Rendering the Magic

Now that your browser has these files, it starts to interpret them. It reads the HTML, understands the structure, applies the CSS styles, executes the JavaScript… and the webpage appears on your screen.

After this point, there might be many other requests back and forth between your browser and Google servers for other HTML, CSS, and JS files. However, you don’t need to make another request to your ISP for these, as they go directly to Google’s servers. Additionally, your browser has likely cached the IP address of google.com, so it won’t need to make an unnecessary request to your ISP next time.

Experiment: See It in Action

Want proof? Try this:

Open your browser’s developer tools (by pressing F12 or right-clicking and selecting “Inspect”).Go to the “Network” tab.Type “google.com” and hit Enter.Find the first request and look at the “Remote Address” — that’s Google’s IP address!Copy-paste the IP address into a new tab and hit Enter.

You’ll get Google without your ISP and DNS getting involved.

Summary: The Big Picture

So, when you visit a website:

Domain Name Translation: Your ISP uses DNS to find a website’s IP address.HTTP Request: Your browser asks the server for the website.Server Response: The server sends the HTML, CSS, and JavaScript files.Rendering: Your browser assembles and displays the website.

If you’re interested more about web development fundamentals, make sure to Join my Free Web Developers Community and Get Access to All Courses.

How Your Browser Finds Websites was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

​ Level Up Coding – Medium

about Infinite Loop Digital

We support businesses by identifying requirements and helping clients integrate AI seamlessly into their operations.

Gartner
Gartner Digital Workplace Summit Generative Al

GenAI sessions:

  • 4 Use Cases for Generative AI and ChatGPT in the Digital Workplace
  • How the Power of Generative AI Will Transform Knowledge Management
  • The Perils and Promises of Microsoft 365 Copilot
  • How to Be the Generative AI Champion Your CIO and Organization Need
  • How to Shift Organizational Culture Today to Embrace Generative AI Tomorrow
  • Mitigate the Risks of Generative AI by Enhancing Your Information Governance
  • Cultivate Essential Skills for Collaborating With Artificial Intelligence
  • Ask the Expert: Microsoft 365 Copilot
  • Generative AI Across Digital Workplace Markets
10 – 11 June 2024

London, U.K.