DEV Community

Amol Pawar
Amol Pawar

Posted on

"How the Web Actually Works: A Beginner Developer's Field Notes 🌐"

Introduction

A few weeks ago, I sat down to "finally learn React properly." I opened a tutorial, followed along, built a to-do app, and felt great about myself — until the instructor casually said something like "the browser sends a request to the server, gets a JSON response, and renders it."

I nodded along. But if you'd stopped me and asked, "Wait, what exactly is a request? What is a server actually doing when it 'responds'? Why does the URL bar sometimes say HTTP and sometimes HTTPS?" — I would have frozen.

That moment made me pause my React journey for a week and go back to basics. Not because React is hard, but because React, Next.js, Node.js, Express, MongoDB — all of it — sits on top of the web. If you don't understand how the web works, you're memorizing syntax without understanding why any of it exists.

This article is basically my personal notes from that week, cleaned up and organized so you don't have to dig through a dozen scattered blog posts like I did. We're going to cover 11 foundational concepts — from "what is a server" all the way to "what is a website" — with real-world analogies, technical examples, and diagrams.

By the end of this article, when someone says "the client sent an HTTPS GET request and the server responded with a 200 status and a JSON body," you won't just nod politely — you'll actually know what happened.

Let's build our web fundamentals brick by brick. 🧱

Table of Contents

  1. What is a Server?
  2. What is a Protocol?
  3. What is HTTP?
  4. What is HTTPS?
  5. What is a Web Browser?
  6. What is a Request?
  7. What is a Response?
  8. What is a URL?
  9. What is WWW (World Wide Web)?
  10. What is a Web Page?
  11. What is a Website?
  12. How Everything Works Together
  13. Interview Questions
  14. Key Takeaways
  15. Conclusion

1. What is a Server? 🖥️

Simple Definition

A server is a computer (or program running on a computer) that "serves" something to another computer whenever it's asked. That "something" could be a web page, a file, an email, or data from a database.

Why It Is Needed

Think about it — when you open Instagram, the photos aren't stored on your phone already. Somebody, somewhere, has to store and send that data to you. That "somebody" is a server. Without servers, there'd be no central place to store and share information — everyone's device would need direct access to everyone else's device, which simply doesn't scale.

How It Works Internally

At its core, a server is just a program that:

  1. Listens continuously on a specific network address and port (like a shopkeeper standing at a counter waiting for customers).
  2. Waits for incoming requests.
  3. Processes the request (fetches data, runs logic, queries a database).
  4. Sends back a response.

This "listen → process → respond" loop runs 24/7 for popular services.

Client-Server Architecture

This is the foundational model of how the web operates:

  • Client — the one who asks (your browser, mobile app, or any program requesting data).
  • Server — the one who answers (a machine that holds and provides the data or service). 
   CLIENT                          SERVER
 ┌──────────┐    "Give me data"   ┌──────────┐
 │ Browser  │ ───────────────────>│ Web App  │
 │ (You)    │                     │ (Amazon) │
 │          │ <───────────────────│          │
 └──────────┘    "Here's data"    └──────────┘
Enter fullscreen mode Exit fullscreen mode

The client never directly touches the server's disk or database. It always talks through a well-defined channel (we'll get to protocols in a second).

Types of Servers

Server Type What It Does Real Example
Web Server Serves web pages (HTML, CSS, JS) to browsers Nginx serving amazon.com
Database Server Stores and manages structured data A MySQL/PostgreSQL server storing user accounts
File Server Stores and shares files across a network A company's shared drive (like Google Drive backend)
Mail Server Sends, receives, and stores emails Gmail's SMTP/IMAP servers

Real-World Example

When you order food on Zomato/Swiggy, your app is the client. It talks to Zomato's web server, which talks to a database server to check restaurant availability, and possibly a mail server to send you an order confirmation email.

Technical Example

A tiny Node.js web server:

const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello, I am your server!');
});

server.listen(3000, () => {
  console.log('Server is running on port 3000');
});
Enter fullscreen mode Exit fullscreen mode

