The Odin Project Intermediate & Advanced HTML and CSS Syllabus

How do pseudo-classes differ from pseudo-elements in CSS, and how is each written?

Pseudo-classes (single colon, e.g. `:hover`, `:focus`, `:first-child`) select elements based on state or position in the tree. Pseudo-elements (double colon, e.g. `::before`, `::after`, `::first-letter`) target or create a specific part of an element that isn't a real DOM element, such as generated content.

What do CSS attribute selectors `[attr]`, `[attr="value"]`, `[attr^="val"]`, `[attr$="val"]`, and `[attr*="val"]` match?

`[attr]` — elements that have the attribute at all; `[attr="value"]` — exact value match; `^=` — value begins with the string; `$=` — value ends with the string; `*=` — value contains the string anywhere. Example: `img[src$=".png"]` matches images whose src ends in .png.

What is the default value of the CSS `position` property, and what does it mean?

`position: static`. The element sits in the normal document flow, and the offset properties `top`, `right`, `bottom`, `left`, and `z-index` have no effect on it.

Compare `position: relative` and `position: absolute`.

Relative keeps the element in normal flow (its original space is preserved) and offsets it visually from where it would normally sit. Absolute removes the element from normal flow entirely and positions it relative to its nearest positioned ancestor (any ancestor whose position is not static), or the initial containing block if none exists.

How does `position: fixed` behave?

The element is removed from normal flow and positioned relative to the viewport using top/right/bottom/left, so it stays in the same place on screen while the page scrolls — ideal for persistent navbars or floating buttons.

How does `position: sticky` behave, and how is it a hybrid of two other position values?

A sticky element behaves like `relative` (stays in normal flow) until the page scrolls past a specified threshold (e.g. `top: 0`), at which point it behaves like `fixed` and sticks in place — but only within the bounds of its parent container. Useful for section headings that stay visible while their section scrolls.

What does the CSS `calc()` function do? Give an example.

It performs arithmetic ($+$, $-$, $\times$, $\div$) inside a CSS value and, crucially, can mix different units. Example: `height: calc(100vh - 60px)` fills the viewport minus a 60px header. Note the `+` and `-` operators must be surrounded by spaces.

What do the CSS `min()` and `max()` functions do?

Each takes a comma-separated list of values and uses one of them: `min()` applies the smallest computed value and `max()` applies the largest. Example: `width: min(150px, 100%)` gives 150px when space allows, but shrinks to 100% of the container when it is narrower — a compact way to write responsive constraints.

What are the three arguments of the CSS `clamp()` function, and how does it resolve?

`clamp(minimum, ideal, maximum)`. The browser uses the ideal (often a fluid value like `2vw`) but never lets the result go below the minimum or above the maximum. Example: `font-size: clamp(1rem, 3vw, 2rem)` creates fluid type bounded between $1\,\text{rem}$ and $2\,\text{rem}$.

How do you declare a CSS custom property and how do you use it? What naming rule must the declaration follow?

Declare it inside a selector with a name starting with two dashes: `--main-color: navy;`. Use it anywhere with the `var()` function: `color: var(--main-color);`. Names are case-sensitive.

What is the purpose of the second argument in `var(--color-error, red)`?

It is a fallback value: if the custom property `--color-error` is not defined (or is invalid) for that element, the browser uses `red` instead. Fallbacks can even be nested with another `var()`.

Why are CSS custom properties commonly declared on the `:root` selector, and how does this enable theming?

`:root` matches the root `html` element with higher specificity, and custom properties inherit, so anything declared there is available to the entire document — perfect for global design tokens. Themes (e.g. dark mode) work by redeclaring the same property names under a class or inside a `@media (prefers-color-scheme: dark)` block so all dependent styles update at once.

What is caniuse.com, and how is browser support information typically used before adopting a new CSS feature?

It is a reference site showing, per browser and version, whether an HTML/CSS/JS feature is supported (with global usage percentages). Developers check it before using a new feature; a feature is generally considered safe once all common, evergreen (auto-updating) browsers have released support — brand-new features are risky because users on older versions won't get them.

Why does testing in Chrome or Firefox on iOS not prove cross-engine compatibility?

On iOS and iPadOS, Apple historically required every browser — including Chrome and Firefox — to run on WebKit, Safari's rendering engine. So all iOS browsers rendered like Safari, and a feature unsupported by WebKit was unavailable to iOS users regardless of which browser app they used; real-device or engine-accurate testing matters.

What is a CSS framework? Name two popular examples and describe how they differ in approach.

A framework is prewritten CSS (and sometimes JS) providing ready-made classes and components so you can build UIs quickly. Bootstrap is component-based (prebuilt buttons, navbars, grids), while Tailwind is utility-first (tiny single-purpose classes like `flex`, `pt-4` composed directly in markup).

What is a CSS preprocessor, and what features do tools like Sass add over plain CSS?

A preprocessor is a program that compiles an extended stylesheet language into ordinary CSS the browser can read. Sass/SCSS (also Less, Stylus) add features like variables, nesting, mixins, functions, loops, and file partials/imports, reducing repetition in large stylesheets.

