Harvard CS50 Web Programming with Python and JavaScript Flashcards

Question 1

What are semantic HTML5 elements?

Accepted Answer

Semantic HTML5 elements clearly describe their meaning to both the browser and the developer. They improve accessibility, SEO, and code readability by providing structure beyond just presentation, making the purpose of content explicit.

Question 2

Give examples of common semantic HTML5 elements and their purpose.

Accepted Answer

Examples include: * `

`: Introduces content, often containing navigation or a logo. * `

Question 3

Explain the purpose of CSS Flexbox.

Accepted Answer

CSS Flexbox (Flexible Box Layout) is a one-dimensional layout module designed for arranging items in a container, either in a row or a column. It makes distributing space among items and aligning them much easier and more efficient, especially for dynamic content.

Question 4

Describe the main difference between `flex-direction: row` and `flex-direction: column`.

Accepted Answer

*   `flex-direction: row`: Arranges flex items horizontally, from left to right (default). The main axis runs horizontally.
*   `flex-direction: column`: Arranges flex items vertically, from top to bottom. The main axis runs vertically.

Question 5

Explain the purpose of CSS Grid.

Accepted Answer

CSS Grid Layout is a two-dimensional layout system for the web. It allows developers to define rows and columns, and then place content into these grid cells, making it ideal for designing complex page layouts with precise control over both horizontal and vertical alignment.

Question 6

How do `grid-template-columns` and `grid-template-rows` work in CSS Grid?

Accepted Answer

*   `grid-template-columns`: Defines the number and width of columns in the grid. E.g., `grid-template-columns: 1fr 2fr 1fr;` creates three columns with relative widths.
*   `grid-template-rows`: Defines the number and height of rows in the grid. E.g., `grid-template-rows: auto 100px;` creates two rows, one auto-sized and one 100px tall.

Question 7

What is the Document Object Model (DOM) in JavaScript?

Accepted Answer

The DOM is a programming interface for web documents. It represents the page structure as a tree of objects, where each node is an object representing an HTML element. JavaScript can interact with this tree to dynamically change the content, structure, and style of a web page.

Question 8

How do you select an element by its ID using JavaScript?

Accepted Answer

You use the `document.getElementById()` method.
```javascript
const myElement = document.getElementById('myUniqueId');
```
This returns the element object with the specified ID, or `null` if not found.

Question 9

What is AJAX and why is it used in web development?

Accepted Answer

AJAX (Asynchronous JavaScript and XML) is a set of web development techniques that allows web pages to send and retrieve data from a server asynchronously in the background without interfering with the display and behavior of the existing page. It enables dynamic content updates without full page reloads, improving user experience.

Question 10

Name and explain two key ES6 features.

Accepted Answer

*   **Arrow Functions:** A more concise way to write function expressions, often used for anonymous functions. They also handle the `this` keyword differently, inheriting it from the parent scope.
*   **`let` and `const`:** New keywords for variable declaration. `let` allows block-scoped variables that can be reassigned, while `const` declares block-scoped constants that cannot be reassigned after initialization.
*   **Template Literals:** String literals allowing embedded expressions and multi-line strings using backticks (`` ` ``). E.g., `` `Hello, ${name}!` ``.

Question 11

How do `async` and `await` simplify asynchronous JavaScript code?

Accepted Answer

`async` and `await` are syntactic sugar built on top of Promises, making asynchronous code look and behave more like synchronous code.
*   An `async` function always returns a Promise.
*   The `await` keyword can only be used inside an `async` function and pauses the execution of the `async` function until the Promise it's waiting for settles (resolves or rejects). This avoids callback hell and makes error handling easier.

Question 12

What is the purpose of a Django model?

Accepted Answer

A Django model is a Python class that defines the structure and behavior of data stored in a database. Each model maps to a single database table, and each attribute of the model represents a column in that table. Models provide an Object-Relational Mapper (ORM) interface for interacting with the database.

Question 13

How do you define a field in a Django model?

Accepted Answer

You define fields as class attributes within the model class, using Django's field types from `django.db.models`.
```python
from django.db import models

class Product(models.Model):
    name = models.CharField(max_length=100)
    price = models.DecimalField(max_digits=6, decimal_places=2)
    in_stock = models.BooleanField(default=True)
```

Question 14

What is a Django view and what is its primary responsibility?

Accepted Answer

A Django view is a Python function or class that receives a web request and returns a web response. Its primary responsibility is to encapsulate the logic for processing a specific URL, interacting with models (database), and rendering templates to generate the HTML response.

Question 15

How do Django URLs map requests to views?

Accepted Answer

Django uses a `urls.py` file (or multiple files) to define URL patterns. Each pattern is a regular expression or string that matches a specific URL path and maps it to a corresponding view function or class. When a request comes in, Django tries to match its URL against these patterns to determine which view should handle it.

Question 16

Write a basic SQL query to select all columns from a table named `users`.

Accepted Answer

```sql
SELECT * FROM users;
```

Question 17

Explain the concept of an Object-Relational Mapper (ORM).

Accepted Answer

An ORM is a programming technique that maps objects in an application's code to data in a relational database. It allows developers to interact with the database using an object-oriented paradigm (e.g., Python objects) instead of writing raw SQL queries, abstracting away database-specific details.

Question 18

How does Django's ORM simplify database interactions?

Accepted Answer

Django's ORM allows developers to create, retrieve, update, and delete database records using Python objects and methods, rather than writing raw SQL. For example, instead of `SELECT * FROM products WHERE price > 10;`, you might write `Product.objects.filter(price__gt=10)`. This makes code more readable, less error-prone, and database-agnostic.

Question 19

What is a React component?

Accepted Answer

A React component is an independent, reusable piece of UI. It's a JavaScript function or class that optionally takes inputs (`props`) and returns React elements describing what should appear on the screen. Components allow you to split the UI into independent, reusable pieces, and think about each piece in isolation.

Question 20

Explain the difference between `state` and `props` in React.

Accepted Answer

*   `Props` (short for properties) are read-only inputs passed from a parent component to a child component. They are immutable and allow components to communicate.
*   `State` is data managed within a component itself. It is mutable and can change over time, typically in response to user actions or network responses. When `state` changes, the component re-renders.

Question 21

How do you pass data from a parent component to a child component in React?

Accepted Answer

Data is passed from parent to child components using `props`. The parent component renders the child component and passes data as attributes, which the child component receives in its `props` object. ```jsx // Parent Component function Parent() { const data = "Hello from Parent"; return ; } // Child Component function Child(props) { return

{props.message}

; } ```

Question 22

What is the purpose of the `useState` hook in React?

Accepted Answer

The `useState` hook allows functional components to manage `state`. It returns a pair: the current state value and a function that lets you update it. When the state is updated using this function, React re-renders the component.
```javascript
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  // ...
}
```

Question 23

Describe the concept of "unidirectional data flow" in React.

Accepted Answer

Unidirectional data flow (or one-way data binding) means that data in a React application flows in a single direction: from parent components down to child components via `props`. This makes the application's data flow predictable, easier to understand, and simpler to debug, as changes in child components cannot directly affect parent components.

Harvard CS50 Web Programming with Python and JavaScript

Cards in this deck

Related Flashcard Sets

JLPT N5 - Essential Grammar & Kanji

Kubernetes Fundamentals & Container Orchestration

Pharmacology - Drug Classes & Mechanisms of Action

CompTIA Security+ (SY0-601) - Threats, Attacks & Vulnerabilities