The Odin Project Intermediate & Advanced HTML and CSS Syllabus

Intermediate & Advanced HTML and CSS syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for Intermediate & Advanced HTML and CSS in The Odin Project, not a summary of it.

1. 1

   Intermediate HTML Concepts

   3 topics

   • Emmet
   • SVG
   • Tables
2. 2

   Intermediate CSS Concepts

   9 topics

   • Default Styles
   • CSS Units
   • More Text Styles
   • Advanced Selectors
   • Positioning
   • CSS Functions
   • Custom Properties
   • Browser Compatibility
   • Frameworks and Preprocessors
3. 3

   Forms

   3 topics

   • Form Basics
   • Form Validation
   • Project: Sign-up Form
4. 4

   Grid

   6 topics

   • Introduction to Grid
   • Creating a Grid
   • Positioning Grid Elements
   • Advanced Grid Properties
   • Using Flexbox and Grid
   • Project: Admin Dashboard
5. 5

   Animation

   3 topics

   • Transforms
   • Transitions
   • Keyframes
6. 6

   Accessibility

   8 topics

   • Introduction to Web Accessibility
   • The Web Content Accessibility Guidelines (WCAG)
   • Semantic HTML
   • Accessible Colors
   • Keyboard Navigation
   • Meaningful Text
   • WAI-ARIA
   • Accessibility Auditing
7. 7

   Responsive Design

   5 topics

   • Introduction to Responsive Design
   • Natural Responsiveness
   • Responsive Images
   • Media Queries
   • Project: Homepage

Intermediate & Advanced HTML and CSS flashcards for The Odin Project

23 of 50 cards from the Intermediate & Advanced HTML and CSS deck — real questions with worked answers.

1. What is Emmet and why is it useful when writing HTML and CSS?

   Emmet is a toolkit built into editors like VS Code that expands short, CSS-selector-like abbreviations into complete HTML or CSS. It dramatically speeds up writing markup, e.g. typing an abbreviation and pressing Tab generates full boilerplate or nested element structures.

2. In Emmet abbreviations, what do the operators `>`, `+`, `*`, and `^` mean, and what does `ul>li*3` expand to?

   `>` creates a child, `+` creates a sibling, `*` multiplies an element, and `^` climbs up one level in the tree. `ul>li*3` expands to a `<ul>` containing three `<li>` elements.

3. What does SVG stand for, and how does an SVG image fundamentally differ from a raster image (JPG/PNG)?

   SVG stands for Scalable Vector Graphics. It is an XML-based format that describes images with shapes, paths, and math rather than a grid of pixels, so SVGs scale to any size without losing quality and usually stay small in file size.

4. For which use cases are SVGs a good choice, and when are they a poor choice?

   Good: icons, logos, simple illustrations, graphs/charts, and graphics that must scale, be animated, or be manipulated with CSS/JS. Poor: complex, photorealistic images — storing that much detail as vector data makes the file enormous, so raster formats are better.

5. What are the two main ways to put an SVG on a web page, and what is the key trade-off between them?

   Linked (via `<img src>` or a CSS `background-image`) versus inline (pasting the `<svg>` markup directly into the HTML). Inline SVG lets CSS and JavaScript access and style the SVG's internal elements, but it bloats the HTML and cannot be cached separately; linked SVG is cleaner and cacheable but its internals are not accessible.

6. What does the `viewBox` attribute of an `<svg>` element define?

   It defines the SVG's internal coordinate system and aspect ratio using four values: min-x, min-y, width, and height. It maps the drawing's coordinates onto the rendered viewport, enabling scaling, panning, and zooming of the graphic.

7. Which four HTML elements form the basic structure of a table, and what does each represent?

   `<table>` wraps the whole table, `<tr>` defines a table row, `<th>` defines a header cell (bold and centered by default, with semantic/accessibility meaning), and `<td>` defines a standard data cell.

8. What are `<thead>`, `<tbody>`, and `<tfoot>` used for, and what is the purpose of `<caption>`?

   They group a table's header rows, main body rows, and footer/summary rows respectively, adding structure for styling and accessibility. `<caption>` provides a visible title/description of the table, which helps screen-reader users understand its purpose.