This program is now "listening" — waiting for someone (a client) to send it a request.

Important Points to Remember

  • A server is defined by its role, not by hardware — even your laptop can act as a server locally.
  • One physical machine can run multiple types of servers (web + database + mail).
  • Servers are almost always always-on — that's the whole point.
  • "The server is down" means the listening program crashed or the machine is unreachable.

2. What is a Protocol? 📜

Simple Definition

A protocol is a set of agreed-upon rules that define how two systems communicate with each other — what format the message should be in, what order things happen in, and how errors are handled.

Why Communication Rules Are Required

Imagine calling customer support and speaking in Japanese while they only understand Spanish. No matter how loudly you talk, nothing gets communicated. Computers face the exact same problem — a browser and a server need to agree on a common "language" and set of steps before any useful exchange can happen. That's what a protocol solves.

How It Works Internally

A protocol typically defines:

  • The exact structure of a message (headers, body, delimiters).
  • The sequence of steps (who speaks first, who replies, how the connection closes).
  • Error handling (what happens if a message is lost or corrupted).

Different protocols exist because different tasks need different rules — sending an email has different requirements than loading a web page or transferring a large file.

Common Protocols

Protocol Full Form Used For
HTTP HyperText Transfer Protocol Loading web pages
HTTPS HyperText Transfer Protocol Secure Loading web pages securely (encrypted)
FTP File Transfer Protocol Uploading/downloading files to/from a server
SMTP Simple Mail Transfer Protocol Sending emails
TCP/IP Transmission Control Protocol / Internet Protocol The underlying rules for how data packets travel across networks

Real-World Example

Think of a protocol like the rules of a phone call: you dial a number, wait for it to ring, say "hello" when it connects, and say "bye" before hanging up. If either person skips the rules (starts talking mid-dial), the whole conversation breaks down.

Technical Example

Here's a raw HTTP request — this is literally what your browser sends, following the HTTP protocol's rules:

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

Every line here follows a strict, agreed-upon format. The server knows exactly how to parse it because both sides follow the same protocol.

Simple Diagram 

Client                         Server
  |                               |
  | ---- Follows Protocol A ----> |
  |                               |
  | <---- Follows Protocol A ---- |
  |                               |
Enter fullscreen mode Exit fullscreen mode

Important Points to Remember

  • Protocols are like "grammar rules" for machines talking to each other.
  • TCP/IP works at a lower level (moving raw data packets); HTTP/FTP/SMTP work at a higher level (defining what the data means).
  • Without protocols, the internet would be chaos — every device speaking a different "language."

3. What is HTTP? 🔗

Simple Definition

HTTP stands for HyperText Transfer Protocol. It's the protocol that defines how web browsers and web servers exchange information — mainly web pages, but also images, videos, and API data.

Why It Is Needed

Every time you click a link or load a website, your browser needs a standard way to ask the server "give me this page," and the server needs a standard way to respond "here it is." HTTP is that standard.

How HTTP Communication Works

HTTP follows a simple request-response cycle:

  1. The client (browser) sends an HTTP request to the server.
  2. The server processes it and sends back an HTTP response.
  3. The connection may close or stay open for reuse (in HTTP/1.1+). 
 Browser                         Server
   |  GET /home  (Request)         |
   |------------------------------>|
   |                                |
   |  200 OK + HTML (Response)     |
   |<------------------------------|
Enter fullscreen mode Exit fullscreen mode

HTTP Methods

HTTP defines "verbs" that describe what action you want to perform:

Method Purpose Real Example
GET Retrieve data Loading a blog post
POST Send new data to create something Submitting a signup form
PUT Update/replace existing data Editing your profile completely
DELETE Remove data Deleting a tweet

HTTP Status Codes

The server uses a status code to tell the client what happened:

Code Meaning When You See It
200 OK Request succeeded
201 Created New resource successfully created (e.g., account signup)
400 Bad Request You sent malformed data
401 Unauthorized You need to log in first
404 Not Found The page/resource doesn't exist
500 Internal Server Error Something broke on the server's side

Real-World Example

