HTML/CSS Foundation Quest

Tracks

1. 01🏗️HTML Foundations

   0/5 lessons

   Semantic markup, document structure, and the case for retiring <div> from your first reflex

   Before any framework can hide HTML from you, you have to know what HTML is *for*. This track rebuilds the mental model: HTML elements are nouns with meaning, not styled rectangles. Semantic markup is what makes accessibility work, what gives screen readers something to say, what gives search engines structure, and — increasingly — what gives React components their natural shape. Five lessons. By the end, <div> is the last tool you reach for, not the first.

   Lesson list (5)

   • 01
     What 'Semantic HTML' Actually Means~12 min · semantic-html, accessibility, mental-model
   • 02
     The Document: The Page's Spine~12 min · document-structure, doctype, head, viewport
   • 03
     Text Elements: Headings, Paragraphs, Lists, Quotes~12 min · text, headings, lists, blockquote, inline-semantics
   • 04
     Anchors and Images: The Web's Connective Tissue~12 min · anchors, links, images, alt-text, responsive-images, picture
   • 05
     <div> Is The Last Resort, Not The First~12 min · div, span, aria, custom-elements, mental-model

   ✓Quiz · 4 questions→

2. 02♿Forms & Accessibility

   0/4 lessons

   Forms are where accessibility lives or dies. Get them right and the rest follows.

   The web is a public good, not a graphic design portfolio. This track treats accessibility as a baseline — the moral and legal floor, not an upgrade you sprinkle on at the end. We build forms the right way: labels, fieldsets, the right input types, ARIA only where the native vocabulary runs out, and keyboard navigation that actually works. Four lessons. By the end, you can build a form that passes WCAG out of the box without retrofitting.

   Lesson list (4)

   • 01
     Form Anatomy: <form>, <fieldset>, <label>, <input>, <button>~12 min · forms, label, fieldset, anatomy
   • 02
     Input Types: The Right Tool For Each Question~11 min · input-types, mobile-keyboards, validation
   • 03
     ARIA Baseline: The Practical Subset You'll Actually Use~12 min · aria, screen-reader, labels, live-regions
   • 04
     Keyboard and Focus: The Whole Web, One-Handed~12 min · keyboard, focus, tabindex, focus-visible, skip-link

   ✓Quiz · 4 questions→

3. 03🎯Selectors & The Cascade

   0/5 lessons

   How CSS picks which rule wins, and why your !important happened

   CSS feels mysterious until you understand the algorithm. Five inputs decide which rule applies to which element: which selectors match, how specific each one is, where it came from, what inherits, and modern overrides like :is(), :where(), :has(), and cascade layers. This track makes the algorithm visible. By the end, you can read someone else's stylesheet and predict the winner without opening DevTools.

   Lesson list (5)

   • 01
     The Selector Zoo: Every Pattern You'll Need~13 min · selectors, pseudo-classes, combinators, attribute-selectors
   • 02
     Specificity: The Numeric Score That Decides Ties~12 min · specificity, cascade, important
   • 03
     The Cascade In Full: Origin, Layer, Specificity, Source Order~12 min · cascade, origin, user-stylesheet, ua-default
   • 04
     Inheritance: What Flows Down, What Doesn't, And How To Steer It~11 min · inheritance, css-properties, inherit, unset, revert
   • 05
     :is(), :where(), :has() — The Selectors That Rewrote The Rules~12 min · is, where, has, modern-css, logical-selectors

   ✓Quiz · 4 questions→

4. 04📐Box Model & Layout Primitives

   0/4 lessons

   The boxes you can't see, the flow you can't escape, and the legacy patterns Flexbox finally retired

   Every element on the page is a box. The box has content, padding, border, margin — and how those four interact decides whether your layout fits. Before reaching for Flexbox or Grid, you have to know what's underneath: box-sizing, display modes, normal flow, positioning, stacking contexts, and the legacy vocabulary (float, clear, table-display) that we name only to retire. Four lessons. By the end, you can describe any layout in primitive terms without invoking magic.

   Lesson list (4)

   • 01
     The Box Model: Content, Padding, Border, Margin~11 min · box-model, box-sizing, margin-collapse, width
   • 02
     display And Normal Flow: How Elements Arrange Themselves~11 min · display, block, inline, flow, formatting-context
   • 03
     position, z-index, And The Stacking Context~12 min · position, absolute, fixed, sticky, z-index, stacking-context
   • 04
     The Legacy Vocabulary: float, clear, table-display, and Why They're Retired~11 min · float, clear, table-display, legacy

   ✓Quiz · 4 questions→

