How does a website works

Nowadays, the website is an essential part of our daily life. We search on google daily or watch videos on youtube so the website is a necessity for all people today. We’ve come to a point where we can’t live without websites, but have you ever wondered how all those websites work? If you want to learn web development first you must know how these websites work, Only then you can easily build the website. So, This article is about how does a website works.

What is a browser?

A browser is software for displaying websites. It will get the address of the website and display the resource of that website. We can access websites only through browsers. Users can access the internet through any device be it a laptop, mobile phone, tablet, or game console. To access the internet we need special software that is a “browser”. For example, if you go to the browser and search youtube, your browser displays the youtube page for just 100 or 200ms, in this article we will also see what happens in the backend.

What a browser needs to display websites

Browsers need HTML, CSS, and JAVASCRIPT to display any websites.

HTML

HTML is the content or structure of the website, i.e. where should be header, paragraphs, links, and images. Therefore, all the content on the website should be written using HTML (Hyperlink Text Markup Language). Only if HTML is present, a browser can understand and display the content of a website.

CSS

But if there is only content, we have to use cascading style sheet called CSS for where and in which style each content should be displayed. For example, what size the title should be, what shape the image should be, etc. can be written using CSS.

JavaScript

A proper website can be created using HTML and CSS, but without this, we need another thing called JavaScript. Nowadays all the websites use javascript language and this language is very useful. We need Javascript for the logic in the website, for example, JS is used to perform many functions like storing and displaying the value from the user, to open the menubar when the button hovers.

So, you can display the website properly, only if these three languages are available. No matter, which website you open, these three languages will definitely be there. For example, if you go to the browser and search for YouTube, all three languages of YouTube are stored somewhere on the server. It will display the stored resource with the Ipaddress of Youtube.

What is a server?

The server stores all the website’s HTML, CSS, and JS codes at each location. When the browser asks the server for the required HTML, CSS, and JS codes for the website, it serves the request, so that’s why it is called a server. Every website has a server and all the data of that website is stored on the server. If you go to the browser and search any website, then the browser will go to the server and get the data of the website you searched and display it to you.

How browsers find the right server

There are millions of servers on the internet and the browser goes to the server of the website we have searched by using the “IP address“. In the real world, like visiting a store with an address, all servers have a unique number called an IP address, so browsers go to the right server and make a request. We search websites by domain name because we cannot remember that IP address. A domain name is the name of the website for ex: youtube, google, Wikipedia, etc. A domain name and an IP address are linked in a DNS server, so if you search any domain name, the browser will find the IP address of the domain name and use that IP address to locate the server.

How the website is displayed

If you go to the browser and search for the name of a website. The browser will go directly to the DNS server (Domain Name Server) and find the IP address of the domain name.
After finding the IP address, it goes to the website’s server, gets the HTML, CSS, and JS, and displays it, to the user. So, websites that work like this are called static websites.

Static vs Dynamic website

Static website

It displays the same content to all users.
When a user makes a request to the server, it direct returns HTML, CSS, and JS to the browser.
All the data is stored on the server.
Static website example websites are resume websites, portfolio websites, blog websites, etc.
You don’t need to use frameworks to create static websites.
It returns the identical functionality from the server to all users.

Dynamic website

It displays different content for each user.
When a user makes a request to the server, it returns newly generated HTML, CSS, and JS to the browser.
It creates new data for each user and stores it on a server.
Dynamic website example websites are Instagram, Facebook, youtube, etc.
You need to use frameworks like Django, node.JS, laravel to create dynamic websites.
Each user’s data is stored in the database and the framework uses that data to create and return what the user needs.

Conclusion

Apart from this, all the websites are divided into two which are front-end and back-end development. Frontend refers to codes developed using HTML, CSS & JS and backend refers to codes developed using frameworks like Django, node.JS, laravel, etc. Everything that we can see on a website is called frontend and everything that works on the server that cannot be seen is called the backend. So, I hope that through this article you have learned how a website works on the front and backend.