How the Internet Works — A Must-Know for Every Web Developer!

1. Introduction: Why Understanding the Internet Matters

Many developers are fluent in modern frameworks but clueless when things go wrong—why is the app slow? Why did the request fail?

Knowing how the internet works gives you the insight to debug effectively and build resilient systems.

🍳 Analogy: Don’t be a chef who can cook fancy dishes but doesn’t know how the stove or ventilation works.

2. How the Internet Works (Top Down)

a. User Types a URL

For example: https://blog.hasanh.dev

• The browser converts the domain into an IP address via DNS.
• The request is routed through the ISP to the destination server.
• The server responds with web content.

b. DNS Resolution

• DNS = Domain Name System

• It translates domain names into IP addresses.

• Common DNS record types:

  • A: IPv4 address
  • CNAME: alias to another domain
  • MX: for email

Try these tools:

dig blog.hasanh.dev
nslookup blog.hasanh.dev

📖 Analogy: DNS is the internet’s phonebook—translating names into numbers.

c. HTTP & HTTPS

• HTTP = HyperText Transfer Protocol

• A request-response communication model

• Structure includes:

  • Headers
  • Body
  • Status Codes (200, 404, 500…)

• HTTPS = HTTP over TLS (encrypted)

• Why HTTPS matters:

  • Security (encrypted data)
  • SEO benefits (Google favors HTTPS)

3. Hosting & Servers

• Web hosting = where your website lives

• Types:

  • Shared Hosting: cheap, but shared resources
  • VPS: virtual private server
  • Dedicated: full server control
  • Cloud: scalable (AWS, GCP, Vercel)

Server location affects latency—closer is faster.

4. Domain Name System & CDN

• CDN = Content Delivery Network

• Examples: Cloudflare, Akamai

• Concept: cache static content near users

• Benefits:

  • Performance: reduce latency
  • Security: filter traffic, mitigate DDoS

5. Browser: Rendering Engine & Dev Tools

Browsers turn HTML/CSS/JS into visual pages.

Rendering pipeline:

HTML → DOM
CSS → CSSOM
DOM + CSSOM → Render Tree → Layout → Paint

Key concepts:

• Critical Rendering Path
• Caching (HTTP cache, Service Worker)
• Prefetch, Preload

Explore with Chrome DevTools:

• Network tab: track requests
• Performance tab: measure rendering time

6. Internet Flow Illustration

User → DNS Query → Get IP
→ TCP Handshake → TLS Handshake
→ HTTP Request → Web Server
→ HTTP Response → Browser Render

7. Practical Tips to Learn Internet Basics

Don’t just read—experiment!

Useful tools:

curl https://blog.hasanh.dev
ping blog.hasanh.dev
traceroute blog.hasanh.dev
dig blog.hasanh.dev

Try deploying to Vercel/Netlify and observe:

• DNS configuration
• CDN behavior
• HTTP headers

8. Conclusion

Understanding how the internet works is foundational for serious web development.

It strengthens your ability to scale, debug, and secure applications.

Modern web = coding + networking + system design.

🔗 Read more

• How HTTP Works — Headers, Status Codes, Caching, and Cookies
• DNS Deep Dive — From Record to DNS Spoofing
• CDN 101: Architecture and Practice