5. 05🪄Flexbox

   0/4 lessons

   One-dimensional layout. Alignment as a first-class operation. The thing you reach for 80% of the time.

   Flexbox is the layout primitive that retired three eras of CSS hacks. It lays out children along a single axis (row or column), gives you real alignment in both directions, and makes equal-sizing, gap-spacing, and reorder-on-mobile easy. Four lessons. By the end, navbars, modals, sticky footers, equal-width button rows, and the entire "vertically center this" question reduce to a handful of well-named properties.

   Lesson list (4)

   • 01
     The Flexbox Mental Model: One Axis At A Time~12 min · flexbox, main-axis, cross-axis, flex-direction, flex-wrap
   • 02
     Alignment & Justification: justify-content, align-items, align-self~11 min · justify-content, align-items, align-self, alignment
   • 03
     flex-grow, flex-shrink, flex-basis: The Sizing Triple~11 min · flex-grow, flex-shrink, flex-basis, flex-shorthand
   • 04
     Flexbox In Production: Patterns You'll Use Every Day~11 min · patterns, navbar, modal, sticky-footer, truncation

   ✓Quiz · 4 questions→

6. 06🧱CSS Grid

   0/4 lessons

   Two-dimensional layout, named areas, and the patterns Flexbox can't reach

   Grid is the layout primitive for thinking in rows AND columns simultaneously. Use it for page-level layouts, photo grids, dashboard tiles, and anywhere you need cell-precision placement. Four lessons. By the end, magazine-style layouts, responsive image galleries, dashboard grids, and overlap patterns are all reduced to a handful of declarations.

   Lesson list (4)

   • 01
     Grid's Mental Model: Rows AND Columns~12 min · grid, tracks, lines, fr, repeat, minmax
   • 02
     grid-template-areas: Layout As ASCII Art~11 min · grid-template-areas, named-areas, grid-area
   • 03
     Implicit vs Explicit Grid: When Tracks Appear Automatically~11 min · implicit-grid, grid-auto-rows, grid-auto-flow, dense
   • 04
     Layouts Flexbox Can't Do (Cleanly): Where Grid Earns Its Keep~12 min · grid, overlap, full-bleed, subgrid, patterns

   ✓Quiz · 4 questions→

7. 07⚡Responsive & Modern CSS

   0/5 lessons

   Media queries, container queries, custom properties, cascade layers, native nesting, and :has() — the 2026 toolbox

   This is the track where 2026 CSS feels different from 2018 CSS. Container queries adapt components to their container, not the viewport. Cascade layers let you order overrides intentionally. Native nesting eliminates Sass for many use cases. Custom properties are full design-system tooling. :has() removes another layer of JavaScript. Five lessons. By the end, you've internalized the features that made the entire 'I need a framework for this' instinct obsolete.

   Lesson list (5)

   • 01
     Media Queries: Adapting To Viewport, Device, And User Preferences~12 min · media-queries, responsive, mobile-first, prefers-color-scheme
   • 02
     Container Queries: Components That Adapt To Their Container~12 min · container-queries, responsive, component-driven
   • 03
     Custom Properties: Live, Scoped, Inheritable Design Tokens~12 min · custom-properties, variables, design-tokens, property
   • 04
     Cascade Layers & Native Nesting: Order And Locality, Built In~12 min · cascade-layers, layer, native-nesting, modern-css
   • 05
     :has() In Practice: Parent-State Styling Without JavaScript~12 min · has, parent-selector, modern-css, less-js

   ✓Quiz · 4 questions→

8. 08🎓Epilogue: Where The Foundation Leads

   0/3 lessons

   Tailwind, JavaScript, frameworks — how this foundation supports everything that comes next

   The foundation isn't the destination. Three short lessons that frame how HTML and CSS feed into the rest of the web stack: Tailwind as utility composition, JavaScript as the dynamic layer the CSS can't reach, and the quest-shaped path through React, Next.js, build tools, and beyond. Three lessons. By the end, you know not just where you are but where to walk next.

   Lesson list (3)

   • 01
     Tailwind: Utility-First CSS Built On The Same Primitives~10 min · tailwind, utility-first, framework
   • 02
     The JavaScript Bridge: Where Behavior Begins~10 min · javascript, behavior, progressive-enhancement
   • 03
     Where To Next: The Foundation Is Built, Now Build On It~10 min · next-steps, quest-path, shipping

   ✓Quiz · 3 questions→