How the Web Works: HTML, CSS, JS & Servers

Before writing a single line of code, every web developer should understand what happens behind the scenes when a user visits a website. This foundation shapes every decision you make as a developer.

What Happens When You Type a URL

Type https://example.com into your browser and press Enter. Here is the chain of events:

1. DNS Resolution

Your browser doesn't know what example.com means as a network address. It asks a DNS (Domain Name System) server to translate the domain into an IP address, like 93.184.216.34.

Think of DNS as the internet's phone book it maps human readable names to machine readable addresses.

2. TCP/IP Connection

Your browser opens a TCP connection to the server at that IP address, usually on port 80 (HTTP) or port 443 (HTTPS). For HTTPS, a TLS handshake also happens here to establish encryption.

3. HTTP Request

The browser sends an HTTP request to the server:

GET / HTTP/1.1
Host: example.com
Accept: text/html
User-Agent: Mozilla/5.0 ...

4. HTTP Response

The server responds with an HTTP response:

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8

<!DOCTYPE html>
<html>
  <head><title>Example</title></head>
  <body><h1>Hello World</h1></body>
</html>

5. Browser Rendering

The browser receives the HTML and begins rendering the page more on this below.

The Three Roles: HTML, CSS, and JavaScript

Every webpage is built from three technologies, each with a distinct job:

<!-- HTML defines what exists -->
<button class="btn" id="subscribe">Subscribe</button>

/* CSS defines how it looks */
.btn {
  background: #0070f3;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

// JavaScript defines what it does
document.getElementById('subscribe').addEventListener('click', () => {
  alert('Thanks for subscribing!');
});

Client vs Server

• Client: The browser running on the user's device. It requests resources, receives them, and renders them.
• Server: A computer running software that listens for requests and sends back responses. It can serve static files or run application logic to generate dynamic content.

A web server (like Nginx or Apache) serves static files. An application server (like a Node.js or Python app) runs code to build responses dynamically querying a database, authenticating users, processing forms.

HTTP Methods

HTTP defines methods (also called verbs) that describe the intent of a request:

// GET — fetch a list of posts
fetch('/api/posts')

// POST — create a new post
fetch('/api/posts', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ title: 'Hello World', content: '...' })
})

// DELETE — remove post with id 42
fetch('/api/posts/42', { method: 'DELETE' })

HTTP Status Codes

Every HTTP response includes a status code that tells the client what happened:

In your code, always check status codes before using response data:

const res = await fetch('/api/user/profile');

if (res.status === 401) {
  redirectToLogin();
} else if (res.ok) { // ok is true for 200-299
  const data = await res.json();
  renderProfile(data);
} else {
  showError('Something went wrong.');
}

REST APIs: A Quick Intro

A REST API (Representational State Transfer) is a convention for structuring HTTP based communication between a client and a server. REST APIs use URLs to represent resources and HTTP methods to define actions:

GET    /api/articles         → list all articles
GET    /api/articles/7       → get article with id 7
POST   /api/articles         → create a new article
PUT    /api/articles/7       → update article 7
DELETE /api/articles/7       → delete article 7

Data is typically exchanged in JSON format. REST APIs power most of the web you interact with daily.

The Browser Rendering Pipeline

Once the browser receives an HTML document, it follows a precise sequence to paint pixels on screen:

1. Parse HTML The browser reads the HTML and builds the DOM (Document Object Model), a tree of nodes representing every element.
2. Parse CSS Stylesheets are parsed into the CSSOM (CSS Object Model), a tree of style rules.
3. Build Render Tree The DOM and CSSOM are combined into a render tree containing only visible elements with their computed styles.
4. Layout (Reflow) The browser calculates the exact size and position of every element on the page.
5. Paint Pixels are drawn to the screen.
6. Compositing Layers are combined (important for animations and transforms).

This is why loading a large CSS file blocks rendering the browser needs the complete CSSOM before it can build the render tree. Always load critical CSS in the <head> and defer non critical JavaScript.

Developer Tools: Your Most Important Tool

Every browser ships with DevTools (open with F12 or Ctrl+Shift+I). Key panels you will use constantly:

• Elements Inspect and live edit the DOM and CSS
• Console Run JavaScript and see errors/logs
• Network Monitor every HTTP request and response, including status codes, headers, and timing
• Sources Debug JavaScript with breakpoints
• Performance Profile rendering and identify bottlenecks

Open the Network tab, reload any webpage, and click a request. You will see the exact HTTP headers, status code, and response body everything covered in this lesson, in action.

Key Takeaways

• Every page load involves DNS lookup, TCP connection, HTTP request, and HTTP response.
• HTML structures content, CSS styles it, JavaScript adds behavior.
• Clients request; servers respond.
• HTTP methods describe intent; status codes describe outcomes.
• REST APIs use URLs as resources and HTTP methods as actions.
• The browser converts HTML + CSS into a visible page through a multi step rendering pipeline.
• DevTools lets you observe all of this in real time.

Understanding this pipeline makes you a better debugger, a faster developer, and a more confident architect of web applications.