From LAN to WAN: A Visual Guide to Computer Networking Fundamentals

As a web developer, you operate on the world’s largest computer network: the Internet. While you can write code without knowing the mechanics, understanding the underlying network infrastructure separates the novice from the expert. It empowers you to diagnose issues, optimize performance, and build more resilient applications.

This guide demystifies the essential networking concepts every developer should know, transforming abstract ideas into clear, visual diagrams.

What is a Network?

At its core, a network is simply two or more devices connected to share resources and data. To identify each device uniquely within this network, each one is assigned an IP (Internet Protocol) Address. Think of it as a mailing address for your computer.

[!NOTE] An IP address must be unique within its network. If two devices have the same IP, it creates a conflict, and communication fails because the network can’t distinguish between them.

The Three Scales of Networks

Networks aren’t one-size-fits-all. They are categorized by their geographical scope.

graph TD;
    subgraph LAN [Local Area Network];
        direction LR;
        A[<fa:fa-laptop> Laptop] --- B[<fa:fa-print> Printer];
        A --- C[<fa:fa-desktop> PC];
    end

    subgraph MAN [Metropolitan Area Network];
        direction TB;
        LAN1[<fa:fa-building> Building A LAN] --- LAN2[<fa:fa-building> Building B LAN];
    end

    subgraph WAN [Wide Area Network];
        direction TB;
        MAN1[<fa:fa-city> City 1 MAN] --- MAN2[<fa:fa-globe> City 2 MAN];
    end

    LAN --> MAN --> WAN;

1. LAN (Local Area Network): A small, private network, typically in a single location like your home or a small office. Devices on a LAN can easily share files or a printer.
2. MAN (Metropolitan Area Network): A larger network that spans a city or a large campus, connecting multiple LANs.
3. WAN (Wide Area Network): The largest type of network, connecting devices across countries and continents. The ultimate example of a WAN is the Internet.

The Hardware That Builds the Network

Several key pieces of hardware work together to connect devices and direct traffic.

• Cables: The physical medium. These range from the common Ethernet cables in your home to the massive undersea fiber optic cables that connect continents.
• Switch: A device that connects multiple devices on a LAN. It’s like a smart traffic cop for local data, ensuring packets from one computer reach the correct destination computer on the same network.
• Router: A more intelligent device. While it can do everything a switch does, its primary job is to connect different networks together. Your home router connects your private LAN to your Internet Service Provider’s (ISP) WAN, allowing you to access the internet. It acts as the Gateway—the exit door from your local network to the outside world.
• Access Point (AP): A device that extends wireless (Wi-Fi) coverage. It connects to a router via a cable and then broadcasts a Wi-Fi signal, allowing devices in a previously weak-signal area to connect to the internet.

graph TD
    subgraph "Internet (WAN)"
        ISP[<fa:fa-cloud> Internet Service Provider]
    end

    subgraph "Home (LAN)"
        Router[<fa:fa-server> Router (Gateway)]
        Switch[<fa:fa-exchange-alt> Switch]
        AP[<fa:fa-wifi> Access Point]

        Router -- Cable --> ISP
        Router -- Cable --> Switch
        Router -- Cable --> AP

        Switch --- PC1[<fa:fa-desktop> Desktop PC]
        Switch --- Printer[<fa:fa-print> Printer]
        AP -- Wi-Fi --> Laptop[<fa:fa-laptop> Laptop]
        AP -- Wi-Fi --> Phone[<fa:fa-mobile-alt> Phone]
    end

Public vs. Private IP Addresses

Since your home network (a LAN) is connected to the global internet (a WAN), your devices actually deal with two types of IP addresses.

1. Private IP: An internal address assigned by your router to each device on your local network (e.g., 192.168.1.5). This IP is only visible and usable within your LAN. Your router uses a protocol called DHCP (Dynamic Host Configuration Protocol) to automatically assign these private IPs to devices as they connect.
2. Public IP: The single address assigned to your router by your ISP. This is the address the rest of the internet sees. When you visit a website, the request appears to come from this public IP.

You can easily find your device’s private IP.

• Windows: Open Command Prompt (cmd) and type ipconfig.
• macOS/Linux: Open the Terminal and type ip addr or ifconfig.

Dynamic vs. Static IP Addresses

Most IP addresses assigned by ISPs are Dynamic.

[!TIP] If you restart your router, your ISP will likely assign you a new public IP address from its available pool. Likewise, your router will re-assign private IPs to your devices, and they might change.

This is fine for browsing the web, but it’s a problem for hosting a service. If a website’s IP address changed every day, no one could reliably find it.

This is where a Static IP comes in. A Static IP is a fixed, unchanging address that you purchase from your ISP. It’s a permanent address for your server on the internet, which is essential for hosting websites or other online services.

How to Turn Your Computer into a Server

So, you want to host a website from your own machine? Here are the four essential ingredients:

