🌐 How Websites Are Built

What you’ll learn

1. What Happens When You Type a URLUnderstand that you ship instructions, not pages — and see the request/response that carries them.You never ship a web page: you send a text description, and a stranger's browser builds the page on hardware, a screen and a network you cannot know. Pressing Enter triggers a name lookup, a connection, a proof of identity, and a plain-text HTTP request. The reply is a status code, headers, and text — no layout at all.
2. HTML: Structure, Not AppearanceWrite HTML as a claim about meaning rather than appearance, and use semantic elements.HTML describes what content is, not what it looks like — h1 means 'main heading', and its size is only a default suggestion. The syntax is one shape: elements with attributes, nested like boxes in boxes. A div says nothing; header, nav, main and article are the same box with meaning attached, at a cost of one character.
3. The Document TreeExplain the DOM as a tree and derive selectors, inheritance and event bubbling from it.The browser parses your HTML string into a tree of nodes — the DOM — and from then on the tree is the page; the file is finished scaffolding. Containment is the document's fundamental relationship, so the tree shape gives you CSS selectors, inheritance, and event bubbling essentially for free.
4. CSS: The Presentation LayerExplain why structure, presentation and behavior are separate, and read any CSS rule.Three languages exist so each can be overridden or ignored independently by readers and machines you'll never meet — a user stylesheet, reader mode, or a phone with no JavaScript all still get your meaning. A CSS rule is a selector plus declarations; the selector is a query language for the DOM tree, which is why CSS scales.
5. The Cascade: Why CSS Feels UnpredictablePredict which CSS rule wins by applying the cascade, and understand why the cascade exists.CSS is a conflict-resolution system, not a command list: !important, then specificity, then source order, with inheritance underneath. Your rule was never broken — something more specific won, and devtools shows the whole argument with losers struck through. The cascade exists so users, authors and browsers can all express intent about one document.
6. The Box Model: Everything Is a BoxExplain the box model and fix its most famous default with box-sizing.Everything the browser draws is a rectangle built of four nested rings: content, padding, border, margin. Padding is inside (background, clickable); margin is outside (transparent distance). By default width means the content box, so width 300 plus 20 padding and 1px border renders 342 — which is why professionals set box-sizing: border-box once and never think about it again.
7. Layout: Flow, Flexbox and GridRespect normal flow, and choose between Flexbox and Grid by counting dimensions.Normal flow — blocks stacking, inline content wrapping — is already responsive on every screen ever made, so every layout decision takes responsibility away from something that worked. Flexbox arranges along one axis; Grid arranges rows and columns at once. Both were designed by people who knew you can't know the screen size.
8. Responsive: One Document, Unknown ReaderDesign for an unknown reader with media queries, mobile-first ordering and relative units.You cannot know your reader's screen, pixel density, font-size preference, colour scheme, pointer or connection — so you design something that adapts rather than something for 'the screen'. Mobile-first makes wide screens an enhancement rather than making small screens a subtraction, and relative units like rem state a relationship instead of overruling a reader who needs larger text.
9. JavaScript: Making It Do ThingsUse the find/listen/change pattern on the DOM, and explain event bubbling and delegation.JavaScript was written by Brendan Eich in about ten days at Netscape in 1995 (Mocha, then LiveScript, then JavaScript in December) and is unrelated to Java. Nearly all browser JavaScript is: query the tree with a CSS selector, listen for an event, mutate the DOM. Events bubble up through ancestors, which is why one delegated listener can serve rows that don't exist yet.
10. Fetch: The Page That Keeps TalkingExplain fetch, JSON and asynchrony, and design for all four states of a request.Browsers let JavaScript make its own requests after load, turning the web from a stack of documents into a place where things happen. Servers increasingly send JSON — facts, not presentation — and your code builds the page from them. Because a response arrives later into a program that moved on, you must design for before, during, error, and success.
11. Where It Runs: Server or BrowserCompare server-side and client-side rendering, and understand what frameworks are for.A server can send finished HTML (immediate first paint, visible to crawlers, round trips on interaction) or a near-empty page plus JavaScript that builds it (app-like once loaded, but the reader pays the download-parse-execute cost on their device). Frameworks solve the synchronization problem between data and DOM — a real problem at scale, and a costly import before you have it.
12. Getting It Live: DNS, Hosting, HTTPSExplain hosting, domains, DNS caching and what TLS actually guarantees.A site needs a host that answers requests, a domain you rent, and DNS to connect them. DNS is a delegation hierarchy with caching at every level, which is why a record change reaches people at different times and nothing is broken. TLS provides encryption, integrity and authentication of the domain name — not any judgement about whether that domain is trustworthy.
13. The Bill: Performance and AccessTreat performance as a cost imposed on readers, and see accessibility as the dividend of honest HTML.Every byte is downloaded on a connection you don't pay for and executed on a processor you don't own — and JavaScript is the most expensive byte because it must be downloaded, parsed and executed. Semantic HTML gives you screen-reader announcements, keyboard behaviour and reader mode for free; the dreaded accessibility work is usually the cost of having lied about your content earlier.

Questions this course answers

Grounded in trusted sources

• MDN Web Docs (developer.mozilla.org) — HTML, CSS, DOM, Events, Fetch, accessibility and responsive design references
• WHATWG — HTML Living Standard, DOM Living Standard, Fetch Living Standard
• W3C — CSS Cascading and Inheritance Level 4; CSS Box Model Level 3; CSS Flexible Box Layout Level 1; CSS Grid Layout Level 1; Media Queries Level 4
• W3C — Web Content Accessibility Guidelines (WCAG) 2.2
• W3C Style — 'A brief history of CSS until 2016' (Håkon Wium Lie's proposal, 10 October 1994; CSS1 became a W3C Recommendation in December 1996)
• CERN — 'A short history of the Web' (Berners-Lee's proposal March 1989; first server and browser running by end of 1990; CERN released the source royalty-free on 30 April 1993)
• Cybercultural — '1995: The Birth of JavaScript'; Brendan Eich biography (first version written in ten days at Netscape, 1995; Mocha → LiveScript → JavaScript in December 1995)
• IETF — RFC 9110 (HTTP Semantics); RFC 8446 (TLS 1.3)

Every Wunder lesson is built from real, reputable sources — never invented.

Related Science courses