Skip to main content

How the Web Works

How the Web Works – From URL to Render

Ever wondered what happens behind the scenes when you type a URL and hit Enter? This post explains how the web works—step by step—in simple terms every developer should understand.

1. DNS Lookup

When you enter a web address like www.example.com, your browser doesn’t know the server location yet. It asks a DNS (Domain Name System) to resolve that domain name into an IP address like 192.0.2.1.

2. TCP Connection

Once the IP is known, your browser uses the TCP (Transmission Control Protocol) to open a connection to the server on port 80 (HTTP) or 443 (HTTPS).

3. HTTP Request

The browser sends a request to the server, usually starting with something like:


GET / HTTP/1.1
Host: www.example.com
User-Agent: Chrome/117.0

4. Server Response

The server receives the request and returns an HTTP response. This usually contains HTML content, but may also include headers, cookies, and links to CSS, JS, and images.


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

<html>
  <head><title>Example Site</title></head>
  <body>Hello, world!</body>
</html>

5. Browser Rendering

The browser parses the HTML, builds the DOM (Document Object Model), downloads any external stylesheets and scripts, executes JavaScript, and paints the final page you see.

6. Additional Requests

If the HTML refers to external files (like images, CSS, JS), the browser sends additional HTTP requests to fetch them and continue rendering.

7. User Interaction

Any interaction from the user (form submission, clicking links, AJAX requests) creates more HTTP requests, repeating parts of this cycle.

Why Understanding This Matters

Knowing how the web works improves your ability to debug issues, optimize performance, secure applications, and collaborate better across frontend and backend teams.

Conclusion

Whether you’re building UIs or APIs, having a mental model of how browsers and servers interact is essential for every modern developer.

Found this helpful? Follow me on The Learn with Rana or connect on LinkedIn for more practical developer content.

Labels:

Comments

Post a Comment

Popular posts from this blog

How to Display Flash Messages in EJS using Node.js and Express

Displaying Flash Messages in EJS with Node.js and Express Flash messages are a great way to give users quick feedback — like "Login successful!" or "Please enter all fields!" . In this guide, you’ll learn how to implement them using: express-session connect-flash EJS templating 📦 Step 1: Install Required Packages npm install express express-session connect-flash ejs ⚙️ Step 2: Setup Express App and Middleware const express = require('express'); const session = require('express-session'); const flash = require('connect-flash'); const app = express(); // Set view engine app.set('view engine', 'ejs'); // Middleware app.use(express.urlencoded({ extended: true })); app.use(session({ secret: 'yourSecretKey', resave: false, saveUninitialized: true })); app.use(flash()); // Make flash messages available to all views app.use((req, res, next) => { res.lo...
Post a Comment
Read more

Realtime Device Tracker using Node.js, Socket.IO & Leaflet

Realtime Device Tracker using Node.js, Socket.IO & Leaflet In this tutorial, you’ll learn how to build a realtime location tracking application that uses the browser’s GPS, Socket.IO for live communication, and Leaflet.js to display users on a map. 🚀 Project Overview Backend: Node.js, Express.js, Socket.IO Frontend: HTML, Leaflet.js, Socket.IO client Features: Live GPS tracking, multi-user map, disconnect cleanup 📁 Folder Structure project-root/ ├── app.js ├── package.json ├── src/ │ ├── public/ │ │ ├── css/ │ │ │ └── style.css │ │ └── js/ │ │ └── script.js │ ├── routes/ │ │ └── routers.js │ ├── socket/ │ │ └── socketHandler.js │ └── views/ │ └── index.ejs 🧠 How It Works Each user shares their location using the browser's navigator.geolocation API. Location is sent to the server via Socket.IO . The server broadcasts each user’s position to all clien...
Post a Comment
Read more

How to Send Emails in Node.js using Nodemailer and Ethereal

How to Send Email in Node.js using Nodemailer Email functionality is essential in modern web applications. Whether you're sending confirmation emails, password resets, or notifications, Node.js with Nodemailer makes this simple. In this blog, we'll walk through setting up email sending using Node.js , Express , and Ethereal Email for testing. 🧾 Prerequisites Node.js installed Basic knowledge of Express.js Internet connection 📁 Project Structure project-folder/ ├── index.js ├── .env ├── package.json └── app/ └── controller/ └── emailSendController.js 📦 Step 1: Install Dependencies npm init -y npm install express nodemailer dotenv npm install --save-dev nodemon 🔁 Configure nodemon (Optional but Recommended) Update your package.json with a custom start script: "scripts": { "start": "nodemon index.js" } 🔐 Step 2: Create a .env File Create a .env file a...
Post a Comment
Read more