When you search on Google:

  • Your browser sends a GET request to google.com/search?q=web+development.
  • Google's server responds with 200 OK and the search results page.

When you post a comment:

  • Your browser sends a POST request with your comment data.
  • The server responds with 201 Created if it succeeded.

Technical Example 

POST /api/users HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
  "name": "Alex",
  "email": "alex@example.com"
}
Enter fullscreen mode Exit fullscreen mode

Server's response:

HTTP/1.1 201 Created
Content-Type: application/json

{
  "id": 42,
  "message": "User created successfully"
}
Enter fullscreen mode Exit fullscreen mode

Important Points to Remember

  • HTTP is stateless — each request is independent; the server doesn't automatically "remember" you between requests (that's why cookies/sessions/tokens exist).
  • HTTP methods describe intent, not just action — using the correct method matters for building proper APIs.
  • Status codes are grouped: 2xx = success, 3xx = redirect, 4xx = client error, 5xx = server error.

4. What is HTTPS? 🔒

Simple Definition

HTTPS stands for HyperText Transfer Protocol Secure. It's the same HTTP you just learned about, but with an extra layer of encryption so nobody in between can read or tamper with the data.

Difference Between HTTP and HTTPS

Feature HTTP HTTPS
Full Form HyperText Transfer Protocol HyperText Transfer Protocol Secure
Data Security Plain text, readable by anyone intercepting it Encrypted, unreadable without the key
Port 80 443
SSL/TLS Certificate Not required Required
URL Prefix http:// https://
Browser Indicator "Not Secure" warning 🔒 padlock icon
SEO/Trust Lower ranking, less trusted Preferred by Google, builds trust

SSL/TLS Certificate

