Web Technologies › Level 04
LEVEL 04 · WEB FUNDAMENTALS

Browsers and Web Servers

Go inside the browser and web-server environment. Learn how browsers process HTML, CSS and JavaScript, how servers handle requests, and how developers inspect web pages using browser Developer Tools.

🌐 Browser Architecture 🖥️ Web Servers 🧩 Rendering 🛠️ DevTools 🎯 Placement Focus
01

Learning Objectives

Understand what happens between receiving a response and seeing a usable web page.

🌐

Browser Architecture

Identify major browser components and understand their general responsibilities.

🌳

DOM and CSSOM

Understand how HTML and CSS are represented inside the browser.

🎨

Rendering

Trace the simplified rendering path from HTML and CSS to pixels.

⚡

JavaScript Engine

Understand how JavaScript is executed and how scripts can change the page.

🖥️

Web Servers

Understand how servers receive requests and return static or dynamic content.

🛠️

Developer Tools

Learn the purpose of Elements, Console, Network and Sources panels.

02

What Is a Web Browser?

A browser is the user's primary interface to the Web.

A web browser is software that retrieves Web resources and processes them so that users can view and interact with web content.

Browsers do much more than display HTML. They handle network communication, parse documents, build internal representations, execute JavaScript, apply styles, render pixels, manage storage and enforce important security boundaries.

💡
Think of the browser as a Web runtime

It receives resources, understands them, executes code, applies rules and finally produces an interactive interface.

03

Simplified Browser Architecture

Different browsers have different internal implementations, but these responsibilities are useful for learning.

🧭

User Interface

Browser controls such as tabs, address bars, navigation controls and menus.

INTERFACE
🔄

Browser Engine

Coordinates major browser operations and connects user-interface actions with page processing.

COORDINATION
🎨

Rendering Engine

Parses page resources and helps turn document and style information into the visual result.

RENDERING
⚡

JavaScript Engine

Executes JavaScript and allows scripts to interact with the page and browser APIs.

EXECUTION
🌐

Networking Layer

Handles network communication needed to retrieve web resources and exchange data.

NETWORK
💾

Storage

Provides browser-side storage capabilities such as cookies and Web Storage.

STORAGE
🛡️

Security

Applies browser security rules and helps isolate web content and capabilities.

SECURITY
🧩

Web Platform APIs

Exposes browser capabilities such as DOM, Fetch, Storage, History and many others.

APIS
04

From HTML Source to DOM

The browser parses HTML and constructs a DOM representation.

Consider this HTML:

<main> <h1>CodeBhavya</h1> <p>Learn Web Technologies</p> </main>

The browser does not simply keep this as plain text. It parses the markup and represents the document as a tree of nodes.

DOM TREE
DOCUMENT
│
main
├── h1
│ └── "CodeBhavya"
└── p
└── "Learn Web Technologies"
Important: The DOM shown by Developer Tools can differ from the original HTML source because the browser may normalize markup and JavaScript can modify the live DOM.
05

CSS and the CSSOM

CSS is also parsed into a representation the browser can use for styling and layout.

HTML

DOM

HTML Source
↓
Parse HTML
↓
DOM Tree

Represents document structure.

CSS

CSSOM

CSS Rules
↓
Parse CSS
↓
CSSOM

Represents stylesheet and styling information the browser can use.

06

Critical Rendering Path

A simplified view of how the browser turns document resources into pixels.

01 HTML Parse into DOM
→
02 CSS Parse into CSSOM
→
03 Style Combine relevant information
→
04 Layout Calculate size and position
→
05 Paint Draw visual output
→
06 Composite Assemble visual layers where needed
07

Premium Visualizer — Browser Rendering Pipeline

Step through the path from source code to the final visible interface.

BROWSER RENDER TRACE
Step 1 of 8
📄
STEP 01

Receive HTML

The browser receives the HTML resource from the network.

<h1>CodeBhavya</h1>

Why this matters

01

HTML and CSS are first converted into structures the browser can reason about.

02

Layout calculates the geometry of visible content.

03

Paint produces the visual result that eventually appears in the viewport.

08

JavaScript in the Browser

JavaScript allows pages to become interactive and dynamic.

JavaScript running in the browser can read and modify the DOM, respond to user events, make network requests and interact with browser APIs.

JavaScript
↓
JavaScript Engine
↓
Execute Code
↓
DOM / Web APIs
⚡
Example

A click handler can change a heading, add a class, create an element, fetch data from an API or update stored information.

09

What Is a Web Server?

A web server may refer to the server hardware, the HTTP server software, or the combined environment.

A web server stores or has access to web resources such as HTML files, images, stylesheets and JavaScript files. Its HTTP server software receives incoming requests and sends responses.

For a static request, the server may locate the requested file and return it. For a dynamic request, additional application software may process the request and produce a response.

Remember: A web server is not necessarily only one physical computer, and a real deployment can contain multiple server instances and layers.
10

How a Web Server Handles a Request

Follow a simplified request-processing workflow.

