How Websites Work? Explained! 🤔🌐

The web is used everywhere, not just in browsers.

You see, checking emails, tweeting, browsing, video calling etc., all use the internet.

Thus, a developer should understand how web pages function. This is essential for a developer.

It’s also crucial for resolving problems and improving the performance of an application or site.

How Websites Work?

Entering a URL (e.g., https://dev.to/) in the browser starts multiple processes.

These processes can be summarised in four main steps, namely –

1️⃣ URL Gets Resolved
2️⃣ Request Is Sent To The Server
3️⃣ Response From The Server Is Parsed
4️⃣ Requested Page Is Displayed

Follow along!

Step 1️⃣: URL Gets Resolved

Website code is stored on “servers” (a system that provides resources, data, services, or programs to other computers, known as clients, over a network.)

Suppose you enter a domain (e.g., https://dev.to/), which is translated to an IP address (a unique identifying number assigned to every device connected to the internet) using DNS (Domain Name System) servers.

Browsers have the addresses of DNS servers built-in.

After getting the IP address, the process moves to the next step, which is…

Step 2️⃣: Request Is Sent To The Server

With the IP address, the browser sends a request to the corresponding server.

Requests contain information and are sent using the HTTP/HTTPS protocol (a protocol for fetching resources such as files)

Servers respond to these requests with data, which can include the code for a website or other types of data.

The server’s response is determined by how web developers have programmed the requested website or data.

Step 3️⃣: Response From The Server Is Parsed

The browser receives and parses the server’s response.

The type of data (e.g., website, PDF) is identified through metadata (data about data in the web page) in the response.

If it’s a website, the data is parsed as HTML, which structures the webpage.

Step 4️⃣: Requested Page Is Displayed

The browser renders the website using the HTML data.

CSS adds styles to the HTML structure, making the page visually appealing.

Additional data can be fetched as per the instructions in the code.

JavaScript adds dynamic interactivity to the page.

Experience in these technologies will allow you to create engaging and responsive websites.

🙌 Final Thoughts

Here is an article explaining the “fundamentals of the internet”, in case you want to explore more about this stuff –

Okay, that’s it for today!

Connect with me @ Linktree.

Happy Coding! 🚀
Thanks for 25390! 🤗