CS50 Week 8 Explained: How the Web Works, with HTML, CSS and JavaScript

Week 8 moves from programs on your own computer to programs that run across the internet. The first half explains what actually happens when you type a web address. The second introduces the three languages every web page is made of: HTML for structure, CSS for presentation and JavaScript for behaviour.

▶

Watch the lecture

CS50x 2026, Lecture 8: HTML, CSS, JavaScript

2 h 22 min · Harvard University · CS50 on YouTube

Watch on YouTube ↗Week page ↗Harvard's notes ↗

Jump to the key moments

1. 0:43TCP/IP
2. 11:30Ports
3. 16:37DNS
4. 21:52HTTP
5. 30:25Status codes
6. 35:30Inspect
7. 42:20HTML
8. 1:22:20Regular expressions
9. 1:29:34CSS
10. 1:43:46Bootstrap
11. 1:51:03JavaScript

How data crosses the internet

• IP gives every device an address (like 93.184.216.34) and moves data between them in small packets, passed from router to router.
• TCP makes delivery reliable. It numbers the packets so they can be reassembled in order, resends any that go missing, and uses ports to say which program should receive the data: 80 for plain HTTP, 443 for HTTPS.
• DNS is the internet's phone book, turning names like mycocoon.life into IP addresses.
• DHCP is how your laptop is given an IP address when it joins a network.

HTTP and status codes

Browsers and servers talk in HTTP. A browser sends a request, such as GET /index.html, and the server replies with headers plus the page. HTTPS is the same conversation, encrypted. Every response carries a status code: 200 (OK), 301 (moved permanently), 404 (not found), 500 (the server broke). Your browser's developer tools, covered in the "Inspect" chapter, show you all of this live. Get comfortable with them this week.

HTML: structure

HTML is a markup language, not a programming language. It has no loops or conditions. You describe a page with nested tags like <h1>, <p>, <a href="...">, <img>, <table> and <form>, and attributes add details to a tag. Forms are how pages send data back to a server, which sets up Week 9. The lecture also shows regular expressions, which are patterns (like "looks like an email address") that a form field can check.

CSS: presentation

CSS selects elements and styles them: colour, size, spacing, layout. You can select by tag, by class (.card, reusable) or by id (#header, unique). Keeping styles in a separate stylesheet is good design, for the same reason functions are: one change updates every page. Bootstrap is a ready-made CSS framework that gives you good-looking components and a responsive layout with a few class names.

JavaScript: behaviour

JavaScript runs in the browser and can change the page after it has loaded. It works through the DOM, the tree of elements your HTML created. You select an element, listen for an event (a click, a key press, a form submission) and respond by changing text, styles or content. The syntax will look familiar after C: curly braces, if, for, and functions.

Problem Set 8: what it asks

• Trivia: a page with a multiple-choice question and a free-response question. JavaScript checks each answer and shows whether it's right, with colour and text.
• Homepage: a small multi-page website about you, your interests or anything you like. It has to meet a list of requirements covering HTML tags, your own CSS, Bootstrap and JavaScript. Check the spec for the exact counts.

Where people get stuck

• "My JavaScript does nothing." Open the browser's developer console first, because the error is almost always there. Often the script runs before the element it's looking for exists. Put the script at the end of the body, or wait for the page to load.
• CSS not applying: check that the stylesheet link path is right, and check which rule wins, since a more specific selector beats a general one. The Inspect panel shows crossed-out rules.
• Homepage scope: plan the pages on paper first. Four simple pages you finish beat one ambitious page you don't.

Check yourself