1. A Static Public IP: As discussed, you need a permanent address.
2. Reliable Hardware: Servers run 24/7 and handle many requests. They need powerful CPUs, ample RAM, and fast storage to keep up.
3. A Server Operating System (OS): You need an OS built for the task.

1. Web Server Software: The OS itself doesn’t serve web pages. You need special software that listens for requests and delivers website files.
   • IIS (Internet Information Services): Built by Microsoft, primarily for hosting .NET applications on Windows Server.
   • Apache & Nginx: The two most popular open-source web servers, typically run on Linux. They are known for their performance, flexibility, and massive community support.

A typical Linux web server file structure might look like this:

/var/www/
└── my-awesome-site.com/
    ├── index.html
    └── assets/
        ├── style.css
        └── script.js

The Full Journey of a Web Request

Let’s trace the entire path, from you typing a domain name to the website appearing on your screen.

sequenceDiagram
    participant User as User's Browser
    participant DNS as DNS Resolver
    participant Server as Web Server (IP: 88.99.100.101)
    participant WebApp as Web Server Software (Nginx)

    User->>DNS: Where is "my-awesome-site.com"?
    DNS-->>User: It's at IP Address 88.99.100.101
    User->>Server: HTTP GET request for "my-awesome-site.com"
    Server->>WebApp: Request received for domain "my-awesome-site.com"
    WebApp->>WebApp: Find the files for this site
    WebApp-->>Server: Here are index.html, style.css, etc.
    Server-->>User: Send website files
    User->>User: Render the HTML, CSS, and JS to display the page

1. DNS Lookup: Your browser doesn’t know where my-awesome-site.com is. It asks a DNS (Domain Name System) resolver, which is like the internet’s phonebook, to look up the Static IP address associated with that domain.
2. Request to Server: Once the browser has the IP, it sends an HTTP request directly to that server. The request includes the domain name (my-awesome-site.com) it’s looking for.
3. Web Server Software Takes Over: The web server software (e.g., Nginx) on the server receives the request. It checks the requested domain name to determine which of the many sites it might be hosting is the correct one.
4. File Retrieval & Response: Nginx locates the corresponding website files (index.html, etc.), packages them up, and sends them back to your browser as the HTTP response.
5. Rendering: Your browser receives the files and renders them into the visual webpage you see.

Ports and Firewalls: The Server’s Doors and Guards

What if you want to run multiple services on one server? For example, a web server and a database server. How does the server know which program should handle an incoming request?

This is solved by Ports. A single IP address has 65,535 digital ports. Think of the IP as the building’s street address and the port number as the specific apartment number.

When you make a web request, you’re implicitly using a default port:

• HTTP: Port 80
• HTTPS: Port 443

So, http://my-awesome-site.com is really http://my-awesome-site.com:80.

You can run services on other ports. For example, a Python development server often runs on port 5000 or 8080. To access it, you’d specify the port in the URL: http://localhost:5000.

Here is a simple Python web server using the Flask framework that runs on a specific port.

# To run this, you need to install Flask: pip install Flask
from flask import Flask

# Create a Flask application instance
app = Flask(__name__)

# Define a route for the homepage
@app.route('/')
def home():
    return "<h1>Hello from our Python Server!</h1>"

if __name__ == '__main__':
    # Run the app on localhost, listening on port 5000
    app.run(host='0.0.0.0', port=5000, debug=True)

If we wanted to change this to run on a different port, say 8080, we would only need to change one line.

--- a/server.py
+++ b/server.py
@@ -10,4 +10,4 @@
 
 if __name__ == '__main__':
     # Run the app on localhost, listening on port 5000
-    app.run(host='0.0.0.0', port=5000, debug=True)
+    app.run(host='0.0.0.0', port=8080, debug=True)

But what stops malicious actors from trying to access sensitive ports on your server? The Firewall.

A firewall is a security guard for your server’s ports. It maintains a set of rules that define which ports are open, which are closed, and who is allowed to send requests to the open ones.

[!WARNING] Never disable your firewall. Disabling it is like firing your security guard and leaving all the doors to your house unlocked. It exposes your system to countless automated attacks and security risks.

graph TD
    Request[<fa:fa-envelope> Incoming Request] --> Firewall{<fa:fa-shield-alt> Firewall};
    Firewall -- "Port 443 (HTTPS)" --> Allowed[<fa:fa-check-circle> Allowed];
    Allowed --> Nginx[<fa:fa-server> Nginx Web Server];

    Firewall -- "Port 22 (SSH)" --> Rule{Check IP};
    Rule -- "Source IP is Admin" --> AllowedSSH[<fa:fa-check-circle> Allowed];
    Rule -- "Source IP is Unknown" --> DeniedSSH[<fa:fa-times-circle> Denied];

    Firewall -- "Port 3306 (Database)" --> Denied[<fa:fa-times-circle> Denied];

This firewall configuration allows public web traffic on port 443, but blocks direct access to the database on port 3306 and only allows SSH access from a trusted IP. This is a fundamental security practice for any server.