Web Development is a significant subset of software engineering. Due to how integrated the internet is into our lives, much of the software that’s available is web-related. Before you start learning to build for the web, it's very important to understand how the web works. Ideally, everyone who has or those aspiring to have a career in web development (frontend or backend) must possess this knowledge. Unfortunately, this is mostly not the case as a number of courses and articles about learning to code jump straight into basic languages such as HTML and CSS.

In this article, we’re going to use a real-life example to learn how the web works, as well as the essential jargon that every web developer must be familiar with.

Essential Jargon

Let's first understand these terminologies to make it easier to proceed. They’re also important because they’re used every day in the world of web development.

Let's begin by typing www.codehemaa.com/projects into a browser:

1. URL: The https://codehemaa.com/projects that you typed in your browser is what we call a Uniform Resource Locator or URL for short. It consists of the HTTP protocol, domain name and resource. As the name suggests, specifying the exact location of a file or resource on the web.
2. Domain Name: The https://codehemaa.com in the URL above is the domain name. It usually forms part of a URL. It is the address for identifying and leading to a webpage. It is also a user-friendly form of IP address.
3. Client:The device or application that translates user interactions into web requests to a server and receives web responses from the same server. Our MacBook and browser, Google Chrome, that is being used become our client.
4. Server: A computer or group of computers that specialize in storing, processing and delivering web pages to clients upon request. Web servers, file servers and database servers are some of the most popular types of servers. The computer, wherever it may be located, that has the data for codehemaa.com is our server.
5. IP address: Internet Protocol Address. A set of numbers that identifies devices such as computers, servers etc. It is also used by these devices to identify and communicate with other devices. Usually four sets of numbers are separated by decimal points (e.g. 244.155.65.2)
6. DNS: Domain Name System. A distributed database on the internet that keeps records of computer’s domain names and their corresponding IP addresses.
7. HTTP: Hypertext Transfer Protocol. The protocol that web browsers and web servers use to communicate with each other over the Internet.

Real Life Experiment

Let’s perform a simple experiment. First, open your browser’s developer tools (Network tab). Using the same URL from above: Type “codehemaa.com/projects” into your browser’s address bar and see the page load.

1- After typing https://codehemaa.com/projects

2- Your browser does a breakdown of the URL to understand what exactly is needed. It then does a DNS lookup for the IP address of the server that hosts the codehemaa website.

3- Once the IP address is obtained, your browser makes a connection with the web server.

4- After a successful connection, your browser then makes an HTTP request to the server for the particular page needed. In this case, the projects page of the codehemaa website.

5- If that page exists, the server responds to your browser with a code of 200 (which means the request was successful and has a response) and the content of the page. Otherwise, it will respond with an error code of 404 which means “Page Not Found”

6- The browser renders the response from the server in the form of a web page.

PS: After this, the connection between server and client will be closed. Till another request is made.

Conclusion

A lot of the issues that plague web developers today are a result of their misunder-standing of some of the concepts of programming, specifically how the web works. This is the very basic understanding of what goes on from typing a URL into your browser till you see the content on the page. Browsers are advanced applications that are able to carry out these complex activities within seconds. If you always want to be reminded even a little of this magic, do this. After typing a URL, open your browser’s developer tools specifically the Network tab before you hit enter.

Thanks for reading 👋🏾. I hope you found this helpful.

Let’s connect on Twitter or Linkedin