9. In HTML tables, what do the `colspan` and `rowspan` attributes do?

   They make a single cell span multiple columns (`colspan`) or multiple rows (`rowspan`). For example `<td colspan="2">` makes the cell occupy the width of two columns.

10. What is the user-agent stylesheet, and why do links appear blue and `<h1>` text appears large even with no CSS written?

    It is the browser's built-in default stylesheet applied to every page. Elements like headings, links, lists, and buttons get default margins, sizes, and colors from it, which is why unstyled HTML still has visible formatting — and why defaults can differ slightly between browsers.

11. What is the difference between a CSS reset (e.g., Meyer reset) and Normalize.css?

    A reset strips away virtually all browser default styles (margins, padding, list styles, etc.) so you start from a blank slate. Normalize.css instead keeps useful defaults but adjusts them so they render consistently across all browsers, and fixes common browser bugs.

12. In CSS, what is the difference between absolute and relative units? Give examples of each.

    Absolute units are fixed and always the same size regardless of context — e.g. `px`, `in`, `cm` (`px` is the only absolute unit commonly used on screens). Relative units are computed from something else — e.g. `em` and `rem` (font-size based), `%` (parent based), and `vh`/`vw` (viewport based).

13. What is the difference between `em` and `rem`, and which does The Odin Project recommend for font sizes?

    `1em` equals the font-size of the element itself (or of its parent when used on `font-size`), so values compound through nesting. `1rem` always equals the font-size of the root (`html`) element, so it is predictable. `rem` is recommended for font sizes because it respects the user's browser font-size setting without compounding.

14. What do the viewport units `vh`, `vw`, `vmin`, and `vmax` represent?

    `1vh` is $\frac{1}{100}$ of the viewport height and `1vw` is $\frac{1}{100}$ of the viewport width. `1vmin` is $\frac{1}{100}$ of the smaller viewport dimension and `1vmax` is $\frac{1}{100}$ of the larger one. `height: 100vh` makes an element fill the full viewport height.

15. What does the CSS percentage unit (%) size an element relative to?

    The corresponding dimension of its parent (containing block). For example, `width: 50%` makes the element half the width of its parent — not half the screen — so its size changes dynamically as the parent resizes.

16. What is the `@font-face` rule used for, and what are its two essential descriptors?

    It lets you define and load a custom (self-hosted) font for use on your site. At minimum you provide `font-family` (the name you'll reference in your CSS) and `src` (the URL and format of the font file). Afterwards you use the declared name in `font-family` rules.

17. What is a font stack, and why should `font-family` always end with a generic family like `sans-serif`?

    A font stack is a comma-separated list of fonts, e.g. `font-family: "Roboto", Helvetica, Arial, sans-serif;`. The browser uses the first font that is available; ending with a generic family (serif, sans-serif, monospace) guarantees a reasonable fallback if none of the named fonts load — the basis of "web-safe" typography.

18. Which three CSS declarations are required together to truncate a single line of text with an ellipsis (…)?

    `overflow: hidden;` plus `white-space: nowrap;` plus `text-overflow: ellipsis;`. Without hiding overflow and preventing wrapping, `text-overflow: ellipsis` has no visible effect.

19. What is the difference between the descendant combinator (space) and the child combinator (`>`) in CSS selectors?

    `A B` (descendant) selects every `B` nested anywhere inside `A`, at any depth. `A > B` (child) selects only `B` elements that are direct children of `A` — one level down, nothing deeper.

20. What is the difference between the adjacent sibling combinator (`+`) and the general sibling combinator (`~`)?

    `A + B` selects a `B` only when it immediately follows `A` as the very next sibling. `A ~ B` selects every `B` that follows `A` anywhere among its later siblings, not just the immediate next one.

21. 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.

22. 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.

23. 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.

See more Intermediate & Advanced HTML and CSS flashcards →

Planning Intermediate & Advanced HTML and CSS for The Odin Project

Intermediate & Advanced HTML and CSS (The Odin Project) FAQ