DEV Community

Cover image for How the Internet Works — A Complete Guide for Beginner Web Developers
Abdul Fadiga
Abdul Fadiga

Posted on

How the Internet Works — A Complete Guide for Beginner Web Developers

#beginners #webdev #html #javascript

You are learning web development. You can write HTML. You are starting CSS. But do you actually know what happens when someone types your website address into a browser?

Most beginners skip this part. Do not be one of them. Understanding how the internet works is what separates a developer who uses tools from one who understands them.

This guide covers everything — from physical cables under the ocean to the moment a page appears on your screen.

The Internet vs The Web

First, let us clear up a common confusion.

The internet and the World Wide Web are not the same thing.

Term What It Is
The Internet The physical global network of connected computers
The Web A service that runs on top of the internet
Email Another service running on the internet
Video calls Another service running on the internet

The internet is the road network. The web is the cars driving on it. Email is a delivery truck. They all use the same roads.

The internet is not a cloud. It is real, physical infrastructure — fibre optic cables running under the ocean, cell towers, and millions of servers in massive buildings called data centres.

How Data Travels — Packets and Routers

When you load a website or send a message, your data does not travel as one big block. It gets broken into small pieces called packets.

What Is a Packet?

Every packet contains:

  • A chunk of the actual data
  • The sender's IP address
  • The receiver's IP address
  • A sequence number so packets can be reassembled in order

Think of it like tearing a 10-page letter into separate pages and mailing each one through a different post office. When all pages arrive, the receiver staples them back in order. That is exactly how packets work.

What Is a Router?

A router reads the address on each packet and decides the best path to forward it. There are millions of routers forming a global relay system.

Your Computer
     |
  Home Router
     |
  ISP Router
     |
  Backbone Router (undersea cables, cross-country links)
     |
  Destination Server
Enter fullscreen mode Exit fullscreen mode

Why Packets?

  • If one packet fails, only that piece is resent — not the whole file
  • Different packets can take different routes simultaneously
  • Many users share the same network without blocking each other

IP Addresses

Every device connected to the internet has a unique IP address — its identifier on the network.

IPv4 example:

192.168.1.1
Enter fullscreen mode Exit fullscreen mode

IPv6 example:

2001:0db8:85a3:0000:0000:8a2e:0370:7334
Enter fullscreen mode Exit fullscreen mode
IPv4 IPv6
Format 4 dot-separated numbers 8 groups of hexadecimal
Total addresses ~4.3 billion 340 undecillion
Status Running out Designed to replace IPv4

Public vs Private IP

  • Public IP — the address your ISP gives your network (visible on the internet)
  • Private IP — the address assigned to each device inside your network

Try it: Open your terminal and run curl ifconfig.me to see your public IP address.

DNS — The Internet's Phonebook

Humans remember names like google.com. Computers use IP addresses like 142.250.200.46. DNS (Domain Name System) translates between the two.

How DNS Works Step by Step

When you type www.google.com:

1. Browser Cache Check
   Has the browser visited this site recently?
   If yes → skip to step 5.

2. OS Cache Check
   Does the operating system have it stored?
   If yes → skip to step 5.

3. Recursive Resolver
   Your ISP's DNS resolver handles the lookup.

4. Root & TLD Name Servers
   Resolver → Root Server → .com Server → Google's Name Server → IP Address

5. IP Returned
   Browser now has: 142.250.200.46

6. Browser connects to that IP and loads the page.
Enter fullscreen mode Exit fullscreen mode

Anatomy of a Domain Name 

https://www.google.com
        |   |      |
        |   |      └── TLD: .com / .org / .net
        |   └───────── Second-level domain: google
        └───────────── Subdomain: www
Enter fullscreen mode Exit fullscreen mode

Try it: Run nslookup google.com in your terminal and watch DNS return the real IP.

Clients and Servers

The internet runs on one simple model: clients ask, servers answer.

Client

Any device or software that makes a request:

  • Web browser (Chrome, Firefox)
  • Mobile app
  • Desktop application

Server

A powerful computer that stores files and responds to requests:

  • Runs 24/7
  • Handles thousands of requests simultaneously
  • Hosted in data centres

The Request-Response Cycle 

