How the Internet Works

Real-world analogy

What is it?

The internet is a global network of connected computers that communicate using rules called protocols. When you visit a website, your browser (client) sends an HTTP request to a server, which processes it and sends back a response (usually HTML, CSS, JS, or JSON data). APIs let programs exchange data, and DNS translates domain names to IP addresses.

Real-world relevance

Every app on your phone uses these concepts. When you scroll Instagram, your phone (client) sends HTTP GET requests to Instagram's servers, which respond with JSON data (posts, likes, comments). Your phone then displays that data as the feed you see. Understanding this flow is fundamental to building any web application.

Key points

• What is a Server? — A server is just a computer that's always on, always connected to the internet, and always ready to respond to requests. When you visit google.com, your request goes to one of Google's servers — a powerful computer sitting in a data center. It 'serves' you the web page you asked for.
• What is a Client? — The client is YOU — or more precisely, the app you use to browse the web (Chrome, Firefox, Safari). The client sends requests to servers and displays the responses. Your browser is the most common client, but mobile apps and even other servers can be clients too.
• HTTP — The Language of the Web — HTTP (HyperText Transfer Protocol) is the set of rules for how clients and servers talk. There are different types of requests: GET (give me data), POST (take this new data), PUT (update this data), DELETE (remove this data). Every time you visit a website, your browser sends a GET request.
• URLs and Domains — A URL (Uniform Resource Locator) is the address of something on the internet. Like a home address: https://www.example.com/about — 'https' is the protocol, 'www.example.com' is the domain name, and '/about' is the path (which page). Every page on the internet has a unique URL.
• DNS — The Internet's Phone Book — When you type 'google.com', your computer doesn't know where that is. DNS (Domain Name System) translates human-friendly names like 'google.com' into computer-friendly IP addresses like '142.250.80.46'. It's like looking up a contact name in your phone to find their number.
• What is an API? — An API (Application Programming Interface) is a way for programs to talk to each other. When a weather app shows today's forecast, it's calling a weather API to get the data. APIs are like waiters — you don't go into the kitchen (the database); you ask the waiter (the API) and they bring you what you need.
• JSON — The Data Format — JSON (JavaScript Object Notation) is the most common format for sending data between clients and servers. It looks like JavaScript objects: {"name": "Alex", "age": 25}. It's easy for both humans to read AND computers to parse. Almost every API on the internet uses JSON.

Code example

// How the internet works — step by step:

// 1. You type a URL in your browser
// URL: https://api.example.com/users/1

// 2. DNS translates the domain to an IP address
// "api.example.com" → "93.184.216.34"

// 3. Your browser sends an HTTP GET request
// GET /users/1 HTTP/1.1
// Host: api.example.com

// 4. The server processes the request and responds
// Status: 200 OK (meaning "success!")

// 5. The response comes back as JSON data:
const response = {
  "id": 1,
  "name": "Alex",
  "email": "alex@example.com",
  "role": "developer"
};

// HTTP Methods — the 4 main actions:
// GET    → Read data    (fetch a user profile)
// POST   → Create data  (sign up a new user)
// PUT    → Update data  (change your email)
// DELETE → Remove data  (delete your account)

// A real API response with multiple items:
const users = [
  { "id": 1, "name": "Alex", "role": "developer" },
  { "id": 2, "name": "Sam", "role": "designer" },
  { "id": 3, "name": "Jo", "role": "manager" }
];
console.log(users.length); // 3 users

Line-by-line walkthrough

1. 1. Comment: Walking through how the internet works
2. 2.
3. 3. Comment: Step 1 — the user action
4. 4. The URL you typed — this is the 'address' of the data you want
5. 5.
6. 6. Comment: Step 2 — DNS lookup
7. 7. DNS converts the human-readable domain into a numeric IP address
8. 8.
9. 9. Comment: Step 3 — the browser sends a request
10. 10. This is the actual HTTP request format — GET means 'give me data'
11. 11. The Host header tells the server which website you want
12. 12.
13. 13. Comment: Step 4 — the server responds
14. 14. 200 OK is the status code meaning everything worked
15. 15.
16. 16. Comment: Step 5 — the response body
17. 17. This is the JSON data the server sent back
18. 18. Opening the response object with curly braces
19. 19. The user's unique ID
20. 20. The user's name
21. 21. The user's email
22. 22. The user's role
23. 23. Closing the object
24. 24.
25. 25. Comment: The four main HTTP methods
26. 26. GET reads data — like viewing a profile
27. 27. POST creates new data — like signing up
28. 28. PUT updates existing data — like editing your bio
29. 29. DELETE removes data — like deleting a post
30. 30.
31. 31. Comment: A JSON array with multiple objects
32. 32. Opening the array with a square bracket
33. 33. First user object — Alex is a developer
34. 34. Second user object — Sam is a designer
35. 35. Third user object — Jo is a manager
36. 36. Closing the array
37. 37. Accessing the length property — arrays know how many items they hold

Spot the bug

// Trying to fetch data from an API
GET https://api.example.com/users

// Expected response:
{
  name: Alex,
  age: 25
}

Explain like I'm 5

Fun fact

Hands-on challenge

More resources

• How the Internet Works in 5 Minutes (Aaron)
• MDN: How the Web Works (MDN Web Docs)
• HTTP Status Codes (MDN Web Docs)