CS50x: Introduction to Computer Science Web Programming Syllabus

What are the three ways to apply CSS to an HTML page, and which is generally preferred?

1) Inline: a style attribute directly on an element (<p style="color:red">). 2) Internal: rules inside a <style> element, typically in <head>. 3) External: a separate .css file linked with <link rel="stylesheet" href="styles.css">. External stylesheets are preferred — they separate content from presentation and can be reused across many pages.

When multiple CSS rules conflict, what is the order of specificity that decides which style wins?

From most to least specific: inline styles (style attribute), then id selectors (#id), then class selectors (.class), then type/element selectors (e.g., p, h1). The more specific selector's declarations override less specific ones; among equal specificity, the later rule wins.

In CSS, how do you select elements by type, by class, and by id? Give the syntax.

Type selector: the bare tag name — h1 { ... } styles all <h1> elements. Class selector: a dot before the class name — .highlight { ... } styles all elements with class="highlight" (a class can be shared by many elements). Id selector: a hash — #banner { ... } styles the single element with id="banner" (an id should be unique per page).

What is the difference between the CSS descendant combinator (div p) and the child combinator (div > p)?

div p (space) selects every <p> that is anywhere inside a <div> — children, grandchildren, and deeper descendants. div > p selects only <p> elements that are immediate (direct) children of a <div>, not ones nested deeper.

What are CSS pseudo-classes and attribute selectors? Give an example of each.

A pseudo-class selects an element in a particular state, written with a colon: button:hover { ... } applies only while the mouse is over the button. An attribute selector matches elements by an attribute value, written in brackets: input[type="submit"] { ... } styles only inputs whose type is submit.

What is Bootstrap and how do you add it to a web page?

Bootstrap is a popular free CSS (and JavaScript) framework providing pre-written styles and components — nicely styled buttons, tables, forms, navbars, alerts. You include it by adding its CDN <link> for CSS in <head> (and optionally its <script> before </body>), then apply its classes, e.g., <button class="btn btn-primary">.

How does Bootstrap's grid layout system work?

Bootstrap divides horizontal space into 12 equal columns. Inside a container you create a row (class="row") and give children column classes such as col-4 (spanning $\frac{4}{12} = \frac{1}{3}$ of the width). Breakpoint-infixed classes like col-md-6 make layouts responsive, so columns stack or resize at different screen widths.

In modern JavaScript, how do let and const differ when declaring variables?

let declares a block-scoped variable whose value can be reassigned. const declares a block-scoped variable that cannot be reassigned after initialization. Both are preferred over the older var, which is function-scoped and prone to bugs. Example: let counter = 0; const MAX = 10;

In JavaScript, what is the difference between the == and === comparison operators?

== is loose equality: it converts operands to a common type before comparing, so '5' == 5 is true. === is strict equality: it compares both value and type with no coercion, so '5' === 5 is false. Best practice is to use === (and !==) to avoid unintended type-coercion bugs.

Write the structure of a JavaScript for loop and an if / else if / else conditional.

Loop: for (let i = 0; i < n; i++) { ... } — initialization; condition checked before each iteration; update after each iteration. (JavaScript also has while and do...while loops.) Conditional: if (x > 0) { ... } else if (x < 0) { ... } else { ... } — branches chosen by the first true condition.

What is the syntax of addEventListener in JavaScript, and what does it do?

element.addEventListener('event', function) — e.g., button.addEventListener('click', function() { alert('Clicked!'); }); It registers a callback (event handler/listener) that the browser invokes whenever the named event (like 'click') occurs on that element. This attaches behavior in JS instead of inline onclick attributes.

Why do developers wrap DOM-manipulating JavaScript inside a listener for the DOMContentLoaded event?

Because a <script> in <head> runs before the page's HTML below it has been parsed, so querySelector would return null for elements that don't exist yet. document.addEventListener('DOMContentLoaded', function() { ... }) delays the code until the entire HTML document has been parsed and the DOM is built, guaranteeing elements are available.

Name five common browser events you can listen for and when each fires.

click — user clicks an element; submit — a form is submitted; change — a form control's value changes (e.g., a <select> choice); keyup / keydown — a keyboard key is released / pressed (used for as-you-type features); mouseover — the cursor moves onto an element. Others include load, blur, focus, and scroll.

What is the DOM?

The DOM (Document Object Model) is the browser's in-memory, tree-structured representation of a web page: the document is the root, and every element, attribute, and piece of text is a node in a hierarchy mirroring the HTML nesting. JavaScript can read and modify this tree via the global document object, changing the page dynamically without reloading.

What do document.querySelector and document.querySelectorAll do?

document.querySelector(selector) returns the first element in the DOM matching a CSS selector — e.g., querySelector('#greeting'), querySelector('.item'), querySelector('h1'). document.querySelectorAll(selector) returns all matching elements as a NodeList you can iterate over. They are the standard way to grab elements before reading or modifying them in JavaScript.

After selecting a DOM element in JavaScript, how can you change its content, style, and attributes?

Content: element.innerHTML = '<b>Hi</b>'; or element.textContent / element.innerText for plain text. Style: element.style.property, e.g., element.style.color = 'red';. Attributes: element.setAttribute('href', url) or direct properties like element.value for inputs. You can also toggle classes with element.classList.add/remove/toggle.

In Flask, how do you associate a URL with a Python function? Give the syntax.

With the @app.route decorator applied to a view function: @app.route("/") def index(): return render_template("index.html") When a request arrives for that path, Flask calls the decorated function and sends back whatever it returns as the HTTP response.

What is a decorator in Python, as used by Flask's @app.route?

A decorator is a function that takes another function and extends or modifies its behavior, applied with the @ syntax above a function definition. @app.route("/path") registers the decorated function in Flask's URL map, so Flask knows to invoke it whenever an HTTP request matches that path.

By default, which HTTP method does a Flask route accept, and how do you allow POST as well?

By default a route accepts only GET. To accept others, pass the methods argument: @app.route("/login", methods=["GET", "POST"]). Inside the function you branch on request.method — commonly rendering a form on GET and processing the submission on POST.

In Flask, what is the difference between request.args and request.form?

request.args holds parameters from the URL's query string, i.e., data sent via GET (e.g., request.args.get("q")). request.form holds parameters sent in the body of a POST request, such as submitted form fields (e.g., request.form.get("username")). Using .get(key) returns None instead of erroring when the key is missing.

What happens when a Flask view function returns render_template("page.html", name=value)?

Flask loads page.html from the templates/ folder, has Jinja substitute the passed keyword variables into the template's placeholders, and returns the resulting HTML as the body of an HTTP response (status 200 by default) that is sent back to the client's browser.

In Flask, what do redirect() and url_for() do, and how are they used together?

redirect(location) returns an HTTP redirect response telling the browser to request a different URL. url_for("function_name") generates the URL registered for a given view function. Combined — return redirect(url_for("index")) — they send the user to another page after an action, e.g., after a successful POST (the post/redirect/get pattern).

In Jinja templates, what is the difference between {{ ... }} and {% ... %}?

{{ expression }} is an output placeholder: the expression's value (a variable passed from Flask, e.g., {{ name }}) is substituted into the rendered HTML. {% statement %} performs template logic without direct output: conditionals ({% if x %}...{% endif %}), loops ({% for item in items %}...{% endfor %}), and inheritance tags like {% extends %} and {% block %}.

How does Jinja template inheritance eliminate duplicated HTML across pages?

A base template (layout.html) contains the shared boilerplate and declares insertion points: {% block body %}{% endblock %}. Each child template starts with {% extends "layout.html" %} and supplies only its unique content inside {% block body %} ... {% endblock %}. Rendering the child merges its blocks into the layout, so headers/footers live in one file.

What is an HTTP cookie and how does the server set one?

A cookie is a small piece of key=value data that a server asks the browser to store, via the Set-Cookie: key=value response header. On every subsequent request to that server, the browser automatically sends it back in a Cookie header. Cookies commonly carry a session identifier so the server can recognize a returning user (which also enables tracking).

What is a session in web programming, and how do cookies make sessions possible?

A session is per-user state kept on the server (e.g., who is logged in, a shopping cart) across multiple requests — necessary because HTTP itself is stateless. The server stores the data under a unique session ID and sends only that ID to the browser as a cookie; each later request carries the cookie, letting the server look up that user's data.

In Flask, how do you use sessions to remember a logged-in user?

Configure Flask-Session (or Flask's signed cookie sessions), then treat session as a dictionary: on login, session["name"] = request.form.get("name"); to read, session.get("name"); to log out, session.clear(). Flask handles the underlying cookie automatically, so each visitor sees only their own session data.

What is AJAX, and why is it useful?

AJAX (Asynchronous JavaScript and XML) is the technique of having JavaScript make HTTP requests in the background, after the page loads, and update parts of the page with the response — without a full page reload. It enables dynamic features like live search suggestions, infinite scroll, and chat, and today typically exchanges JSON rather than XML.

How do you make an AJAX request with the JavaScript fetch API and use the JSON response?

fetch(url) returns a Promise for the response; chain conversions and handlers: fetch('/search?q=' + query) .then(response => response.json()) .then(data => { /* update the DOM with data */ }); Or with async/await: const response = await fetch(url); const data = await response.json(); — then modify the page using the parsed data.

When designing a web project, what is scope, and what is the recommended way to define it (as in CS50's final project advice)?

Scope is the boundary of what the project will actually do. Best practice: define a good outcome (the MVP — minimum viable product you're confident you can finish), a better outcome (what you expect to achieve), and a best outcome (stretch goals). Start deliberately small and add features incrementally, rather than over-promising and failing to finish.

During implementation of a web project, what development practices help you make steady, verifiable progress?

Build iteratively: implement and fully test one small feature at a time rather than everything at once. Keep concerns separated (HTML structure, CSS styling, JS behavior, server logic in distinct files/layers). Use version control (git) to save working checkpoints, test in the browser frequently, and only move on when the current piece works — making bugs easy to localize.