12 micro-topics in Web Interface, each with the evidence that proves you have it and the written reason behind every link. Before you start, it rests on 1 other domain. Downstream, it holds up 1 domain.
12 topics · depth 0–6 of 16 · 15 internal links · 2 in · 1 out
Load-bearing links first. Each one says what in this domain rests on what outside it, and why.
2 links
Target elements with selectors rests on Choose semantic elements
You style elements you can already name.
Control the box model rests on Use content elements correctly
Every element you write is a box.
In prerequisite order. Each idea names the artifact that closes it, the market demand that put it on the map, and what it stands on.
Depth 0 · procedural · unassisted · M04 §4.10
Centralizes design tokens in CSS variables
Tokens are introduced where repetition first hurts.
Depth 2 · procedural · unassisted · M04 §4.4
Combines element, class, attribute and pseudo-selectors
Choose semantic elements · HTML & Semantic Markup
You style elements you can already name.
Depth 3 · conceptual · unassisted · M04 §4.4
Predicts which rule wins
Target elements with selectors
Specificity is a property of selectors.
Depth 3 · conceptual · unassisted · M04 §4.5
Manages content, padding, border and margin
Use content elements correctly · HTML & Semantic Markup
Every element you write is a box.
Reason about specificity and the cascade
Box behavior is easier to debug when you know which rule won.
Depth 3 · representational · unassisted · M04 §4.10
Controls families, scale, rhythm and color formats
Target elements with selectors
Type styles are applied through selectors.
Depth 4 · conceptual · unassisted · M04 §4.6
Applies block, inline, relative, absolute, fixed and sticky
Display changes how the box behaves.
Depth 4 · procedural · unassisted · M04 §4.9
Applies media queries and relative units mobile-first
Responsive layout is the box model under changing widths.
Choose between Grid and Flexbox
Responsive work is easier when the layout tool is already chosen well.
Depth 4 · procedural · scaffolded · M04 §4.11
Applies transition, keyframes and transform with restraint
Transitions animate properties of the box.
Transform behavior depends on how the element is displayed.
Depth 5 · conceptual · scaffolded · M04 §4.6
Uses z-index with an understanding of context
Stacking context is created by positioning.
Depth 5 · procedural · unassisted · M04 §4.7
Controls axes, alignment, wrapping and growth
Flex is a display mode.
Depth 5 · procedural · unassisted · M04 §4.8
Defines tracks, areas and auto placement
Grid is a display mode.
Build one-dimensional layouts with Flexbox
Grid concepts land faster after one-dimensional layout.
Depth 6 · conceptual · unassisted · M04 §4.8
Matches the tool to the dimensionality
Build two-dimensional layouts with Grid
Choosing requires knowing both.
Build one-dimensional layouts with Flexbox
Choosing requires knowing both.
Everything downstream that names an idea here as a prerequisite, grouped by where it lives.
1 link
Style with a utility framework rests on Make layouts responsive
Utility classes express layout you must already understand.
Retool. Retrain. Relaunch.
375 ideas. 17 weeks. No tuition, ever.
Vets Who Code is a veteran-run 501(c)(3). The accelerator is free, remote, and we don’t take a share of your first paycheck.
Free · Remote · 17 weeks · EIN 86-2122804