The bad news is that even for a seemingly simple and innocent operation - like a browser requesting a single web page from a server - there are so many moving parts involved that you could fill multiple books explaining them all. The good news, however, is that in order to become a productive web developer, we do not need to know all the atomic details.

We do not need to know how a CPU works on the transistor level and we do not need to chase every zero and every one that travels through a network cable in order to build a fast, reliable and useful web application.

It is useful to know and understand - at least conceptually - the most important parts and the mechanisms which make them work together.

To achieve this, we will build a mental model of how the world wide web works over the course of this chapter. As we will see, there is no magic involved, and while it’s a complex ecosystem which is put into motion each time you click on a link in a web browser, it’s not complicated to grasp what happens conceptually.

Let’s start by clarifying the scope we are talking about. When you use your browser, you are surfing “the web”. More precisely, you are interacting with a system of different components which together form the World Wide Web.

A> This name is the reason why the domain names of most websites begin with the prefix (or rather subdomain, which is A> the correct technical term) www, like www.google.com. It’s just a matter of habit to use this prefix - technically, A> it doesn’t matter at all, so feel free to set up a web site at qqq.yournamehere.com.

The World Wide Web is not one single piece of technology. Instead, it’s a collection of open standards which define how certain pieces of technology can work together; plus, it builds on top of other standards and technologies which are much older and allow the World Wide Web to work without reinventing all the wheels.

Thus, from a bird’s eye view, the World Wide Web landscape looks a bit like this:

The World Wide Web building set...
┌───────────────────────────────────────┐
│                                       │
│    HTML, CSS, JavaScript              │
│                                       │
│    HTTP                               │
│                                       │
│    Browser                            │
│                                       │
│    Web server                         │
│                                       │
└───────────────────────────────────────┘
...builds on the Internet building set...
┌───────────────────────────────────────┐
│                                       │
│  BGP, DNS, TCP, IP, MIME, URI...      │
│                                       │
└───────────────────────────────────────┘
...which builds on different network building sets.
┌───────────────────────────────────────┐
│                                       │
│ Ethernet, ATM, IEEE 802.11...         │
│                                       │
└───────────────────────────────────────┘

Which is another way to say that you browser uses Internet technology like IP and TCP, which allows it to send and receive data over network technology like Ethernet or ATM, to talk to a web server using the HTTP protocol, enabling the browser to request and download the collection of HTML, CSS and JavaScript that make up the web page which appears in your browser window.

Ok, but how does that look in practice?

The first thing to understand is that the web browser and the web server are two computer programs, running on different computer systems, which need to find each other, establish a network connection, and exchange data over this connection in a meaningful way.

Let’s tackle this process step by step.