Booklet

author

Fullstack HQ

Development

How the Web Works in 5 Simple Step

How the Web Works a Simple Explanation

FIRST
Let's start by opening a browser and enter a url like fullstackhq.com. The browser will perform a request to get the website files/codes stored on the server.

SECOND
Each server is assigned an IP address like your home street and house number. The browser will then contact a Domain Name System (DNS) which translate fullstackhq.com into an IP address: 134.209.106.40. An IP address is quite difficult to remember. That's why domain names like fullstackhq.com were invented to solve this problem. You dont need to enter a long string of numbers.

THIRD
The browser goes ahead and makes a request to the server with that IP address: 134.209.106.40 The data is sent via the HyperText Transfer Protocol (HTTP), a protocol used to transfer data over the web. Theres also HTTPS where the data is e

FOURTH
The server returns the code to display fullstackhq.com website. Some servers are programmed to generate websites dynamically based on the request (e.g. your facebook profile that contains your personal details) This is where the backend language (server-side) comes in. The backend is that part of the code that runs on the server only.

FIFTH
The browser receives the response sent by the server. Browser goes through the data returned by the server and builds fullstackhq.com website using HTML/CSS/JS front-end programming languages (executed on browser level only).

HTML only defines the structure of the site. It doesnt include any instructions regarding what the site should look like. You can use https://www.browseo.net to view any webpage on pure HTML without CSS styles, similar to what search engines see when they visit a page.

Cascading Style Sheets (CSS) is all about adding styling to the website.
JavaScript can be used to change the website content dynamically whilst the user is viewing it. It allows web developers to manipulate code that runs in the browser (not on the server). Examples: Tabs, Dialog box/popup, Accordion, etc.

  1. In this post, you should now have a good understanding of how the web works. YouVe also leamed the difference between server-side and client-side programming languages. If you're interested in becoming a web developer, it's important to know these stuff.

More booklets by Fullstack HQ

More Development booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets