loading...
Cover image for How the Web Works (for Front End Devs)

How the Web Works (for Front End Devs)

anonyda profile image Nida Shaikh ・3 min read

Before we start learning how to make websites, we need to know how the Web works. That's one of the mistakes I did when I started my web development journey - I started by building websites, but I never made an effort to understand the platform my websites are going to work on.
I say it's an honest mistake because, as Socrates said, we don't know what we don't know. We don't know what to Google, and in turn we don't get exposed to the crucial things we need to know!

Here's my attempt to explain how does the Internet work, from a web development point of view.
Let's get started.

Everything on the internet is either a Client or a Server. The Client requests and the Server responds. Simply put, your machine, uses your Browser to request some resources from a server, and the server responds. And the server is another machine connected to the internet. That's what is happening overall.

Client Server

So here, the Client can be anything - your mobile phone or laptop, using any browser, like Chrome, Firefox, Edge.
And, the server would be the websites, web services or apps you are trying to access.

Let's go into a little depth.

Every machine on the internet has an IP address. An IP address, which can be used to access anything that is connected to the internet. In fact, your laptop has an IP address too. But the servers are special kind of machine that have some resources to offer. So whenever you, as a client, type in any website in the browser, say www.google.com, you are directed to a Domain Name Server (DNS) Lookup. A DNS is like a table that maps domain names (like google.com) to it's IP Address.
When you visit www.google.com, you are sending a request to Google's Servers.
In return, Google's server will give you a response. The response typically consists of Content-Type. This property helps the browser evaluate what type of content has the server responded with. Now, visiting google.com might respond with an HTML webpage, that the browser will recognize by its content-type: text/html, it will now what to do with it. It will parse the response as HTML file.

Suppose we got the following HTML as response:

<html>
   <head>
      <link href="/styles/main.css" />
   </head>
   <body>
     :
     :
     <script src="/javascript/app.js" />
   </body>
</html>

Here, when the browser comes across the <link> tag, it would say, 'ah, I need this asset for this webpage. Let's request this from the server.' That's when the browser would request the main.css file, and the server will send over the file, with the Content-Type as text/css. Same goes for the <script> tag.

Let's see an example:
Content-Type

This says, content-type : image/gif. So the browser knows that this particular asset is an image and it displays on the webpage accordingly.

You could just Inspect Element on any webpage, and go to the Network Tab, click on any asset that is returned. It will show you the corresponding request and response!

Some other requests and responses you could look out for:

  • method: The HTTP Methods enable the client to specify the action to be performed with assets or resources.
  • cookies: Cookies are small pieces of data that are stored in your local machine to remember useful information, or record your browsing activity.
  • status code: These are the codes issued by the server in response to the client's request.

There you go! Now, you know what you don't know. In the end, I would like to say that knowing how the web works wouldn't contribute to writing building websites in the short run but will yield long term benefits because you know what is happening behind the scenes.

Did I miss something? I would love feedback.
Signing off!

Discussion

pic
Editor guide
Collapse
prateek_aher profile image
Prateek Aher

@anonyda When you said we don't know what exactly to google when we are starting out, at such moment, pre-written roadmaps come in handy. Kamran Ahmed made some good ones that I've been following.
See this one for Frontend devs roadmap.sh/frontend

Collapse
anonyda profile image
Nida Shaikh Author

This is an awesome resource, thanks for sharing Prateek!

Collapse
mdhesari profile image
Mohammad Fazel

It could contain more detailed content what so ever thanks for your efforts and looking for more these contents

Collapse
anonyda profile image
Nida Shaikh Author

Thank you for your encouragement! I would create a detailed article from now.

Collapse
prkkhan786 profile image
prkkhan786

Sweet and simple explanation πŸ‘Œ

Collapse
anonyda profile image
Collapse
sabarishcodes profile image
Sabarish Rajamohan

This was such a great way to explain how the web works! Thanks Nida.

Collapse
anonyda profile image
Nida Shaikh Author

Thank you, Sabarish. It means a lot!

Collapse
fabianaasara profile image
Fabiana Asara

As a junior developer I struggle with asking questions most of the times as I don’t know what I don’t know πŸ€”
Really nice article and simply put!!
Thank you 😊

Collapse
anonyda profile image
Nida Shaikh Author

Thank you for your appreciation, Fabriana πŸ’—

Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’»

Great explanation, Nida. πŸŒŸπŸ™ŒπŸ½

Collapse
anonyda profile image
Nida Shaikh Author

Thank you! πŸ–€

Collapse
deveshlashkari profile image
Devesh Lashkari

Very simple explanation. Thanks Nida :)

Collapse
anonyda profile image
Nida Shaikh Author

It's my pleasure!

Collapse
acyein profile image
Yein

Awesome! Explained in simple terms that are easy to digest for a beginner like myself.

Collapse
anonyda profile image
Nida Shaikh Author

That was my aim. Glad that you found it useful!

Collapse
shubhamporiya profile image
Shubham Poriya

Great content for a beginner like me. Looking forward to more conceptual posts on web devleopment basics. Great Work !

Collapse
anonyda profile image
Nida Shaikh Author

Thank you so much Shubham!