Getting started
Selectors (update: 8-May-2023)
-
Simple selectors
-
Simple selectors - BEM (naming convention for classes)
-
Simple selectors - CHALLENGE
-
Attribute selectors
-
Attribute selectors - CHALLENGE
-
Pseudo-classes
-
Pseudo-classes - CHALLENGE
-
Pseudo-elements
-
Pseudo-elements - CHALLENGE
-
Combinators
-
Combinators - CHALLENGE
-
Mix & group
-
Mix & group - CHALLENGE
-
Specificity
-
Inheritance
-
Fundamental selectors cheatsheet (coming soon)
-
Games: learn by playing
-
Download full section: 24 MB
Colors & units
Positioning
Visualization
Content
Layout
-
Flexbox: container & items
-
Flexbox: direction & wrap
-
Flexbox: basis - grow - shrink
-
Flexbox: justify
-
Flexbox: align
-
Flexbox - CHALLENGE
-
CSS Grid: container & items
-
CSS Grid: explicit & implicit grid
-
CSS Grid: fraction - minmax - repeat
-
CSS Grid: grid lines
-
CSS Grid: grid areas
-
CSS Grid - CHALLENGE
-
Download full section: 13 MB
Real world use cases
Congratulations!
Next steps
