O
Octo
O
Octo
CoursesPricingDashboardPrivacyTerms

© 2026 Octo

Web Development
1How Websites Work2HTML Fundamentals3CSS Fundamentals4JavaScript Fundamentals5Building Your First Website
Module 1

How Websites Work

How the web actually works — browsers, servers, HTTP, URLs, and the request-response cycle. The foundation you need before writing a single line of code.

A physicist wanted to share his research papers

In 1989, Tim Berners-Lee was a software engineer at CERN, the European physics lab. He had a problem: thousands of scientists were producing research, but nobody could find anyone else's work. Documents were scattered across incompatible computers with no way to link them together.

So he wrote a proposal. His boss scribbled "Vague but exciting" on the cover page and let him run with it. Within two years, Berners-Lee had invented three things: HTML (a way to write documents), URLs (a way to address them), and HTTP (a way to transfer them). He called the system the World Wide Web.

That "vague but exciting" memo became the foundation of a system that now serves over 1.1 billion websites.

1.1BWebsites online

5.5BInternet users

100msAvg page load target

The internet vs. the web — they're not the same thing

Most people use "internet" and "web" interchangeably. They're actually different layers.

The internet is the physical infrastructure — cables, routers, satellites, and protocols that let computers talk to each other. It existed since the 1960s (as ARPANET).

The web is a service that runs on top of the internet, using HTTP to deliver pages you view in a browser. Email, streaming video, and online gaming also run on the internet — but they're not the web.

RoughDiagram: invalid JSON

There Are No Dumb Questions

If the web runs on the internet, could the internet exist without the web?

Absolutely. The internet existed for 20 years before the web was invented. The internet is the road system; the web is one type of vehicle driving on it.

What about apps on my phone — are those the web?

Some are, some aren't. A website opened in Safari is the web. A native app like WhatsApp uses the internet but speaks its own protocols. Many apps are hybrids — they look native but load web content behind the scenes.

What happens when you type a URL and press Enter

Every time you visit a website, an invisible conversation happens between your browser and a server somewhere in the world. The whole thing takes milliseconds, but there are several steps.

Step 1: You type a URL. Something like https://www.example.com/about. This URL has parts: the protocol (https), the domain (www.example.com), and the path (/about).

Step 2: DNS lookup. Your browser doesn't know where example.com lives. It asks a DNS (Domain Name System) server to translate the domain name into an IP address — like 93.184.216.34. DNS is the phone book of the internet.

Step 3: Your browser connects to the server. Using the IP address, your browser opens a connection to the web server. If the URL starts with https, they first do a security handshake (TLS) to encrypt the connection.

Step 4: HTTP request. Your browser sends an HTTP request: "GET me the page at /about." This request includes headers — metadata about your browser, language preferences, and cookies.

Step 5: The server responds. The server processes the request and sends back an HTTP response: a status code (200 means success), headers, and the HTML content of the page.

Step 6: The browser renders the page. Your browser reads the HTML, fetches any linked CSS and JavaScript files, downloads images, and paints the final page on your screen.

This is the request-response cycle — the fundamental pattern of the entire web.

Your Browser
DNS Server
Web Server
HTML + CSS + JS
Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

⚡

Trace the journey

25 XP
Open any website in your browser. Right-click the page and select **Inspect**, then click the **Network** tab. Reload the page. You'll see every single request your browser made — HTML files, CSS stylesheets, JavaScript files, images, fonts. How many total requests did it take to load the page? What was the largest file? Write down the URL you visited, the total number of requests, and the file type of the largest download.

URLs: the address system of the web

Every page on the web has a unique address — its URL (Uniform Resource Locator). Understanding URL structure is foundational.

https://www.shop.example.com:443/products/shoes?color=red&size=10#reviews
PartExamplePurpose
Protocolhttps://How to communicate (secure HTTP)
Subdomainwww.shopA section of the domain
Domainexample.comThe website's name
Port:443Which "door" on the server (443 is default for HTTPS)
Path/products/shoesWhich page or resource
Query string?color=red&size=10Parameters passed to the server
Fragment#reviewsA section on the page (browser-only, not sent to server)

There Are No Dumb Questions

What's the difference between HTTP and HTTPS?

The "S" stands for Secure. HTTPS encrypts all data between your browser and the server so nobody in between can read it. In 2026, virtually all legitimate websites use HTTPS. Browsers now warn you if a site uses plain HTTP.

Do I need to type https://www every time?

No. Browsers are smart enough to add these for you. But understanding the full structure helps when you're building websites and debugging issues.

The three languages of every webpage

Every webpage you've ever seen is built with three technologies working together:

✗ Without AI

  • ✗HTML — Structure and content
  • ✗CSS — Visual styling and layout
  • ✗JavaScript — Behavior and interactivity

