CS50x: Introduction to Computer Science Web Programming Syllabus

Web Programming syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for Web Programming in CS50x: Introduction to Computer Science, not a summary of it.

1. 1

   The Internet

   2 topics

   • Routers, TCP/IP, and DNS
   • HTTP
2. 2

   HTML

   3 topics

   • Tags and Attributes
   • Semantic Markup
   • Forms
3. 3

   CSS

   3 topics

   • Properties and Styling
   • Selectors
   • Bootstrap
4. 4

   JavaScript

   3 topics

   • Variables, Conditionals, and Loops
   • Event Handling and Listeners
   • The DOM
5. 5

   Flask

   5 topics

   • Routes and Decorators
   • Requests and Responses
   • Templates with Jinja
   • Sessions and Cookies
   • AJAX
6. 6

   Final Project

   3 topics

   • Project Design and Scope
   • Implementation
   • Documentation and Presentation

Web Programming flashcards for CS50x: Introduction to Computer Science

19 of 51 cards from the Web Programming deck — real questions with worked answers.

1. What is a router, and what role does it play on the Internet?

   A router is a device that receives packets of data and forwards them toward their destination. Each router examines a packet's destination IP address and passes it along to a neighboring router closer to that destination, so data hops router-to-router across networks until it arrives.

2. What are TCP/IP, and what does each protocol in the pair do?

   TCP/IP is the pair of protocols that governs Internet communication. IP (Internet Protocol) handles addressing and routing: every machine gets an IP address so packets can be delivered. TCP (Transmission Control Protocol) provides reliable delivery: it numbers packets so they can be reassembled in order, requests retransmission of lost packets, and uses port numbers to identify which service the data is for.

3. What is the format of an IPv4 address, and roughly how many unique addresses does IPv4 support?

   An IPv4 address has the form #.#.#.# — four numbers separated by dots, each in the range $0$ to $255$ (8 bits each, 32 bits total). That allows $2^{32} \approx 4.3 \times 10^{9}$ (about 4 billion) unique addresses, which is why the larger 128-bit IPv6 ($2^{128}$ addresses) was introduced.

4. What is DNS and what problem does it solve?

   DNS (Domain Name System) is a distributed, hierarchical system of servers that translates human-friendly domain names (e.g., example.com) into numeric IP addresses. It lets users type memorable names instead of memorizing IP addresses; the browser queries DNS first, then connects to the returned IP.

5. In TCP, what is a port number, and which port numbers are conventionally used for HTTP and HTTPS?

   A port number is a numeric identifier (16 bits, so $0$ to $65535$, i.e., $2^{16}$ values) that specifies which service or program on a machine the traffic is intended for. By convention, HTTP uses port 80 and HTTPS uses port 443.

6. What is HTTP?

   HTTP (HyperText Transfer Protocol) is the application-layer protocol that governs how web browsers (clients) request web pages and how web servers respond. It is a request–response protocol: the client sends a request message (e.g., GET / HTTP/1.1) and the server replies with a status line, headers, and usually content.

7. Compare the HTTP methods GET and POST.

   GET requests data from a server and passes any parameters in the URL's query string (visible, bookmarkable, cached, limited length) — appropriate for retrieving data. POST sends parameters in the body of the request (not shown in the URL), so it is used for submitting data that changes server state or is sensitive, such as passwords or form submissions.

8. What do the HTTP status codes 200, 301, 403, 404, and 500 mean?

   200 OK — request succeeded. 301 Moved Permanently — resource has a new URL; browser redirects (Location header). 403 Forbidden — client lacks permission. 404 Not Found — the requested resource does not exist on the server. 500 Internal Server Error — the server's own code crashed or failed (e.g., a bug in the web application).

9. Identify the components of the URL https://www.example.com/path?q=cats

   https:// — the protocol (HTTP secured with encryption). www — the hostname/subdomain of a server. example.com — the domain name (example) plus top-level domain (.com). /path — the path to a resource on the server. ?q=cats — the query string: HTTP parameters as key=value pairs after ?, with multiple pairs separated by &.

10. What is the difference between HTTP and HTTPS?

    HTTPS is HTTP with encryption (TLS/SSL). All requests and responses are encrypted in transit, so intermediaries (routers, eavesdroppers) cannot read parameters, cookies, or content. HTTPS conventionally uses port 443 instead of HTTP's port 80.

11. In HTML, what is the difference between a tag and an attribute?

    A tag marks the start (and usually end) of an element and defines its type, e.g., <p> ... </p> for a paragraph. An attribute is a key=value modifier placed inside the opening tag that configures the element's behavior or metadata, e.g., <a href="page.html"> — href is an attribute of the anchor tag.

12. What does the HTML element <a href="https://example.com">Click here</a> do, and what is the role of href?

    The <a> (anchor) tag creates a hyperlink. The href attribute specifies the destination URL the browser navigates to when the link's content ("Click here") is clicked. Note the displayed text can differ from the actual destination — a technique exploited by phishing.

13. Which two attributes should an <img> tag include, and what does each do?

    src — the path or URL of the image file to display; alt — alternative text describing the image, shown if the image fails to load and read aloud by screen readers for accessibility. <img> is a void (self-closing) element with no closing tag.

14. What is semantic markup in HTML?

    Semantic markup means using tags that describe the meaning/role of content rather than its appearance — e.g., <header>, <nav>, <main>, <section>, <article>, <footer> instead of generic <div> containers. The tag name itself conveys what the content is.

15. Give two practical benefits of using semantic HTML elements instead of generic <div> and <span>.

    1) Accessibility: screen readers and assistive technologies can identify page regions (navigation, main content) and let users jump between them. 2) Machine readability/SEO: search engines and other software better understand page structure. It also makes code more readable and maintainable for developers.

16. What is the semantic difference between <strong>/<em> and <b>/<i>?

    <strong> and <em> are semantic: they convey that text has strong importance or emphasis (meaning), which screen readers can vocalize. <b> (bold) and <i> (italic) are purely presentational, describing only how text should look. Visually they often render the same, but <strong>/<em> carry meaning.

17. In an HTML <form>, what do the action and method attributes specify?

    action specifies the URL (route) to which the form data is submitted, e.g., action="/register". method specifies the HTTP method used to submit — get puts fields in the URL's query string, while post sends them in the request body (used for sensitive or state-changing data).

18. Name common values of the type attribute on an HTML <input> element and what they provide.

    type="text" (plain text box), "password" (masked input), "email" and "number" (browser-side format validation), "checkbox", "radio" (choose one of a group), "submit" (button that submits the form). Related attributes: placeholder (hint text), required (must be filled), autocomplete, autofocus.

19. Why must a form input have a name attribute, and how does it appear in a GET submission?

    The name attribute becomes the key under which the input's value is sent to the server; inputs without name are not submitted. With method="get", each pair appears in the query string, e.g., /search?q=cats — here q is the input's name and cats is the user's value. Server code reads the value by that key.

See more Web Programming flashcards →

Planning Web Programming for CS50x: Introduction to Computer Science

Web Programming (CS50x: Introduction to Computer Science) FAQ