What are the main disadvantages of relying on CSS frameworks, especially for learners?

Framework sites tend to look generic/similar; overriding built-in styles to customize designs can be difficult; you inherit the framework's bugs and bloat; and beginners who learn a framework before mastering CSS fundamentals struggle to debug or work outside it. Learn plain CSS first.

On an HTML `<form>` element, what do the `action` and `method` attributes specify, and when is GET vs POST used?

`action` is the URL the form data is sent to; `method` is the HTTP verb used. GET appends data to the URL as a query string and is used to retrieve data (e.g. searches); POST sends data in the request body and is used when submitting data that changes state or is sensitive (e.g. sign-ups, passwords).

Why must a form input have a `name` attribute, and what role does it play on submission?

The `name` acts as the variable/key for the input's value when the form is submitted — data is sent as name=value pairs. Inputs without a `name` are simply ignored and their data never reaches the server.

How do you associate a `<label>` with a form input, and what two benefits does this provide?

Give the input an `id` and set the label's `for` attribute to the same value (or nest the input inside the label). Benefits: clicking the label focuses/activates the input, and screen readers announce the label when the input gains focus — improving accessibility.

Compare radio buttons and checkboxes, and explain how radio buttons are grouped so only one can be selected.

Radio buttons (`type="radio"`) let the user pick exactly one option from a set; checkboxes (`type="checkbox"`) allow zero, one, or many selections. Radios become mutually exclusive by sharing the same `name` attribute value; `checked` preselects a default in either type.

What are the three values of a `<button>`'s `type` attribute, and why should you always set it explicitly inside a form?

`submit` (submits the enclosing form), `reset` (clears all form fields to defaults), and `button` (generic, no default behavior — for JS). Inside a form, `type` defaults to `submit`, so an unlabeled button can accidentally submit the form; setting it explicitly avoids surprises.

Which built-in HTML validation attributes constrain (a) whether a field may be empty, (b) text length, and (c) numeric range?

(a) `required` — the field must be filled before submission; (b) `minlength` and `maxlength` — minimum/maximum number of characters; (c) `min` and `max` — lowest/highest allowed values on number-type inputs. Violations block submission and show a browser error message.

What does the `pattern` attribute do on an input, and what should accompany it for usability?

It validates the input's value against a regular expression — the whole value must match, e.g. `pattern="[0-9]{5}"` for a 5-digit zip code (works only on text-type inputs like text, tel, email, password). Pair it with a `title`/placeholder or visible hint so users know the expected format.

Which CSS pseudo-classes let you style form fields based on their validation state?

`:valid` and `:invalid` match inputs that currently pass or fail their constraints; `:required` and `:optional` match by the presence of the `required` attribute; also `:in-range`/`:out-of-range` for numeric bounds and `:placeholder-shown` for empty fields showing a placeholder.

Why is client-side (HTML/JS) form validation never sufficient on its own?

Because it runs in the user's browser, it can be bypassed entirely — users can edit the HTML in DevTools, disable JS, or send requests directly to the server. Server-side validation must always duplicate the checks; client-side validation exists for fast feedback and UX, not security.

In a sign-up form like The Odin Project's project, why can't HTML validation attributes alone verify that "Password" and "Confirm Password" match, and what is the standard solution?

Built-in constraints (`required`, `pattern`, etc.) validate each field independently — they cannot compare two fields. You need JavaScript: listen for input/submit, compare the two values, and use the Constraint Validation API (`setCustomValidity`) or custom error styling/messages to flag a mismatch before submission.

How does CSS Grid differ from Flexbox, and when is each the better choice?

Grid is two-dimensional — it lays out rows and columns simultaneously — while Flexbox is one-dimensional, controlling a single row or column at a time (with wrapping as a workaround). Use Grid for overall page layouts and anything needing row-and-column alignment; use Flexbox for distributing items along one axis. They also work well nested together.

How do you create a grid container, and which properties define its columns, rows, and spacing? What does the `fr` unit mean?

Set `display: grid` on a parent — its direct children become grid items. `grid-template-columns` and `grid-template-rows` define track sizes (shorthand `grid-template: rows / columns`), often with `repeat()`, e.g. `repeat(3, 1fr)`. `gap` (or `row-gap`/`column-gap`) sets gutters. `1fr` is one fraction of the free space: with columns `2fr 1fr`, the first gets $\frac{2}{3}$ and the second $\frac{1}{3}$ of the available width.

In CSS Grid: (a) what is the difference between the explicit and implicit grid, and (b) how do grid line numbers relate to track count, and how are lines used to place an item?

(a) The explicit grid is what you define with `grid-template-columns/rows`; when extra items overflow it, the browser creates implicit tracks, sized by `grid-auto-rows`/`grid-auto-columns`. (b) A grid with $n$ tracks has $n+1$ numbered lines (also countable backwards from $-1$). Items are placed by line with `grid-column: start / end` and `grid-row: start / end` (or `grid-area: row-start / col-start / row-end / col-end`), and `span k` makes an item cover $k$ tracks, e.g. `grid-column: 1 / span 2`.