How the Web Works

After this lesson, you will be able to: Explain how a web request travels from your browser to a server and back, and inspect that traffic with browser DevTools.

Before you build websites, it helps to understand how the web actually works. This lesson covers the client/server model, what HTTP requests and responses look like, the role of DNS, and how to peek under the hood with DevTools.

Prerequisites:Introduction to the Terminal and Linux

The client/server model, in plain English

Every website is two computers talking. The client (your browser) asks for something. The server (a remote computer somewhere) replies with the answer. When you type bitree.dev into your browser, your computer sends a request across the internet. The server at the other end sends back HTML, CSS, JavaScript, and images. Your browser assembles them into the page you see.

Diagram coming soon!

Two boxes, "Client (your browser)" and "Server (somewhere on the internet)", connected by two arrows: a Request arrow going right (GET /) and a Response arrow coming back (200 OK + HTML)

DNS, the internet's phonebook

Computers don't actually use names like bitree.dev, they use IP addresses (like 76.76.21.21). DNS (Domain Name System) is the system that translates names into IP addresses. When you type a URL, your computer first asks a DNS server "what's the IP for this name?" before making any request.

What an HTTP request looks like

This is the actual text your browser sends. Most of it you never see, but DevTools will show it.

tsx

GET /lessons HTTP/1.1
Host: bitree.dev
User-Agent: Mozilla/5.0
Accept: text/html

# (no body for a GET request)

And what the response looks like

Status code on the first line, then headers, then the actual content.

html

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 4521

<!DOCTYPE html>
<html>
  <head><title>Lessons</title></head>
  <body>...</body>
</html>

Try it: inspect a real request in DevTools

Use Chrome or Firefox to watch a real request happen.

1
Open any website (try bitree.dev or wikipedia.org)
2
Right-click anywhere and choose "Inspect". DevTools opens
3
Click the "Network" tab
4
Reload the page (Cmd/Ctrl + R)
5
Click on the very first request in the list, look at Headers and Response
6
Find the status code (top of right panel)

Quick Check

You see a 404 in the Network tab. What does it mean?

Hint: think about which side of the conversation the problem is on.

←Introduction to the Terminal and Linux

Back to Web Development

Network Fundamentals for Developers→