2. How the web works

Trace how a human-readable domain name becomes the IP address of a server through DNS. Compare domains, subdomains, registrars, name servers, and DNS records at a practical level.

Check what you understood with a short quiz.

Use what you learned in the previous lesson to solve real-world problems.

Connect a public website to the machine or platform that serves it. Distinguish static files served as-is from dynamic pages generated by a CMS, server app, or hosting platform.

Check what you understood with a short quiz.

Use what you learned in the previous lesson to solve real-world problems.

Reason through why modern sites use HTTPS instead of plain HTTP. Identify how TLS encrypts traffic, helps verify the server, and affects browser trust indicators like the lock icon.

Check what you understood with a short quiz.

Use what you learned in the previous lesson to solve real-world problems.

Follow a browser’s request to a server and the server’s response back. Read the basic pieces of an HTTP exchange: method, URL path, headers, status code, and response body.

Check what you understood with a short quiz.

Use what you learned in the previous lesson to solve real-world problems.

Recognize common status codes such as 200, 301, 302, 404, and 500. Use them to tell whether a page loaded, moved, was missing, or failed on the server.

Check what you understood with a short quiz.

Use what you learned in the previous lesson to solve real-world problems.

Use HTTP headers to see how the browser should interpret a file. Focus on practical headers such as Content-Type, Cache-Control, and Location, and connect them to page loading behavior.

Check what you understood with a short quiz.

Use what you learned in the previous lesson to solve real-world problems.

Trace what happens after the first HTML file arrives. See how the browser discovers linked CSS, JavaScript, images, fonts, and other assets, then sends additional requests to build the full page.

Check what you understood with a short quiz.

Use what you learned in the previous lesson to solve real-world problems.

Separate the three core front-end languages by job: HTML gives structure, CSS controls presentation, and JavaScript adds behavior. Match visible parts of a real page to the code type most likely responsible for them.

Check what you understood with a short quiz.

Use what you learned in the previous lesson to solve real-world problems.

See how the browser turns HTML text into a live tree of nodes called the DOM. Compare source HTML with the live DOM so you can understand why developer tools may show elements that were added or changed after loading.

Check what you understood with a short quiz.

Use what you learned in the previous lesson to solve real-world problems.

Reason through why one CSS rule wins over another. Inspect selectors, inherited values, specificity, source order, and computed styles to connect a visible design choice to the exact CSS affecting it.

Check what you understood with a short quiz.

Use what you learned in the previous lesson to solve real-world problems.

Trace how JavaScript reacts to user actions and changes the page without loading a new document. Follow simple event-driven behavior such as clicking a button, opening a menu, or updating text in the DOM.

Check what you understood with a short quiz.

Use what you learned in the previous lesson to solve real-world problems.

Follow the browser’s path from code to pixels: parse HTML and CSS, create renderable boxes, calculate layout, paint visuals, and composite layers. Use this sequence to explain why code changes can affect structure, spacing, color, or motion.

Check what you understood with a short quiz.

Use what you learned in the previous lesson to solve real-world problems.

Inspect a real page by selecting an element and reading the matching HTML and CSS. Toggle declarations, edit text, and use the Styles pane to connect what you see on screen to the code behind it.

Check what you understood with a short quiz.

Use what you learned in the previous lesson to solve real-world problems.

Read the Network panel as a timeline of files the browser requested. Identify document, stylesheet, script, image, and font requests, then compare file size, status, timing, and loading order.

Check what you understood with a short quiz.

Use what you learned in the previous lesson to solve real-world problems.

Recognize when the browser reuses saved files instead of downloading fresh copies. Use cache clues in developer tools and hard reload behavior to reason through why a page may not show the newest code or asset.

Check what you understood with a short quiz.

Use what you learned in the previous lesson to solve real-world problems.

Review this chapter with practice based on your mistakes.