Examius
🌍 The Odin Project · flashcards
The Odin Project Foundations Flashcards
50 question-and-answer cards covering Foundations as it is examined in The Odin Project. 24 of them are printed below, taken from across the deck — no signup, no paywall on the preview.
24 sample cards from the Foundations deck
Sampled from the end of the deck, so these are different cards from the ones shown on the syllabus page.
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.
What this deck covers
The Foundations deck follows the The Odin Project Foundations syllabus — 6 chapters and 35 topics — so questions land on material that is genuinely examinable rather than trivia around it. That works out to roughly 8.3 cards per chapter.
Answers are written to be recallable, not just readable — averaging about 218 characters, which is long enough to carry the reasoning and short enough to say out loud.
A deck like this earns its keep on the second and third pass. Read the syllabus first so you know the shape of the subject, then use the cards to find the specific facts that have not stuck.
Foundations flashcards FAQ
How many Foundations flashcards are in this The Odin Project deck?
50 cards. This page previews 24 of them, sampled evenly across the deck so you can judge the difficulty before installing anything.
Are these The Odin Project flashcards free?
Yes. The preview here is free to read with no signup, and the full 50-card deck is free inside the Examius app.
What do the Foundations cards cover?
They follow the The Odin Project Foundations syllabus — 6 chapters and 35 topics — so the questions track what is actually examinable.
How should I use these flashcards?
Read the syllabus first so you know the shape of the subject, then drill the deck. Examius schedules each card with spaced repetition, so cards you keep missing come back sooner and ones you know drift further apart.