DEV Community

Cover image for How Websites Work? Explained! πŸ€”πŸŒ
Arjun Vijay Prakash
Arjun Vijay Prakash

Posted on

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! πŸ€—

Top comments (11)

Collapse
 
shwetak profile image
Shweta

Thank you for sharing your knowledge, this was needed!!

Collapse
 
arjuncodess profile image
Arjun Vijay Prakash

Thanks!

By the way, can we connect?

Collapse
 
shwetak profile image
Shweta

Ya! sure.

Thread Thread
 
arjuncodess profile image
Arjun Vijay Prakash

Socials, please?

Mine here: linktr.ee/arjuncodess/

Thread Thread
 
shwetak profile image
Shweta

Following on insta n twitterπŸ™Œ

Collapse
 
locnguyenpv profile image
Luke

Nice articles 😎😎😎 BTW, I have another article to explain how browsers can find the IP of a website in millions website, check it here πŸ˜‰

Collapse
 
arjuncodess profile image
Arjun Vijay Prakash

This is great! Keep going!

Collapse
 
eayurt profile image
Ender Ahmet Yurt

nice post, thank you πŸ™ I am sure everyone who develops web applications would read that one.

Collapse
 
arjuncodess profile image
Arjun Vijay Prakash

I really appreciate you commenting on my posts, it truly motivates me!

Thanks!!!

Collapse
 
henrylehd profile image
Henry Dioniz

Great

Collapse
 
arjuncodess profile image
Arjun Vijay Prakash

Thanks!