01 Receive

Accept the incoming HTTP request.

→
02 Identify

Inspect the requested host and resource.

→
03 Locate

Find a file or route the request to application logic.

→
04 Process

Generate or retrieve the required response.

→
05 Respond

Send the HTTP response back to the client.

11

Static and Dynamic Server Processing

Understand the difference between serving a file as-is and generating a response.

STATIC

Static Request

Browser
↓
HTTP Server
↓
index.html
↓
Browser

The server can return a stored resource directly when the resource is available and configured to be served.

DYNAMIC

Dynamic Request

Browser
↓
HTTP Server
↓
Application
↓
Database / Services

Application logic can retrieve information, perform processing and generate a response.

CodeBhavya Connection: This is where later technologies such as PHP, Servlets, JSP, Node.js and APIs become important.
12

Reverse Proxy

A reverse proxy sits in front of backend servers and receives requests on their behalf.

A reverse proxy is an intermediate server that receives requests from clients and forwards them to one or more internal servers.

Depending on the architecture, it can support functions such as load balancing, caching, authentication, compression or TLS termination.

🌐 Browser
↓
🔀 Reverse Proxy
↙    ↓    ↘
🖥️ Server A
🖥️ Server B
🖥️ Server C
Simple analogy: A reverse proxy is like a reception desk that receives visitors and directs each request to the appropriate internal department.
13

Premium Visualizer — Web Server Request Handling

Trace how a web server decides what to return.

WEB SERVER TRACE
Step 1 of 7
📩
STEP 01

Receive Request

The web server receives an HTTP request from a client.

GET /index.html HTTP/1.1
14

Browser Developer Tools

Professional Web development requires the ability to inspect and debug what the browser is actually doing.

Modern browsers include Developer Tools that can inspect the live DOM, applied CSS, JavaScript behavior and network requests.

These tools are essential for debugging layout problems, JavaScript errors, missing resources, slow requests, unexpected styles and API failures.

ELEMENTS
▼ <main>
↳ <h1>CodeBhavya</h1>
↳ <p>Learn Web Technologies</p>

Inspect the live DOM and view the CSS rules applied to selected elements.

CONSOLE
> document.title
"Browsers and Web Servers | CodeBhavya"
> 5 + 7
12

Run JavaScript expressions and inspect runtime output and errors.

NETWORK
Name Type Status Time
index.html document 200 31 ms
web-technologies.css stylesheet 200 12 ms
app.js script 200 18 ms

Inspect requests, responses, status codes, headers, timing and transferred resources.

