CSS

roadmap.sh: https://roadmap.sh/css

Suggested path through the CSS nodes. Each node links to its lesson when written.

Nodes

Introduction

• What is CSS?
• How CSS is applied to HTML
• Inline, internal, and external styles
• Anatomy of a CSS rule
• How the browser parses and renders CSS

Selectors

• Type, class, and ID selectors
• Universal and grouping selectors
• Attribute selectors
• Combinators (descendant, child, sibling)
• Pseudo-classes
• Pseudo-elements
• Specificity
• The cascade and inheritance
• !important

Values and units

• Absolute units (px, pt)
• Relative units (em, rem, %, vw, vh)
• Colors (hex, rgb, hsl, named)
• Functions (calc, min, max, clamp)
• Custom properties (CSS variables)

Box model

• Content, padding, border, margin
• box-sizing
• Margin collapsing
• Width, height, and overflow
• Display property

Backgrounds and borders

• Background color and images
• Background position, size, repeat
• Gradients
• Borders and border-radius
• Box shadows

Typography

• Font family and web fonts
• Font size, weight, and style
• Line height and letter spacing
• Text alignment and decoration
• @font-face and font loading

Positioning

• Static, relative, absolute, fixed, sticky
• Top, right, bottom, left
• z-index and stacking context
• Float and clear

Layout — Flexbox

• Flex container and items
• Main and cross axis
• justify-content and align-items
• flex-grow, flex-shrink, flex-basis
• Wrapping and gap

Layout — Grid

• Grid container and tracks
• Rows and columns
• grid-template-areas
• fr units and minmax
• Placement and spanning
• Gap and alignment

Responsive design

• Media queries
• Mobile-first approach
• Breakpoints
• Fluid layouts and images
• Container queries

Transitions and animations

• Transitions
• Transforms (2D and 3D)
• Keyframe animations
• Timing functions
• Performance of animations

Advanced topics

• Stacking contexts
• Blend modes
• Filters
• Clipping and masking
• Object-fit and object-position
• Logical properties

Architecture and methodologies

• BEM
• OOCSS
• SMACSS
• Utility-first CSS
• CSS-in-JS

Preprocessors and tooling

• Sass / SCSS
• PostCSS
• Autoprefixer
• CSS modules
• Tailwind CSS

Best practices

• Naming conventions
• Reset and normalize
• DRY and reusable styles
• Cross-browser compatibility
• Accessibility (focus styles, prefers-reduced-motion)
• Debugging with DevTools

Resources

See resources.md.

Project ideas

• Recreate a complex magazine-style layout using CSS Grid for the page skeleton and Flexbox for components, fully responsive with container queries.
• Build a pure-CSS component library (buttons, cards, modals, tabs) using custom properties for theming and a dark/light mode toggle with no JavaScript.
• Implement an animated landing page with scroll-triggered transitions and keyframe animations that respects prefers-reduced-motion.