How Websites Work
How the web actually works — browsers, servers, HTTP, URLs, and the request-response cycle. The foundation you need before writing a single line of code.
A physicist wanted to share his research papers
In 1989, Tim Berners-Lee was a software engineer at CERN, the European physics lab. He had a problem: thousands of scientists were producing research, but nobody could find anyone else's work. Documents were scattered across incompatible computers with no way to link them together.
So he wrote a proposal. His boss scribbled "Vague but exciting" on the cover page and let him run with it. Within two years, Berners-Lee had invented three things: HTML (a way to write documents), URLs (a way to address them), and HTTP (a way to transfer them). He called the system the World Wide Web.
That "vague but exciting" memo became the foundation of a system that now serves over 1.1 billion websites.
The internet vs. the web — they're not the same thing
Most people use "internet" and "web" interchangeably. They're actually different layers.
The internet is the physical infrastructure — cables, routers, satellites, and protocols that let computers talk to each other. It existed since the 1960s (as ARPANET).
The web is a service that runs on top of the internet, using HTTP to deliver pages you view in a browser. Email, streaming video, and online gaming also run on the internet — but they're not the web.
There Are No Dumb Questions
If the web runs on the internet, could the internet exist without the web?
Absolutely. The internet existed for 20 years before the web was invented. The internet is the road system; the web is one type of vehicle driving on it.
What about apps on my phone — are those the web?
Some are, some aren't. A website opened in Safari is the web. A native app like WhatsApp uses the internet but speaks its own protocols. Many apps are hybrids — they look native but load web content behind the scenes.
What happens when you type a URL and press Enter
Every time you visit a website, an invisible conversation happens between your browser and a server somewhere in the world. The whole thing takes milliseconds, but there are several steps.
Step 1: You type a URL. Something like https://www.example.com/about. This URL has parts: the protocol (https), the domain (www.example.com), and the path (/about).
Step 2: DNS lookup. Your browser doesn't know where example.com lives. It asks a DNS (Domain Name System) server to translate the domain name into an IP address — like 93.184.216.34. DNS is the phone book of the internet.
Step 3: Your browser connects to the server. Using the IP address, your browser opens a connection to the web server. If the URL starts with https, they first do a security handshake (TLS) to encrypt the connection.
Step 4: HTTP request. Your browser sends an HTTP request: "GET me the page at /about." This request includes headers — metadata about your browser, language preferences, and cookies.
Step 5: The server responds. The server processes the request and sends back an HTTP response: a status code (200 means success), headers, and the HTML content of the page.
Step 6: The browser renders the page. Your browser reads the HTML, fetches any linked CSS and JavaScript files, downloads images, and paints the final page on your screen.
This is the request-response cycle — the fundamental pattern of the entire web.
Trace the journey
25 XPURLs: the address system of the web
Every page on the web has a unique address — its URL (Uniform Resource Locator). Understanding URL structure is foundational.
https://www.shop.example.com:443/products/shoes?color=red&size=10#reviews
| Part | Example | Purpose |
|---|---|---|
| Protocol | https:// | How to communicate (secure HTTP) |
| Subdomain | www.shop | A section of the domain |
| Domain | example.com | The website's name |
| Port | :443 | Which "door" on the server (443 is default for HTTPS) |
| Path | /products/shoes | Which page or resource |
| Query string | ?color=red&size=10 | Parameters passed to the server |
| Fragment | #reviews | A section on the page (browser-only, not sent to server) |
There Are No Dumb Questions
What's the difference between HTTP and HTTPS?
The "S" stands for Secure. HTTPS encrypts all data between your browser and the server so nobody in between can read it. In 2026, virtually all legitimate websites use HTTPS. Browsers now warn you if a site uses plain HTTP.
Do I need to type
https://wwwevery time?No. Browsers are smart enough to add these for you. But understanding the full structure helps when you're building websites and debugging issues.
The three languages of every webpage
Every webpage you've ever seen is built with three technologies working together:
✗ Without AI
- ✗HTML — Structure and content
- ✗CSS — Visual styling and layout
- ✗JavaScript — Behavior and interactivity
✓ With AI
- ✓The skeleton and organs of a body
- ✓The skin, clothes, and appearance
- ✓The muscles and nervous system
Here's how they work together on a simple button:
<!-- HTML: defines that a button exists -->
<button class="buy-btn">Add to Cart</button>
/* CSS: makes the button look good */
.buy-btn {
background-color: #4CAF50;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
}
// JavaScript: makes the button do something
document.querySelector('.buy-btn').addEventListener('click', function() {
alert('Item added to your cart!');
});
HTTP status codes: the server talks back
When your browser makes a request, the server always responds with a status code — a three-digit number that tells you what happened.
| Code | Meaning | When you'll see it |
|---|---|---|
200 | OK — here's the page | Every successful page load |
301 | Moved permanently — go to this new URL instead | When a page's address changed |
404 | Not found — this page doesn't exist | Broken links, typos in URLs |
403 | Forbidden — you don't have permission | Accessing restricted content |
500 | Internal server error — something broke on the server | Server-side bugs |
You've definitely seen a 404 page before. Now you know exactly what it means: your browser asked for something, and the server said "I don't have that."
Hunt for status codes
25 XPClient vs. server: who does the work?
In web development, you'll constantly hear "client-side" and "server-side." This is simply about where the code runs.
✗ Without AI
- ✗HTML rendering
- ✗CSS styling
- ✗JavaScript interactivity
- ✗Form validation (instant feedback)
- ✗Animations and transitions
✓ With AI
- ✓Database queries
- ✓User authentication
- ✓Payment processing
- ✓Sending emails
- ✓Generating dynamic HTML
Front-end development = building the client side (HTML, CSS, JavaScript). Back-end development = building the server side (databases, APIs, logic). Full-stack development = doing both.
How a modern webpage actually loads
When your browser receives the HTML response, it doesn't just display it. It goes through a precise rendering process:
Parse HTML — The browser reads the HTML top to bottom, building a tree structure called the DOM (Document Object Model)
Fetch CSS — When it encounters a <link> to a CSS file, it downloads and parses the styles
Build the render tree — The browser combines the DOM with the CSS to figure out what goes where and how it looks
Layout — The browser calculates the exact position and size of every element on the page
Paint — Pixels are drawn to the screen. You see the page.
Execute JavaScript — JS files run, potentially modifying the DOM and triggering re-renders
There Are No Dumb Questions
Why does JavaScript run last?
Because JavaScript can change anything on the page. The browser wants a stable foundation (HTML parsed, CSS applied) before JavaScript starts manipulating things. That's why you'll often see
<script>tags at the bottom of HTML files.
Draw the request-response cycle
50 XPFrom Tim's memo to your career
Tim Berners-Lee could have patented the web. He didn't. He gave it away for free, insisting it should remain open and accessible to everyone. That decision is the reason you can learn to build websites without paying anyone for the right to publish on the internet. The technologies he created in 1991 — HTML, URLs, HTTP — are still the foundation of every single website, including the one you're reading right now. In the next module, you'll write your first HTML and see a page appear in your browser. The same magic, 35 years later.
Key takeaways
- The internet is the infrastructure; the web is a service running on top of it using HTTP
- Every webpage involves a request-response cycle: browser asks, server answers
- URLs are structured addresses with protocol, domain, path, and query parameters
- HTML provides structure, CSS provides style, JavaScript provides interactivity
- HTTP status codes (200, 301, 404, 500) tell you what happened with your request
- DNS translates human-readable domain names into IP addresses
- Front-end = browser side, back-end = server side, full-stack = both
Knowledge Check
1.What is the correct order of the request-response cycle when you visit a website?
2.What does DNS do?
3.What HTTP status code means 'the page was not found'?
4.Which technology provides the structure and content of a webpage?