← CS50: Introduction to Computer Science

Week 8: HTML, CSS, JavaScript

The internet's actual plumbing, DNS, TCP/IP, HTTP, followed by the three languages that turn a response into a page you can click.

8 topics · 30 questions

Each topic is a path, not a menu: work down it in order and every question builds on the one above. Click any of them to watch the answer draw itself.

How the Internet Works: TCP/IP

  1. How it worksHow does TCP/IP break a message into packets, address each one, and reassemble them in order at the other end?
  2. Going furtherWhat happens to a page's loading time when its packets arrive out of order and have to be reassembled?
  3. Ties togetherHow does a lost or resent packet in TCP connect to a race condition being resolved by retrying safely?
Your turn1 of 2
A file of 69945 bytes is broken into packets of 360 bytes each to send over the network. About how many packets does it take?

DNS Lookups

  1. How it worksHow does a DNS lookup translate a domain name into the IP address of the server that actually hosts it?
  2. Worked exampleWalk me through the DNS lookup steps that turn a domain name into an IP address like 192.0.2.1.
  3. Common mistakeWhy isn't a domain name actually stored as part of the website's server itself?
Your turn1 of 2
A DNS lookup for a domain takes 224 milliseconds when the browser has to ask a fresh server, but only 7 milliseconds when the answer is already cached locally. How many milliseconds does the lookup save by using the cache?

The HTTP Request-Response Cycle

  1. How it worksHow does a browser's HTTP GET request travel to a server and come back as a response full of HTML?
  2. How it worksHow does a status code like 200 or 404 tell the browser what happened before a single byte of the page is shown?
  3. Worked exampleWalk me through the full round trip for loading one page: DNS lookup, TCP handshake, HTTP request, response, render.
  4. Common mistakeWhy doesn't seeing a padlock icon and HTTPS in the address bar mean a website is trustworthy?
  5. Going furtherWhat happens to the request-response cycle when the same page is requested again and the browser has it cached?
Your turn1 of 2
A page load's DNS lookup, TCP handshake, HTTP request, and response take 36, 34, 47, and 35 milliseconds respectively before rendering begins. What is the total time before rendering starts?

HTML Structure and Tags

  1. How it worksHow does nesting one tag inside another let a page build complex structure out of a few simple building blocks?
  2. Worked exampleWalk me through the HTML tags needed to show a heading, a paragraph, and a link to another page.
  3. Common mistakeWhy isn't HTML actually a programming language the way C or Python is?
  4. Going furtherWhat happens to a page's structure when a closing tag is left out entirely?
Your turn1 of 2
An HTML page nests 15 tags inside one outer div, and each of those 15 tags itself contains 7 more inner tags. How many total inner tags are there across all 15 outer tags?

CSS and the Box Model

  1. How it worksHow do content, padding, border, and margin stack outward from the center of the CSS box model?
  2. Common mistakeWhy isn't a CSS margin the same thing as a CSS padding?
  3. Worked exampleFind the total width a box occupies given 200 pixels of content, 20 pixels of padding per side, and a 5 pixel border per side.
  4. Going furtherWhat happens to a page's layout when every box's width is set using percentages instead of fixed pixels?
Your turn1 of 2
Find the total width a box occupies given 363 pixels of content, 34 pixels of padding per side, and a 9 pixel border per side.

Responsive Design with Media Queries

  1. How it worksHow does a media query apply a different set of CSS rules once the screen width crosses a set threshold?
  2. Worked exampleWalk me through a media query that stacks a page's columns vertically once the screen width drops below 600 pixels.
  3. Going furtherWhat happens to a page's readability on a phone if no media queries are written for it at all?
Your turn1 of 2
A media query switches a page's layout once the screen width drops below 809 pixels. A device has a screen width of 494 pixels, which is less than 809. How many pixels below the threshold is that device's screen?

The Document Object Model

  1. How it worksHow does the DOM represent an HTML page as a tree of nested objects that JavaScript can read and change?
  2. How it worksHow does calling a method like getElementById reach into that tree and grab one specific object?
  3. Worked exampleWalk me through JavaScript changing a paragraph's text from Loading to Done by way of the DOM.
  4. Common mistakeWhy isn't the DOM the same thing as the HTML file the server originally sent?
Your turn1 of 2
A page's DOM tree has 15 sibling elements at the top level, and each one has 7 child elements nested inside it. How many total child elements exist across all the top-level siblings?

JavaScript Events and Interactivity

  1. How it worksHow does an event listener sit and wait for a specific action, like a click, before running any code at all?
  2. Worked exampleWalk me through an event listener that changes a button's text to Clicked the moment it is clicked.
  3. Going furtherWhat happens when two different event listeners are attached to the exact same button?
  4. Ties togetherHow does a JavaScript event listener waiting for a click connect back to a Scratch script waiting for a green flag click?
Your turn1 of 2
A button has 14 separate event listeners attached to it, and clicking the button once fires all of them. How many total listener functions run per click?