Client                          Server
  |                               |
  |------- HTTP Request --------> |
  |        "Give me this page"    |
  |                               |
  |<------ HTTP Response -------- |
  |        HTML + CSS + JS files  |
  |                               |
Browser renders the page
Enter fullscreen mode Exit fullscreen mode

You (client) walk into a restaurant and order food. The kitchen (server) prepares it and sends it out. The waiter is the network.

HTTP and HTTPS

HTTP (HyperText Transfer Protocol) is the agreed language for communication between clients and servers.

HTTP Request 

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Chrome)
Accept: text/html
Enter fullscreen mode Exit fullscreen mode

HTTP Response 

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

<!DOCTYPE html>
<html>
  <head>...</head>
  <body>Hello World</body>
</html>
Enter fullscreen mode Exit fullscreen mode

HTTP Methods

Method Purpose Example
GET Retrieve data Load a page
POST Send data Submit a form
PUT Update data Edit a profile
DELETE Remove data Delete a post

HTTP Status Codes

Code Meaning
200 OK — success
201 Created
301 Redirect
400 Bad Request
401 Unauthorized
403 Forbidden
404 Not Found
500 Server Error

Quick rule: 2xx = success. 3xx = redirect. 4xx = your fault. 5xx = their fault.

HTTP vs HTTPS

The S in HTTPS stands for Secure. It uses TLS (Transport Layer Security) to encrypt all data in transit.

HTTP HTTPS
Plain text — anyone can read it Encrypted — only sender and receiver can read
No padlock in browser Padlock icon visible
Unsafe for passwords Safe for sensitive data

Rule: Never enter a password or payment info on an HTTP site.

How a Browser Renders a Page

Once the browser receives HTML, CSS, and JS from the server, it renders the page:

1. Parse HTML → Build DOM (Document Object Model)
2. Parse CSS  → Build CSSOM (CSS Object Model)
3. Combine    → Create the Render Tree
4. Layout     → Calculate position and size of every element
5. Paint      → Fill in pixels (colors, borders, text, images)
6. JavaScript → Runs and can update the DOM dynamically
Enter fullscreen mode Exit fullscreen mode

What Is the DOM?

The DOM is the browser's in-memory representation of your HTML as a tree:

<!-- HTML -->
<html>
  <body>
    <h1>Hello</h1>
    <p>World</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
DOM Tree:
html
 └── body
      ├── h1 → "Hello"
      └── p  → "World"
Enter fullscreen mode Exit fullscreen mode

JavaScript can read and modify this tree — which is how pages update without a full reload.

The Full Journey — Everything Together

Here is the complete sequence from typing a URL to seeing a web page:

You type: https://www.google.com

Step 1 — DNS Lookup
  Browser → DNS resolver → IP: 142.250.200.46

Step 2 — TCP Connection
  Browser establishes a connection to the server

Step 3 — TLS Handshake (HTTPS)
  Browser and server exchange encryption keys

Step 4 — HTTP Request
  GET / HTTP/1.1 Host: www.google.com

Step 5 — Server Response
  200 OK + HTML file

Step 6 — Additional Requests
  Browser fetches linked CSS, JS, images

Step 7 — Rendering
  DOM built → CSSOM built → JS runs → Page displayed

Total time: Under 1 second
Enter fullscreen mode Exit fullscreen mode

Hands-On Exercise

Open any website in Chrome or Firefox and do this:

  1. Press F12 to open DevTools
  2. Click the Network tab
  3. Reload the page (Ctrl + R)
  4. Look at the requests list

Find and note down:

  • 3 different file types loaded (HTML, CSS, JS, image...)
  • The HTTP method for each
  • The status code returned
  • How long each request took (milliseconds)

Bonus: Find a request that returned something other than 200 and explain what it means.

Summary

Concept What It Does
Packets Break data into small chunks for efficient travel
IP Address Unique identifier for every device on the internet
DNS Translates domain names to IP addresses
Client Makes requests (browser, app)
Server Responds to requests with files or data
HTTP The protocol for web communication
HTTPS Encrypted HTTP — always use it
DOM Browser's tree representation of HTML

If this was helpful, follow for more beginner-friendly web dev content. Every article in this series builds on the last — next up: HTML Structure Deep Dive.

Written by Abdul — Fadidev Studio
Front-End Web Development Training

Top comments (0)