The Odin Project Foundations Syllabus

What is the purpose of an SSH key when connecting to GitHub?

An SSH key pair (private key kept on your machine, public key uploaded to GitHub) lets you authenticate securely without typing a username/password each time you push or pull. The private key must never be shared.

What is Git, in one definition?

Git is a free, open-source distributed version control system: it records snapshots (commits) of a project's history over time, letting you review, revert, and collaborate on changes safely.

What is the difference between Git and GitHub?

Git is the version control software that runs locally on your computer and tracks changes. GitHub is an online hosting service for Git repositories, used to store remote copies and collaborate. You can use Git without GitHub, but not vice versa.

Describe the three 'states' a file change passes through in the basic Git workflow.

1) Modified: changed in the working directory but not tracked yet. 2) Staged: added to the staging area with `git add`, marked for the next commit. 3) Committed: saved as a permanent snapshot in the repository with `git commit`.

What is the difference between `git init` and `git clone`?

`git init` creates a brand-new empty Git repository in the current directory. `git clone <url>` downloads an existing remote repository (e.g., from GitHub) to your machine, including its full history, and automatically sets the remote origin.

What does `git add` do, and what does `git add .` mean?

`git add <file>` places a file's current changes into the staging area so they will be included in the next commit. `git add .` stages all changed files in the current directory and below.

What does `git commit -m "message"` do?

It records a permanent snapshot of everything currently in the staging area into the repository's history, labeled with the given commit message and your configured author identity.

What does `git push origin main` do, and what do 'origin' and 'main' refer to?

It uploads your local commits to the remote repository. 'origin' is the default name for the remote (e.g., your GitHub repo), and 'main' is the branch being pushed.

What is the difference between `git status` and `git log`?

`git status` shows the current state of the working directory and staging area (which files are modified, staged, or untracked). `git log` shows the history of commits already made, with their messages, authors, and dates.

Name and describe the parts of a typical HTML element.

An opening tag (e.g., <p>), the content, and a closing tag (e.g., </p>). Tags are keywords in angle brackets; the closing tag adds a forward slash. Opening tags may also carry attributes (name="value" pairs) that give extra information.

What is a void (self-closing) element in HTML? Give examples.

An element that has no content and therefore no closing tag. Examples: <br> (line break), <img> (image), <input>, <meta>, <link>.

Why must text be wrapped in elements like <p> instead of typed directly into the HTML body?

Browsers collapse sequences of whitespace and newlines in HTML into a single space, so raw text loses its formatting. Wrapping text in <p> elements creates proper paragraphs with spacing, and semantic elements also help accessibility and SEO.

What does the <!DOCTYPE html> declaration do?

Placed on the first line of every HTML document, it tells the browser which version of HTML to use; <!DOCTYPE html> specifies HTML5 and makes the browser render in standards mode.

What are the roles of the <head> and <body> elements in an HTML document?

<head> contains meta-information about the page (charset, title, linked stylesheets) that is not displayed as content. <body> contains all the content actually shown to the user: text, images, links, lists, etc.

What does <meta charset="UTF-8"> do and why is it important?

It sets the document's character encoding to UTF-8, ensuring the browser correctly displays a huge range of characters and symbols from many languages instead of garbled text.

Why should a website's homepage file be named index.html?

Web servers look for index.html by default when a user requests a directory or the site root; naming the homepage index.html means it loads automatically without the filename in the URL.

How many heading levels does HTML provide, and how should they be used?

Six: <h1> (largest/most important) through <h6> (smallest). Use them hierarchically to reflect document structure — typically one <h1> per page for the main title, with lower levels for subsections — not just for text size.

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

<strong> and <em> are semantic: <strong> marks text as important (usually bold) and <em> adds emphasis (usually italic); both convey meaning to screen readers. <b> and <i> only change appearance (bold/italic) without semantic meaning.

How do you write a comment in HTML, and what is it for?

Between <!-- and -->, e.g., <!-- this is a comment -->. Comments are ignored by the browser and are used to leave notes for yourself or other developers.

Compare <ul>, <ol>, and <li> in HTML.

<ul> creates an unordered (bulleted) list for items where order doesn't matter; <ol> creates an ordered (numbered) list for items where sequence matters; each item in either list is wrapped in an <li> element.

How do you create a hyperlink in HTML?

With the anchor element: <a href="https://example.com">link text</a>. The href attribute holds the destination URL; without href the anchor loses its link behavior.

What is the difference between absolute and relative links, and which should you use to link pages within your own site (e.g., a Recipes project)?

An absolute link is a full URL including protocol and domain (https://site.com/page). A relative link gives a path relative to the current file (e.g., pages/recipe.html or ../index.html). Use relative links between pages of the same site so they keep working when the domain or location changes.

What are the two key attributes of the <img> element, and what two purposes does the alt attribute serve?

src gives the path/URL of the image (required), and alt gives alternative text. alt (1) is read by screen readers for accessibility and (2) is displayed in place of the image if it fails to load.

When opening a link in a new tab with target="_blank", which rel values should you add and why?

rel="noopener noreferrer". noopener prevents the new page from accessing the original page via window.opener (blocking tabnabbing/phishing attacks), and noreferrer additionally hides the referrer information.

What are the conventions for writing a good Git commit message?

A short subject line (about 50 characters or fewer), capitalized, in the imperative mood ('Add search bar', not 'Added'), with no period; then a blank line; then an optional body wrapped at about 72 characters explaining what changed and why, not how.

Name the parts of a CSS rule.

A selector (which elements to target), followed by a declaration block in curly braces containing one or more declarations; each declaration is a property and a value separated by a colon and ended with a semicolon, e.g., p { color: red; }.

What is the difference between a class selector and an ID selector in CSS?

A class (.classname, from class="...") can be reused on many elements, and an element can have several classes. An ID (#idname, from id="...") must be unique — one per element and one element per page — and has higher specificity. Prefer classes; reserve IDs for special cases.

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

1) External: a separate .css file linked with <link rel="stylesheet" href="styles.css"> in the head (preferred: keeps HTML and CSS separate, reusable across pages). 2) Internal: rules inside a <style> element in the head. 3) Inline: a style attribute directly on an element (avoid; no selectors, hard to maintain).

What do the universal selector, type selector, and grouping do in CSS?

The universal selector * targets every element on the page. A type (element) selector targets all elements of a given tag, e.g., div. Grouping lets one rule apply to several selectors separated by commas, e.g., h1, h2 { color: blue; }, avoiding repetition.

In CSS, what is the difference between chaining selectors and the descendant combinator?

Chaining writes selectors together with no space (e.g., .subsection.header) to match elements that have both attributes at once. The descendant combinator uses a space (e.g., .ancestor .child) to match elements that are nested anywhere inside an element matching the first selector.