🌐 Phase 1 · Web Foundations 🟢 Beginner Module 01

How Websites Work

⏱ 20 min read 📖 6 sections 🧩 5-question quiz 🏆 1 challenge

Course Progress2% complete

Before writing a single line of HTML, you need to understand the stage it performs on. Every website you visit is the result of a conversation between your browser and a server happening in milliseconds. This lesson demystifies that conversation — from typing a URL to seeing a fully rendered page.

Section 1

What is a Website?

A website is a collection of files stored on a computer called a server, accessible over the internet. Those files come in three main flavours: HTML (structure), CSS (style) and JavaScript (behaviour). Every page you've ever visited boils down to those three technologies working together.

Websites come in two broad types:

📄

Static Sites

Pre-built files sent exactly as stored. Fast, simple, no database needed.

⚡

Dynamic Sites

Pages generated on-the-fly by server code. Personalised content, logins, databases.

📱

Web Apps

Interactive apps that run in the browser — think Gmail, Figma, Google Docs.

💡

HTML is the foundation

Even the most complex web app starts with HTML. Without it, nothing else renders. CSS and JavaScript are meaningless without HTML structure to attach to.

Section 2

Frontend vs Backend

Web development is commonly split into two sides of a wall. Understanding which side does what prevents enormous confusion later.

Side	Also called	Technologies	Where it runs
Frontend	Client-side	HTML, CSS, JavaScript	User's browser
Backend	Server-side	Python, PHP, Node.js, Ruby	Web server
Database	Data layer	MySQL, PostgreSQL, MongoDB	Database server

Frontend is everything the user sees and interacts with. Backend is the logic that happens behind the scenes — authentication, data processing, talking to databases. As an HTML learner you're starting 100% on the frontend.

🎭

JavaScript lives on both sides

With Node.js, JavaScript can also run on the server. But for beginners, think of JavaScript as a frontend language. Don't let that confuse you for now.

Section 3

Client-Server Architecture

Every website visit is a request-response cycle. Your browser (the client) asks for something; the server sends it back. Here's the full journey when you type a URL and press Enter:

You type a URL

e.g. https://bitwithbite.com — your browser starts the process.

DNS Lookup

Your browser asks a DNS (Domain Name System) server: "What's the IP address for bitwithbite.com?" It gets back something like 104.21.48.32.

TCP Connection

Your browser opens a connection to that IP address on port 443 (HTTPS) or 80 (HTTP).

HTTP Request

The browser sends a formal request: "GET /index.html HTTP/1.1" — along with headers like your browser type and cookies.

Server Responds

The server sends back an HTTP response: status code (200 OK), headers, then the actual HTML file content.

Browser Renders

Your browser reads the HTML, fetches any linked CSS/JS/images, then paints the visual page on screen.

🔍

See it yourself

Open DevTools (F12) → Network tab → reload the page. You'll see every request your browser makes, the status codes, and the file sizes. This becomes incredibly useful when debugging.

Section 4

How Browsers Work

When a browser receives HTML, it doesn't display it raw — it goes through a rendering pipeline. Understanding this helps you write better HTML and diagnose visual issues.

Parse HTML → DOM

The browser reads HTML tags and builds a tree of objects called the Document Object Model (DOM). Every element becomes a node in this tree.

Parse CSS → CSSOM

CSS rules are parsed into the CSS Object Model (CSSOM) — another tree that maps styles to DOM nodes.

Combine → Render Tree

DOM + CSSOM are merged into a Render Tree — only visible elements are included (e.g. display:none elements are excluded).

Layout

The browser calculates the exact position and size of every element on screen (this is also called "reflow").

Paint

Pixels are drawn to the screen. Text, colours, borders, shadows all get painted layer by layer.

🌐

5 billion+ websites

That's how many websites exist on the internet today — all built on HTML.

📅

HTTP invented 1991

Tim Berners-Lee invented both HTML and HTTP at CERN in the same year.

📊

95%+ HTML5 support

Over 95% of browsers in active use fully support HTML5 features.

🔒

HTTPS protects data

HTTPS encrypts the data between you and the server — critical for passwords and payments.

Section 5

URL Structure

A URL (Uniform Resource Locator) is the address of a resource on the web. Every part has a specific meaning — knowing them helps you write correct links and understand web routing.

EXAMPLE URL BREAKDOWN

https://

bitwithbite.com

/courses/html/

?q=lesson

#top

Protocol (https://)

Domain

Path

Query string

Fragment / anchor

Part	Symbol	Purpose
Protocol	`://`	How to communicate (http, https, ftp)
Domain	—	Human-readable server name (maps to IP via DNS)
Port	`:443`	Usually omitted; default 443 for HTTPS, 80 for HTTP
Path	`/`	Which file or route on the server
Query	`?key=val`	Extra parameters sent to the server
Fragment	`#id`	Jump to element with that id — handled by browser, not server

Section 6

HTTP vs HTTPS

HTTP (HyperText Transfer Protocol) is the set of rules browsers and servers use to communicate. It defines how requests are structured and how responses are formatted. Here's what a raw HTTP request looks like:

HTTPRaw Request Example

GET /courses/html/ HTTP/1.1
Host: bitwithbite.com
User-Agent: Mozilla/5.0 (Windows NT 10.0)
Accept: text/html,application/xhtml+xml
Accept-Language: en-US,en;q=0.9
Connection: keep-alive

HTTPServer Response Example

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 12483
Cache-Control: max-age=3600

<!DOCTYPE html>
<html lang="en">
  ...
</html>

HTTPS adds an SSL/TLS encryption layer on top of HTTP. Before any data is sent, the browser and server perform a "TLS handshake" — exchanging cryptographic keys so all data is encrypted in transit. This means:

🔒

Why HTTPS matters

Without HTTPS, anyone on the same Wi-Fi network can read your data in plain text — passwords, credit card numbers, everything. The padlock icon in the browser address bar confirms HTTPS is active. Google also ranks HTTPS sites higher in search results.

⚠️

Always use HTTPS for live sites

When you eventually deploy a website, you must get an SSL certificate. Services like Let's Encrypt provide them for free. Most hosting platforms (Netlify, Vercel, GitHub Pages) enable HTTPS automatically.

🧩 Quick Check — Lesson 1

5 questions · instant feedback · no penalty for wrong answers

1. What does HTML stand for?

2. Which of the following is a backend (server-side) language?

3. What does a browser do when it receives HTML from a server?

4. What does the "S" in HTTPS stand for?

5. In a URL, what does the "#" symbol indicate?

🏆

Quiz Complete!

Great work understanding how the web works. Move on to writing your first HTML!

🏆

Lesson 1 Challenge

Paper exercise · no code needed · 10 min

Draw the client-server cycle for a user visiting https://bitwithbite.com.

On paper (or a whiteboard), sketch a diagram and label all of these components:

• The browser (client) — where the user types the URL
• The DNS server — which translates the domain to an IP address
• The web server — which holds the HTML files
• The HTTP request arrow — going from browser to server
• The HTML response arrow — going from server back to browser
• The render step — browser turning HTML into a visible page

Show hints

Draw boxes for: Browser, DNS Server, Web Server
Show arrows between them in both directions
Label the DNS step as "Domain → IP lookup"
Label the final step "Render tree → Paint to screen"

← Previous

Lesson 1 of 35HTML Fundamentals

Introduction to HTML →