✓ With AI

  • ✓The skeleton and organs of a body
  • ✓The skin, clothes, and appearance
  • ✓The muscles and nervous system

Here's how they work together on a simple button:

<!-- HTML: defines that a button exists -->
<button class="buy-btn">Add to Cart</button>
/* CSS: makes the button look good */
.buy-btn {
  background-color: #4CAF50;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
// JavaScript: makes the button do something
document.querySelector('.buy-btn').addEventListener('click', function() {
  alert('Item added to your cart!');
});
🔑You don't need all three
A webpage can exist with just HTML — it'll look plain, like a 1995 academic paper, but it'll work. CSS makes it beautiful. JavaScript makes it interactive. Many simple pages use HTML and CSS with zero JavaScript.

HTTP status codes: the server talks back

When your browser makes a request, the server always responds with a status code — a three-digit number that tells you what happened.

CodeMeaningWhen you'll see it
200OK — here's the pageEvery successful page load
301Moved permanently — go to this new URL insteadWhen a page's address changed
404Not found — this page doesn't existBroken links, typos in URLs
403Forbidden — you don't have permissionAccessing restricted content
500Internal server error — something broke on the serverServer-side bugs

You've definitely seen a 404 page before. Now you know exactly what it means: your browser asked for something, and the server said "I don't have that."

⚡

Hunt for status codes

25 XP
Open your browser's Developer Tools (F12 or right-click > Inspect > Network tab). Visit a few websites. Click on any request in the list and look at the **Status** column. Now try visiting a page that doesn't exist — like `https://www.google.com/thispagedoesnotexist`. What status code do you get? Bonus: Can you find a `301` redirect? Try visiting `http://github.com` (without the 's') and watch it redirect to `https://github.com`.

Client vs. server: who does the work?

In web development, you'll constantly hear "client-side" and "server-side." This is simply about where the code runs.

✗ Without AI

  • ✗HTML rendering
  • ✗CSS styling
  • ✗JavaScript interactivity
  • ✗Form validation (instant feedback)
  • ✗Animations and transitions

✓ With AI

  • ✓Database queries
  • ✓User authentication
  • ✓Payment processing
  • ✓Sending emails
  • ✓Generating dynamic HTML

Front-end development = building the client side (HTML, CSS, JavaScript). Back-end development = building the server side (databases, APIs, logic). Full-stack development = doing both.

🔑Where you're starting
This entire track teaches front-end development. By Module 5, you'll have a complete website live on the internet. Back-end comes later — and it's entirely optional for many web careers.

How a modern webpage actually loads

When your browser receives the HTML response, it doesn't just display it. It goes through a precise rendering process:

Parse HTML — The browser reads the HTML top to bottom, building a tree structure called the DOM (Document Object Model)

Fetch CSS — When it encounters a <link> to a CSS file, it downloads and parses the styles

Build the render tree — The browser combines the DOM with the CSS to figure out what goes where and how it looks

Layout — The browser calculates the exact position and size of every element on the page

Paint — Pixels are drawn to the screen. You see the page.

Execute JavaScript — JS files run, potentially modifying the DOM and triggering re-renders

There Are No Dumb Questions

Why does JavaScript run last?

Because JavaScript can change anything on the page. The browser wants a stable foundation (HTML parsed, CSS applied) before JavaScript starts manipulating things. That's why you'll often see <script> tags at the bottom of HTML files.

⚡

Draw the request-response cycle

50 XP
Without looking at the diagram above, sketch the journey of a web request on paper or in a notes app. Include these steps: DNS lookup, HTTP request, server processes the request, HTTP response, browser renders the page. For each step, write one sentence explaining what happens. This mental model will serve you for your entire web development career.

From Tim's memo to your career

Tim Berners-Lee could have patented the web. He didn't. He gave it away for free, insisting it should remain open and accessible to everyone. That decision is the reason you can learn to build websites without paying anyone for the right to publish on the internet. The technologies he created in 1991 — HTML, URLs, HTTP — are still the foundation of every single website, including the one you're reading right now. In the next module, you'll write your first HTML and see a page appear in your browser. The same magic, 35 years later.

Key takeaways

  • The internet is the infrastructure; the web is a service running on top of it using HTTP
  • Every webpage involves a request-response cycle: browser asks, server answers
  • URLs are structured addresses with protocol, domain, path, and query parameters
  • HTML provides structure, CSS provides style, JavaScript provides interactivity
  • HTTP status codes (200, 301, 404, 500) tell you what happened with your request
  • DNS translates human-readable domain names into IP addresses
  • Front-end = browser side, back-end = server side, full-stack = both

?

Knowledge Check

1.What is the correct order of the request-response cycle when you visit a website?

2.What does DNS do?

3.What HTTP status code means 'the page was not found'?

4.Which technology provides the structure and content of a webpage?

Next

HTML Fundamentals