SOURCES
01 const title = document.querySelector("h1");
02 title.addEventListener("click", updatePage);
03 function updatePage() {
04   console.log("clicked");

Inspect source files, set breakpoints and debug JavaScript execution.

15

Which DevTools Panel Should You Use?

Learn the basic debugging workflow.

Problem Panel What to Inspect
Element looks wrong Elements DOM structure, computed styles and CSS rules
JavaScript error Console Errors, warnings and runtime output
API request failed Network URL, method, status, headers and response
JavaScript logic bug Sources Source code, breakpoints and execution
🛠️
Professional habit

When a web page does not behave as expected, do not immediately rewrite everything. Inspect the DOM, console and network activity first.

16

Real-World Example — Broken Student Portal

See how a developer can diagnose a web problem.

Problem

A student clicks the View Results button, but the result never appears.

Instead of randomly changing the JavaScript, the developer opens Developer Tools.

The Network panel shows that the request returned an error response. The developer can then inspect the request URL, response and server-side behavior.

🖱️ Click Button
↓
⚡ JavaScript
↓
🌐 Network Request
↓
⚠️ Error Response
↓
🛠️ DevTools → Network
17

Common Beginner Mistakes

Build the correct browser and server mental model.

❌

Browser Only Displays HTML

A browser also parses CSS, executes JavaScript, handles resources and exposes Web APIs.

❌

DOM = Original HTML

The live DOM can differ from the original source and can be modified by JavaScript.

❌

Web Server = Database

A database is a separate data system or layer. The web server does not automatically mean database.

❌

DevTools Is Only for Errors

DevTools is also useful for understanding requests, layout, styles, performance and runtime behavior.

18

Interview Preparation

Think first, then click a card to reveal the answer.

INTERVIEW QUESTION
01

What is a web browser?

Think about retrieval, processing and interaction.

Click to reveal answer
ANSWER
✓

Web Browser

A web browser is software that retrieves, processes and displays Web content and provides an interactive environment for Web applications.

Click again to return to the question.
INTERVIEW QUESTION
02

What is the DOM?

Think about how HTML becomes a tree structure.

Click to reveal answer
ANSWER
✓

DOM

The Document Object Model is the browser's object representation of a document. It represents document structure as nodes that can be accessed and manipulated with APIs.

Click again to return to the question.
INTERVIEW QUESTION
03

What is CSSOM?

Think about the browser's representation of CSS.

Click to reveal answer
ANSWER
✓

CSSOM

The CSS Object Model provides an object-based representation and APIs for working with CSS information in the browser.

Click again to return to the question.
INTERVIEW QUESTION
04

What is the role of a web server?

Think about requests and web resources.

Click to reveal answer
ANSWER
✓

Web Server

A web server receives HTTP requests and returns web resources or responses. It can also work with application software in a dynamic system.

Click again to return to the question.
INTERVIEW QUESTION
05

What is the difference between static and dynamic web content?

Compare serving stored resources with application-generated responses.

Click to reveal answer
ANSWER
✓

Static vs Dynamic

Static content is generally served as stored, while dynamic content can be generated or modified by application logic using request information, data or other services.

Click again to return to the question.
INTERVIEW QUESTION
06

What is a reverse proxy?

Think about a server that sits in front of backend servers.

Click to reveal answer
ANSWER
✓

Reverse Proxy

A reverse proxy receives client requests and forwards them to internal servers. It can provide functions such as load balancing, caching, authentication or TLS termination.

Click again to return to the question.
INTERVIEW QUESTION
07

What is the Critical Rendering Path?

Think about converting Web resources into pixels.

Click to reveal answer
ANSWER
✓

Critical Rendering Path

It is the sequence of browser processing steps involved in converting HTML, CSS and related resources into the rendered pixels displayed on screen.

Click again to return to the question.
INTERVIEW QUESTION
08

Which DevTools panel helps you inspect network requests?

Think about requests, responses and timing.

Click to reveal answer
ANSWER
✓

Network Panel

The Network panel shows requests made by the page and provides information such as request URLs, methods, status codes, headers, timing and transferred resources.

Click again to return to the question.
19

Quick MCQs

Check your understanding before moving forward.

MCQ 01 EASY

Which browser representation models the structure of an HTML document?

MCQ 02 EASY

Which panel is primarily used to inspect requests sent by a page?

MCQ 03 MODERATE

Which stage calculates the size and position of elements?

MCQ 04 MODERATE

What can a reverse proxy do?

20

Practice Problems

Test your understanding without looking at the lesson.

01

Explain what happens inside a browser after it receives an HTML document.

02

Draw the simplified relationship between DOM and CSSOM.

03

Explain the difference between layout and paint.

04

Explain how a web server handles a request for a static HTML file.

05

Explain static and dynamic server-side processing with an example.

06

A button click does nothing. Explain how you would use Elements, Console and Network to investigate the problem.

21

Glossary

Click a term to flip the card and reveal its meaning.

TERM
Browser
Click to see meaning
DEFINITION

Browser

Software that retrieves, processes and displays Web content.

TERM
DOM
Click to see meaning
DEFINITION

DOM

Document Object Model, the browser's object representation of a document.

TERM
CSSOM
Click to see meaning
DEFINITION

CSSOM

CSS Object Model, the object-based representation and API model for CSS information.

TERM
Rendering Engine
Click to see meaning
DEFINITION

Rendering Engine

The browser subsystem responsible for processing Web resources and helping produce the visual page.

TERM
Layout
Click to see meaning
DEFINITION

Layout

The process of calculating the size and position of rendered elements.

TERM
Paint
Click to see meaning
DEFINITION

Paint

The rendering stage in which the browser draws visual content for display.

TERM
Web Server
Click to see meaning
DEFINITION

Web Server

A server system and/or HTTP server software that handles Web requests and responses.

TERM
Reverse Proxy
Click to see meaning
DEFINITION

Reverse Proxy

An intermediate server that receives client requests and forwards them to backend servers.

TERM
Developer Tools
Click to see meaning
DEFINITION

Developer Tools

Built-in browser tools used to inspect, debug and analyze Web pages and requests.

TERM
Critical Rendering Path
Click to see meaning
DEFINITION

Critical Rendering Path

The sequence of browser processing steps involved in converting Web resources into pixels displayed on screen.

TERM
JavaScript Engine
Click to see meaning
DEFINITION

JavaScript Engine

A browser component that executes JavaScript code.

TERM
Static Content
Click to see meaning
DEFINITION

Static Content

Content that can generally be served from stored resources without generating it dynamically for each request.

22

Quick Revision

The concepts to remember before Level 05.

🌐 Browser

Web runtime environment

🌳 DOM

Document structure

🎨 CSSOM

CSS representation

⚡ JS Engine

JavaScript execution

📐 Layout

Size and position

🖌️ Paint

Draw visual content

🖥️ Web Server

HTTP request handling

🛠️ DevTools

Inspect and debug

🎯

Key Takeaway

A browser is not simply a window that displays HTML. It is a complex Web runtime that processes resources, builds document and style representations, executes JavaScript and renders the final interface.

A web server receives requests and can either serve existing resources or work with application software to generate dynamic responses.

Developer Tools give developers a practical way to inspect the live DOM, CSS, JavaScript execution and network activity.

✓
LEVEL 04

Browsers and Web Servers

Finish the lesson and mark this topic as completed.