HTTPS relies on SSL (Secure Sockets Layer) or its modern successor TLS (Transport Layer Security). A website gets a certificate from a trusted authority (like Let's Encrypt or DigiCert) that proves:

  1. "This website is really who it claims to be" (identity verification).
  2. It enables encryption of the data exchanged.

Encryption — How It Works Internally

When you visit an HTTPS site, a quick "handshake" happens before any real data is sent:

Browser                              Server
  |  "Hello, let's talk securely"      |
  |------------------------------------>|
  |     Sends SSL/TLS Certificate      |
  |<------------------------------------|
  |  Verifies certificate + creates    |
  |  a shared secret key               |
  |------------------------------------>|
  |   🔒 Encrypted communication begins  |
  |<====================================>|
Enter fullscreen mode Exit fullscreen mode

After this handshake, everything sent back and forth is scrambled using that shared key. Even if a hacker intercepts the data, it just looks like gibberish without the key.

Why HTTPS Is Important

  • Privacy — nobody snooping on your Wi-Fi (like at a coffee shop) can read your passwords or messages.
  • Integrity — data can't be silently modified in transit (e.g., injecting malicious scripts).
  • Trust — users and browsers flag non-HTTPS sites as unsafe.
  • SEO — Google favors HTTPS sites in search rankings.

Real-World Example

Logging into your bank's website — you'd never want your username and password traveling across the internet as plain, readable text. HTTPS scrambles that data so even if intercepted, it's useless to an attacker.

Technical Example

Compare the two URLs:

http://example.com/login    ❌ Insecure - data sent in plain text
https://example.com/login   ✅ Secure - data encrypted
Enter fullscreen mode Exit fullscreen mode

Important Points to Remember

  • HTTPS is not a different protocol from scratch — it's HTTP + TLS encryption.
  • The padlock icon means the connection is secure, not that the website is automatically trustworthy — scam sites can also have HTTPS.
  • Every modern website should use HTTPS by default (many hosting platforms provide free SSL certificates now).

5. What is a Web Browser? 🌍

Simple Definition

A web browser is software that lets you access, request, and display content from the web — turning raw HTML/CSS/JavaScript code into the visual pages you see and interact with.

What Browsers Do

A browser has several jobs:

  1. Take a URL from you.
  2. Send an HTTP/HTTPS request to the right server.
  3. Receive the response (HTML, CSS, JS, images).
  4. Render all of that into a visual page.
  5. Handle user interaction (clicks, scrolls, form input) and re-render as needed.

How Browsers Render Websites

Internally, a browser does this step by step:

1. Parse HTML  ──> builds the DOM (Document Object Model)
2. Parse CSS   ──> builds the CSSOM (CSS Object Model)
3. Combine DOM + CSSOM ──> Render Tree
4. Layout      ──> calculates position/size of every element
5. Paint       ──> draws pixels on your screen
Enter fullscreen mode Exit fullscreen mode 
HTML  ─┐
       ├──> DOM ──┐
CSS   ─┘          ├──> Render Tree ──> Layout ──> Paint ──> Screen
                   │
JS  ───────────────┘ (can modify DOM/CSSOM dynamically)
Enter fullscreen mode Exit fullscreen mode

Browser Engine

The "engine" is the core software that actually does the parsing and rendering:

Browser Rendering Engine JavaScript Engine
Google Chrome / Edge Blink V8
Mozilla Firefox Gecko SpiderMonkey
Safari WebKit JavaScriptCore

Examples of Browsers

  • Google Chrome
  • Mozilla Firefox
  • Apple Safari
  • Microsoft Edge
  • Brave

Real-World Example

When you type youtube.com and hit Enter, your browser sends a request, gets back HTML/CSS/JS, and within a second or two, transforms that raw code into video thumbnails, buttons, and text you can click.

Technical Example

This tiny snippet of HTML, once received by a browser, gets parsed into a visual button:

<button style="background:blue;color:white;">Click Me</button>
Enter fullscreen mode Exit fullscreen mode

The browser doesn't show you the text <button>...</button> — it interprets it and paints an actual clickable blue button.

Important Points to Remember

  • The browser is the client in client-server architecture.
  • Different browsers can render the same code slightly differently — this is why cross-browser testing matters.
  • JavaScript running in the browser can modify the page after it loads (this is the foundation of interactivity, and eventually, frameworks like React).

6. What is a Request? 📤

Simple Definition

A request is a message sent from the client to the server, asking it to do something — fetch a page, submit a form, delete a record, etc.

What Happens When a User Enters a URL

Let's trace it step by step — this is one of the most commonly asked interview questions:

  1. You type https://example.com and hit Enter.
  2. The browser checks its cache; if not cached, it asks a DNS server to translate example.com into an IP address.
  3. The browser opens a connection to that IP address (via TCP, and TLS handshake if HTTPS).
  4. The browser sends an HTTP request for the page.
  5. The server processes it and sends back a response.
  6. The browser renders the response into the page you see. 
You type URL
     │
     ▼
Browser checks DNS ──> gets IP address
     │
     ▼
Browser opens connection to Server
     │
     ▼
Browser sends REQUEST
     │
     ▼
Server sends back RESPONSE
     │
     ▼
Browser renders the page
Enter fullscreen mode Exit fullscreen mode

Request Structure

Every HTTP request has four key parts:

Part Description Example
Method The action being requested GET, POST
URL The resource being requested /api/products/12
Headers Metadata about the request Content-Type: application/json
Body The actual data being sent (optional, mainly for POST/PUT) { "name": "Shoes" }

Real-World Example

Filling out a login form and clicking "Sign In" triggers a POST request — your browser packages your username and password into the request body and sends it to the server.

Technical Example 

POST /login HTTP/1.1
Host: myapp.com
Content-Type: application/json
Authorization: Bearer xyz123

{
  "username": "alex99",
  "password": "mypassword"
}
Enter fullscreen mode Exit fullscreen mode

Breaking it down:

  • Method: POST
  • URL: /login
  • Headers: Host, Content-Type, Authorization
  • Body: the JSON with username/password

Important Points to Remember

  • Not every request has a body — GET requests usually don't.
  • Headers carry important context (auth tokens, content type, caching rules).
  • Every single resource on a page (images, fonts, scripts) triggers its own separate request.

7. What is a Response? 📥

Simple Definition

A response is the message the server sends back after processing a request — containing the result, status, and any requested data.

Response Structure

Part Description Example
Status Code Tells you what happened 200 OK, 404 Not Found
Headers Metadata about the response Content-Type: text/html
Body The actual content returned HTML page, JSON data, image bytes

How the Browser Displays Received Data

Once the browser receives the response:

  1. It checks the status code first (success? error? redirect?).
  2. It reads the Content-Type header to know how to interpret the body (text/html, application/json, image/png, etc.).
  3. It processes the body accordingly — parsing HTML into the DOM, displaying an image, or passing JSON to JavaScript code. 
Server Response
   │
   ▼
Status Code checked (200? 404? 500?)
   │
   ▼
Content-Type checked (HTML? JSON? Image?)
   │
   ▼
Body processed accordingly
   │
   ▼
Rendered/Used by Browser
Enter fullscreen mode Exit fullscreen mode

Real-World Example

When a weather app fetches data from an API, the server's response body might look like:

{
  "city": "Mumbai",
  "temperature": "31°C",
  "condition": "Sunny"
}
Enter fullscreen mode Exit fullscreen mode

The app's JavaScript reads this JSON and updates the UI to show "31°C, Sunny" instead of showing raw code to the user.

Technical Example

Full raw HTTP response for a webpage:

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

<html>
  <body>
    <h1>Welcome!</h1>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Important Points to Remember

  • A response always includes a status code — even errors get a "proper" response, not silence.
  • Content-Type is critical — mismatched types cause browsers to misinterpret data.
  • APIs typically respond with JSON; traditional websites respond with HTML.

8. What is a URL? 🧭

Simple Definition

URL stands for Uniform Resource Locator. It's the address you type or click to locate a specific resource on the web — a page, image, file, or API endpoint.

URL Structure

Let's break down a real example piece by piece:

https://www.example.com:443/blog/web-basics?sort=latest&page=2#comments
└─┬──┘ └───────┬────────┘└┬┘└──────┬───────┘└───────┬────────┘└───┬──┘
Protocol      Domain      Port      Path       Query Parameters  Fragment
Enter fullscreen mode Exit fullscreen mode
Part Meaning Example
Protocol Rules used to communicate https://
Domain The website's address (translated to an IP via DNS) www.example.com
Port Which "door" on the server to use (often hidden/default) :443 (HTTPS default)
Path Specific resource/page location on the server /blog/web-basics
Query Parameters Extra data/filters sent to the server ?sort=latest&page=2
Fragment Jumps to a specific section within the page (browser-only, not sent to server) #comments

Types of URLs

  • Absolute URL — the full address: https://example.com/about
  • Relative URL — a shortcut relative to the current page: /about or ../images/logo.png

Real-World Example

When you search for a product on Amazon and filter by price, the URL might look like:

https://www.amazon.com/s?k=laptop&sort=price-asc-rank
Enter fullscreen mode Exit fullscreen mode

Here, k=laptop and sort=price-asc-rank are query parameters telling Amazon's server exactly what to filter and how to sort.

Technical Example

In JavaScript, you can even parse a URL programmatically:

const url = new URL("https://example.com/blog?sort=latest#comments");

console.log(url.protocol);  // "https:"
console.log(url.hostname);  // "example.com"
console.log(url.pathname);  // "/blog"
console.log(url.search);    // "?sort=latest"
console.log(url.hash);      // "#comments"
Enter fullscreen mode Exit fullscreen mode

Important Points to Remember

  • Every part of a URL has a specific job — nothing is random.
  • Query parameters are how a lot of filtering/searching/pagination logic gets communicated to servers.
  • Fragments (#section) are handled entirely by the browser — they're never sent to the server.

9. What is WWW (World Wide Web)? 🕸️

Simple Definition

The WWW (World Wide Web) is a system of interlinked documents and resources (web pages) accessible over the internet using browsers. It's not the internet itself — it's a service that runs on top of the internet.

History and Meaning

The WWW was invented by Tim Berners-Lee in 1989 at CERN. He wanted a way for scientists to easily share and link documents using a browser and hyperlinks, instead of manually transferring files. That idea grew into HTML, HTTP, and URLs — the very foundations we've been discussing in this article.

Difference Between Internet and WWW

This trips up a lot of beginners, so let's be crystal clear:

Aspect Internet WWW (World Wide Web)
What it is A massive global network of connected computers A service/system that runs on top of the internet
Purpose Enables data transfer between devices Enables browsing and linking of documents/pages
Includes Email, WWW, FTP, gaming, streaming, etc. Just web pages and websites
Analogy Roads and highways Cars/shops that use those roads
Existed since 1960s (ARPANET) 1989 (invented by Tim Berners-Lee)

Real-World Example

Email (SMTP) and Netflix streaming both use the internet, but they're not part of the WWW — you don't "browse" them with a URL and hyperlinks the way you browse a website. On the other hand, when you visit wikipedia.org and click a hyperlink to jump to another article, that's the WWW in action.

Simple Diagram 

              ┌────────────────── INTERNET ──────────────────┐
              │                                               │
              │   ┌─────────┐  ┌────────┐  ┌────────────┐   │
              │   │  Email  │  │  WWW   │  │  Streaming  │   │
              │   │ (SMTP)  │  │ (HTTP) │  │  (various)  │   │
              │   └─────────┘  └────────┘  └────────────┘   │
              │                                               │
              └───────────────────────────────────────────────┘
Enter fullscreen mode Exit fullscreen mode

Important Points to Remember

  • The internet is the infrastructure; WWW is one of many services that use it.
  • Hyperlinks are the defining feature of WWW — the "web" of interconnected pages.
  • People often say "the internet" when they actually mean "the web" — now you know the difference!

10. What is a Web Page? 📄

Simple Definition

A web page is a single document — usually built with HTML, styled with CSS, and made interactive with JavaScript — that's accessible via a unique URL.

Static vs Dynamic Web Pages

Type Description Example
Static Web Page Content is fixed; same for every visitor unless manually edited An "About Us" page with hardcoded text
Dynamic Web Page Content changes based on data, user, or time (generated on the fly) Your Facebook feed, which differs per user and updates constantly 
STATIC PAGE                          DYNAMIC PAGE
┌────────────────┐                  ┌────────────────┐
│  Fixed HTML     │                 │  Server builds  │
│  file served    │                 │  HTML using     │
│  as-is          │                 │  live data      │
└────────────────┘                  └────────────────┘
     │                                     │
     ▼                                     ▼
 Same for                            Different per
 everyone                            user/request
Enter fullscreen mode Exit fullscreen mode

Real-World Example

  • Static: A simple portfolio page with your resume — same content for every visitor.
  • Dynamic: Amazon's homepage — shows different recommended products depending on who's logged in.

Technical Example

A minimal static web page:

<!DOCTYPE html>
<html>
<head><title>My Portfolio</title></head>
<body>
  <h1>Hi, I'm Alex</h1>
  <p>I'm a web developer.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

A dynamic page (conceptually, using a templating approach in something like Node.js/Express):

app.get('/profile/:username', (req, res) => {
  const user = getUserFromDatabase(req.params.username);
  res.render('profile', { name: user.name, bio: user.bio });
});
Enter fullscreen mode Exit fullscreen mode

Here, the HTML sent back changes depending on which username is requested.

Important Points to Remember

  • A web page is one single document/URL — not the whole site.
  • "Dynamic" doesn't just mean animations — it means the server generates different content based on data.
  • Modern sites often mix both: mostly static structure with dynamic sections (like a comments feed).

Uploading image

11. What is a Website? 🏗️

Simple Definition

A website is a collection of related web pages, grouped together under a common domain, usually connected via navigation/links.

Website vs Web Page

Aspect Web Page Website
Definition A single document A collection of related pages
Accessed via One specific URL A domain, with multiple URLs under it
Example amazon.com/product/123 amazon.com (the entire platform)
Analogy One page of a book The entire book

Types of Websites

  • Static Website — all pages are fixed HTML files (e.g., a small business brochure site).
  • Dynamic Website — pages generated based on data/user (e.g., Twitter, Instagram).
  • E-commerce Website — built for buying/selling (e.g., Amazon, Flipkart).
  • Portfolio Website — showcases someone's work (e.g., a designer's personal site).
  • Blog/News Website — publishes articles regularly (e.g., DEV.to itself!).
  • Web Application — highly interactive, app-like experience (e.g., Gmail, Google Docs).

Real-World Example

dev.to is a website. This very article you're reading is a single web page within that website. The homepage, your profile page, and the "write a post" page are all separate web pages that together make up the DEV.to website.

Simple Diagram 

                    WEBSITE (dev.to)
                          │
        ┌─────────────────┼──────────────────┐
        ▼                 ▼                  ▼
   Web Page:          Web Page:          Web Page:
   Homepage           Article Page       Profile Page
   (/)                (/article/123)     (/username)
Enter fullscreen mode Exit fullscreen mode

Important Points to Remember

  • Every website is made up of one or more web pages.
  • A single-page application (SPA) can feel like one page but is technically still a "website" — the URL/route may just change without a full reload.
  • Domain = the website's identity; pages = individual sections within it.

How Everything Works Together 🔄

Now that we've covered each concept individually, let's connect all the dots. Here's the complete journey from the moment you type a URL to the moment a web page appears on your screen:

┌─────────────────────────────────────────────────────────────────┐
│                                                                   │
│  1. USER types "https://example.com" and hits Enter              │
│              │                                                   │
│              ▼                                                   │
│  2. BROWSER checks: is this cached? If not...                    │
│              │                                                   │
│              ▼                                                   │
│  3. DNS LOOKUP: "example.com" ──> translated to IP (say 93.184.x)│
│              │                                                   │
│              ▼                                                   │
│  4. BROWSER opens a connection to the SERVER at that IP          │
│     (TCP handshake, then TLS handshake if HTTPS)                 │
│              │                                                   │
│              ▼                                                   │
│  5. BROWSER sends an HTTP REQUEST                                 │
│     (Method: GET, URL: /, Headers: ...)                          │
│              │                                                   │
│              ▼                                                   │
│  6. SERVER receives request, processes it                        │
│     (maybe queries a database server)                            │
│              │                                                   │
│              ▼                                                   │
│  7. SERVER sends back a RESPONSE                                  │
│     (Status: 200 OK, Body: HTML/CSS/JS)                          │
│              │                                                   │
│              ▼                                                   │
│  8. BROWSER parses HTML/CSS ──> builds DOM/CSSOM                 │
│              │                                                   │
│              ▼                                                   │
│  9. BROWSER paints the final WEB PAGE on your screen             │
│                                                                   │
└─────────────────────────────────────────────────────────────────┘
Enter fullscreen mode Exit fullscreen mode

In plain English: User → Browser → URL → DNS → Server → Request → Response → Web Page Display.

Every single time you load any website, this entire pipeline runs — often in well under a second. Understanding this flow is what makes concepts like "API calls," "server-side rendering," "client-side rendering," and "caching" click into place once you start learning frameworks.

Interview Questions 🎯

Here are 20+ beginner-friendly web development interview questions with short, clear answers — great for revision before an interview.

  1. What happens when you type a URL in a browser?
    The browser resolves the domain via DNS, connects to the server, sends an HTTP request, receives a response, and renders the page.

  2. What is the difference between HTTP and HTTPS?
    HTTPS is HTTP with SSL/TLS encryption added, making data exchange secure.

  3. What is a server?
    A computer/program that listens for requests and sends back responses/data.

  4. What is a protocol?
    A set of rules that defines how two systems communicate.

  5. What is the difference between a webpage and a website?
    A web page is a single document; a website is a collection of related web pages.

  6. What is a client in client-server architecture?
    The program (like a browser) that requests data or services from a server.

  7. What does DNS do?
    It translates human-readable domain names (example.com) into machine-readable IP addresses.

  8. What is the difference between GET and POST?
    GET retrieves data and is generally idempotent with no body; POST sends data to create/update something and usually has a body.

  9. What does status code 404 mean?
    The requested resource was not found on the server.

  10. What does status code 500 mean?
    An internal server error occurred while processing the request.

  11. What is the difference between the Internet and the WWW?
    The Internet is the global network infrastructure; the WWW is a service (web pages linked via HTTP) that runs on top of it.

  12. What is a URL made up of?
    Protocol, domain, port, path, query parameters, and fragment.

  13. What is the role of a web browser?
    To request, receive, and render web content for the user.

  14. What is a rendering engine?
    The browser component responsible for parsing HTML/CSS and painting pixels on screen (e.g., Blink, Gecko, WebKit).

  15. What is the difference between static and dynamic web pages?
    Static pages show fixed content for everyone; dynamic pages generate content based on data or user context.

  16. Why is HTTP called "stateless"?
    Because each HTTP request is independent — the server doesn't remember previous requests by default.

  17. What is an SSL/TLS certificate used for?
    To verify a website's identity and enable encrypted communication over HTTPS.

  18. What port does HTTP use by default? What about HTTPS?
    HTTP uses port 80; HTTPS uses port 443.

  19. What are HTTP headers?
    Key-value metadata sent along with requests/responses (e.g., Content-Type, Authorization).

  20. What is the difference between a request body and query parameters?
    A request body carries data within POST/PUT requests (often JSON); query parameters are appended to the URL for GET requests (e.g., ?page=2).

  21. What is a database server used for?
    To store, manage, and retrieve structured data used by applications.

  22. What is the difference between absolute and relative URLs?
    An absolute URL contains the full address (protocol + domain); a relative URL points to a resource relative to the current page.

  23. Why do modern websites prefer HTTPS over HTTP?
    For security (encryption), user trust, and better SEO ranking.

  24. What is a fragment in a URL used for?
    To jump to a specific section within a page (handled entirely by the browser, never sent to the server).

Key Takeaways 📝

  • The web runs on a simple but powerful idea: clients ask, servers answer — this is client-server architecture.
  • Protocols (like HTTP, HTTPS, FTP, SMTP) exist so computers can communicate using shared rules, just like humans need a shared language.
  • HTTP defines how browsers and servers talk; HTTPS adds a security layer with encryption via SSL/TLS.
  • A web browser is more than a viewer — it's a rendering engine that transforms raw code into visual, interactive pages.
  • Every browser action results in a request (from client) and a response (from server) — this cycle is the heartbeat of the web.
  • A URL is a structured address, with every segment (protocol, domain, port, path, query, fragment) serving a specific purpose.
  • The Internet is the infrastructure; the WWW is just one service (built on hyperlinked documents) that runs on top of it.
  • A web page is one document; a website is a collection of connected web pages under one domain.
  • Understanding this entire chain — User → Browser → URL → DNS → Server → Request → Response → Page — makes every modern framework (React, Next.js, Express, etc.) far easier to reason about.

Conclusion 🚀

Here's the thing I wish someone had told me before I jumped straight into React tutorials: frameworks are just tools that sit on top of the web's fundamentals. React doesn't replace HTTP — it uses it to fetch data. Next.js doesn't replace servers — it is a way of building them. Node.js doesn't replace the request-response cycle — it gives you a way to handle it in JavaScript.

When you understand what a server, protocol, request, response, and URL actually are, debugging becomes less mysterious. A "CORS error" stops being scary jargon and becomes "oh, the browser is blocking a cross-origin request for security reasons." A "404 in the console" becomes "the URL I requested doesn't exist on that server."

So if you're a beginner starting your web development journey — don't rush past these fundamentals to get to the "exciting" frameworks. Spend a weekend really understanding how the web works under the hood, the way I did. It's one of the best investments you can make early on, and it pays off every single day you write code afterward.

Now go build something — and this time, you'll actually know what's happening behind the scenes. 💻✨

If this article helped clarify things for you, feel free to share it with someone else starting their web dev journey. Happy coding! 🙌

Top comments (0)