CSS
Styling and layout, from the box model to grid.
Backend Engineer track
Junior
Write correct code, ship small changes safely, ask good questions.
- CSSThe language that styles web pages.
Mid-level
Own a feature end to end without hand-holding.
Nothing here yet.
Senior
Own a system, its failure modes, and its trade-offs.
Nothing here yet.
Staff
Shape how many teams build, across systems.
Nothing here yet.
Principal
Set technical direction for the organization.
Nothing here yet.
Frontend Engineer track
Junior
Build UI that works, ship small changes safely, ask good questions.
Core: start here
- Box ModelContent, padding, border and margin around every element.
- CSS GridTwo-dimensional layout with rows and columns.
- CSS Unitspx, rem, em, %, vw and vh, and when to use each.
- FlexboxOne-dimensional layout along a row or a column.
- Media QueryApplying styles based on screen size or user preferences.
- Responsive DesignLayouts that adapt to any screen size.
- SelectorThe pattern that chooses which elements a rule applies to.
- SpecificityThe rules deciding which conflicting CSS declaration wins.
17 more junior concepts
- BEMA class naming convention: block__element--modifier.
- box-sizingWhether an element's width includes its padding and border.
- CSSThe language that styles web pages.
- CSS InheritanceProperties like color passing down to child elements.
- CSS Reset / NormalizeRemoving differences between browsers' default styles.
- Custom Properties (CSS Variables)Reusable values defined in CSS that can change at runtime.
- Dark ModeSupporting a dark color scheme with prefers-color-scheme or a toggle.
- displayblock, inline, inline-block, flex, grid and none.
- Mobile-FirstDesigning for small screens first, then enhancing for larger ones.
- Positioningstatic, relative, absolute, fixed and sticky.
- Pseudo-classesStates like :hover, :focus and :nth-child.
- Pseudo-elements::before and ::after for styling parts of an element.
- Sass / CSS PreprocessorsLanguages adding variables, nesting and mixins that compile to CSS.
- The CascadeHow origin, specificity and order combine to resolve styles.
- TransformsMoving, scaling and rotating elements without affecting layout.
- TransitionsSmoothly animating between property values.
- Utility-First CSS (Tailwind)Styling with small single-purpose classes directly in markup.
Mid-level
Own a feature end to end without hand-holding.
Core: start here
- Container QueryStyling a component by the size of its container instead of the screen.
- z-index and Stacking ContextHow elements layer, and why z-index: 9999 sometimes does nothing.
8 more mid-level concepts
- :has() SelectorSelecting a parent based on its children.
- CSS ModulesLocally scoped class names generated at build time.
- CSS-in-JSWriting styles in JavaScript alongside components.
- Keyframe AnimationsMulti-step animations defined with @keyframes.
- Logical Propertiesmargin-inline and friends, which adapt to writing direction.
- Native CSS NestingNesting selectors directly in plain CSS.
- Web FontsLoading custom fonts without layout shifts or invisible text.
- Web TypographyFonts, line height, line length and readable text.
Senior
Own an app's architecture, performance, and failure modes.
Core: start here
- CSS ArchitectureOrganizing styles so a large codebase stays maintainable.
2 more senior concepts
- Cascade Layers (@layer)Controlling cascade priority between groups of styles.
- Critical CSSInlining just the CSS needed for the first screen.
Staff
Shape how many teams build, across apps.
Nothing here yet.
Principal
Set technical direction for the organization.
Nothing here yet.