Web Development Explained: How the Web Works

It is important to understand how the internet works under the hood to improve your web development practices and clear up confusion. This article is not a complete guide or an explanation of how the web works but rather a general picture of the web ecosystem.

Introduction to the Internet

In a nutshell, the internet is a global network of computers communicating with each other. It was first invented in 1969 but it wasn't until the 1990's and 2000s that it was widely used commercially.

The internet is decentralized, which makes it impossible to ever completely take down, but that also comes with some downsides.

Read more: History of the Internet

Computers' Connection and Communication

Computers identify and connect using Internet Protocol (IP) address, think of a computer as a house and an IP address is the address for this house. Internet Protocols are agreed upon standards for communication between computers. HTTP is an internet protocol for example, but there's others such as WebSockets and RPC and gRPC.

IP addresses are, at their core, just numbers and letters. An example IPv4 IP address is 23.141.221.14 and an example IPv6 IP address is 2001:0db8:85a3:0000:0000:8a2e:0370:7334.

If you're wondering what the difference is, IPv4 doesn't have enough possible numbers to uniquely identify every internet connected device on the planet, so IPv6 was created to fix that problem, which is why it is longer and includes alphabetical characters.

Read more: IPv4 s IPv6?

Okay, so how do they "talk" to each other?

Computers "talk" to each other by sending data in manageable chunks, called packets. When computers talk to each other, sometimes the message they send is really large (for example, a video). In those cases, all the data that makes up the video cannot physically be transferred all at once over a wire. Therefore, very smart people came up with the idea of splitting data into an atomic unit called a packet. A lot of work has gone into optimizing how big a single packet can be. Years ago, when internet speeds were much slower, packets were relatively small. However optimizations were discovered that allowed packets to contain more information.

A packet consists of two parts: the header with information about the packet's destination, contents, origin,.. and the actual data (known as the payload).

Read more: What is Packet in Networking?

The World Wide Web

The invention of the World Wide Web is most often credited to Tim Berners-Lee in 1990 who created the foundation for inter-computer communication: the HTTP protocol, HTML, and the concepts of a browser and a server. He also created the World Wide Web Consortium (W3C) in 1994 and it's officially the international web's official standards organization. You can check out the W3C's website here.

Domain Name System in A Nutshell

Domain Name System (DNS) is a way to translate human-friendly names for websites, like, www.alissanguyen.dev to a format that computers understand such as an IPv4 or IPv6 IP address. When a website name is converted to an IP address, that's called a DNS lookup. You can read more about DNS and how it works here.

The Web Browser and How It Works

A web browser is a piece of software that allows a user to download and view websites' content such as text, images, videos, etc. The Web Browser handles all the complexity of the internet for you. It handles DNS lookups, sending HTTP requests and handling HTTP responses, processing packets, converting raw HTML into a document, and downloading images, scripts, and stylesheets to make the experience dynamic and visually interesting. Chronologically, the first popular browser was Netscape, then Internet Explorer, Firefox, Safari, and Chrome.

Read more: What is a web browser?

How do Web Browsers Work?

Web browsers are arguably the most complicated pieces of software that exist because of all the complexity they handle. Google Chrome's is made up of at least 25 million lines of code. But broadly speaking, when you go to an address on your browser, the browser will do the following:

1. A DNS Lookup to convert the URL you typed in into the IP address of the server that the website lives at.

2. The browser then sends an HTTP request to the website's server, asking the server for a copy of the website that the browser can send to the client (you). 

3. The server processes the request from the browser and sends back the data files in chunks (packets as defined earlier).

4. The browser receives these chunks and begins building the web page that will be displayed to you when finished.

Read more: How browsers work

What are HTTP Requests?

Hypertext Transfer Protocol (HTTP) is an application layer communication protocol that is used to load web pages using hypertext links. Typically, an HTTP request contains: the HTTP version type, the URL of the webpages, the HTTP method, HTTP request headers, and HTTP body (optional).

Read more: An Overview of HTTP

How does the browser turn HTML into something you can see?

The browser will read through the HTML it receives and, through a series of rules, will convert it into images, text, and dynamic scripts. The browser can also read another language called Cascading Style Sheets (CSS) which can manipulate how certain parts of the document are rendered visually.

You can read more about how the browser renders web pages with rendering engines here.

Web Hosting and Deployment

Web domains or domain names are fundamentally just strings that map to IP addresses and are used to access websites from client applications. But not anyone can just put up a website called, for example "google.com" and have it point to their personal website. There's a lot of complexity behind preventing that but generally speaking it's because you have no way of convincing a DNS server that "google.com" should be translated to the IP address of your personal website. DNS servers trust ICANN, who manage the distribution of domain names, so to make a website with a custom domain name, you'll have to register it with them through domain registrats like Namecheap or Google Domains.

A Beginner's Introduction to Domain Names

What are domain names, are they the same as URLs? Why are domain names important?

#hosting

Web hosting is a service provided to you to give you the ability to post a website or a web application on the internet.

Introduction to Web Hosting

A quick explanation about web hosting and different types of web hosting you need to know.

#hosting

Conclusion

Obviously, the internet is complicated and if you want to learn Web development you can fall into the trap of getting stuck learning about any of the topics mentioned here. But you don't need to know everything. A web developer should ideally know a lot about HTML, CSS, and JavaScript but it's always helpful to have at least a general understanding of all the technology involved in making the internet work.