Fundamentals · Lesson 2

How the Web Works

Understand what happens when someone visits Alex's portfolio website — from typing the URL to seeing HTML rendered on screen.

When Alex shares their portfolio URL with a potential employer, magic happens behind the scenes. The browser doesn't just "find" the website. A complex dance of servers, protocols, and parsing turns HTML code into the visual website they see.

Think of visiting a website like ordering food delivery. You make a request (enter URL), someone processes it (web server), packages what you asked for (HTML files), and delivers it back to you (browser renders the page). But unlike food delivery, this happens in milliseconds.

The Journey from URL to Website

When someone types `alexportfolio.com` into their browser, here's exactly what happens: This entire process happens so fast that users don't notice the complexity. But understanding each step helps you build better websites. When Alex's portfolio loads slowly, you'll know whether it's a DNS issue (step 2), server problem (step 4), or heavy HTML files (step 5).

DNS: The Internet's Phone Book

Computers don't understand domain names like `alexportfolio.com`. They need IP addresses — strings of numbers like `192.168.1.1`. The Domain Name System (DNS) translates human-readable names into machine-readable addresses.

When you register a domain for Alex's portfolio, you're essentially adding an entry to this global phone book. DNS servers worldwide cache this information, so the lookup happens almost instantly.

Client-Server Architecture

Every website interaction follows the same pattern: a client (browser) requests data from a server (computer hosting the website). Alex's portfolio lives on a server somewhere in the world. Could be Amazon's data center in Virginia, Google Cloud in Oregon, or a hosting company in Europe. The beauty of this system? Alex can build their portfolio on a laptop in Seattle, upload it to a server in Tokyo, and someone in London can view it instantly. The server doesn't care what device or browser the client uses — it just sends the same HTML files to everyone.

HTTP: The Language of the Web

HTTP (HyperText Transfer Protocol) is how browsers and servers communicate. Think of it as a very polite conversation with strict rules.

The browser says "GET /index.html HTTP/1.1" (please send me the home page). The server responds "200 OK" (here it is) followed by the HTML content. If Alex's portfolio page doesn't exist, the server sends "404 Not Found" instead.

When you see these numbers in developer tools, you're seeing HTTP status codes. They tell you exactly what happened with each request for Alex's portfolio files.

How Browsers Parse HTML

Once the server sends back HTML files, the browser's real work begins. It doesn't just display the raw HTML text — it parses, interprets, and renders it into the visual website users see.

Parsing means reading through every character of HTML and building a mental model of the page structure. The browser creates something called the DOM (Document Object Model) — a tree-like representation of all HTML elements.

Here's what happens when the browser receives Alex's portfolio HTML: This is why clean, well-structured HTML matters. Browsers can parse simple HTML lightning-fast. But messy, deeply nested, or invalid HTML slows down this process. Alex's portfolio visitors will notice the difference.

The DOM Tree Structure

Every HTML document becomes a tree in the browser's memory. The `` element is the root. The `` and `` are its children. Every element inside those becomes a branch or leaf.

For Alex's portfolio, the DOM might look like this: `html > body > header > nav > ul > li > a`. Each level represents nesting in the HTML. JavaScript uses this tree structure to find and modify elements dynamically.

Web Servers and Hosting

Alex's portfolio needs a home on the internet. That home is a web server — a computer that stays online 24/7, waiting to send website files to anyone who asks. But not all servers are equal. For Alex's portfolio, static hosting is perfect. The HTML doesn't change based on who visits. Services like Netlify can host it free, deploy automatically from GitHub, and even provide a custom domain name.

How Domain Names Work

`alexportfolio.com` is more than just a web address. It's a hierarchical system read from right to left. `.com` is the top-level domain (TLD). `alexportfolio` is the second-level domain that Alex registered. You can add subdomains like `blog.alexportfolio.com` or `projects.alexportfolio.com`.

When you register a domain, you're renting the right to use that name for usually one year at a time. You also get control over where it points — which server hosts the actual website files.

HTTPS and Web Security

Every modern website should use HTTPS instead of HTTP. The 'S' stands for Secure — all data between browser and server gets encrypted. Without it, anyone on the same WiFi network could potentially see what users type on Alex's portfolio contact form.

Browsers now show security warnings for HTTP sites. Google search rankings favor HTTPS sites. Users trust the green lock icon. For Alex's portfolio credibility, HTTPS is essential, not optional.

Most modern hosting services provide free SSL certificates (the technology behind HTTPS). Services like Netlify, Vercel, and GitHub Pages enable HTTPS automatically. No excuse not to use it.

SSL Certificates Explained

SSL certificates prove your website is legitimate. They contain cryptographic keys that enable encrypted connections. When browsers see a valid certificate for `alexportfolio.com`, they know they're really talking to Alex's server, not an imposter.

Certificate authorities like Let's Encrypt, DigiCert, and Cloudflare issue these certificates. The browser checks with these authorities to verify each certificate is valid and hasn't been revoked.

Performance and Optimization

Understanding how the web works reveals why performance matters. Every HTTP request takes time. Every kilobyte of HTML takes time to download and parse. Users expect websites to load in under 3 seconds — after that, they start leaving.

Alex's portfolio performance depends on several factors: server location, file sizes, number of HTTP requests, and HTML complexity. The good news? You can optimize all of these.

Optimization	Why It Helps	How to Do It
Minify HTML	Removes whitespace, reduces file size	Build tools, online minifiers
Optimize Images	Images often 80%+ of page weight	WebP format, proper sizing
Use CDN	Serves files from nearest location	Cloudflare, AWS CloudFront
Enable Compression	Gzip can reduce HTML by 70%	Server configuration, hosting settings

The fastest website is often the simplest. Complex animations, heavy images, and deeply nested HTML all slow things down. Alex's portfolio should prioritize content over flashiness.

Measuring Performance

You can't improve what you don't measure. Tools like Google PageSpeed Insights, GTMetrix, and browser developer tools show exactly how fast Alex's portfolio loads and where bottlenecks occur.

Key metrics include First Contentful Paint (when users see something), Largest Contentful Paint (when the main content appears), and Time to Interactive (when the page responds to clicks). All should happen within 2-3 seconds on average connections.

Understanding how the web works gives you superpowers as a developer. You'll make smarter decisions about HTML structure, hosting choices, and performance optimizations. Most importantly, you'll debug issues faster when something goes wrong with Alex's portfolio.

The web seems magical, but it follows predictable rules. Master these fundamentals and you'll build websites that load fast, work reliably, and provide great user experiences. Alex's future employers will definitely notice the difference.

Quiz