Autoplay
Autocomplete
Previous Lesson
Complete and Continue
CSS Fundamentals | Master
Getting started
Auto-evaluation (Spanish)
Course goals in one slide
Environment setup (3:12)
Context (4:50)
What & why
Basic syntax
Cascade & styles location
Cascade & styles location - CHALLENGE
Reset styles
Reset styles - CHALLENGE
Download full section: 18 MB
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
Color
Background
Units (update: 8-May-2023)
Download full section: 8 MB
Positioning
Box model
Box model - CHALLENGE
Inline & block
Inline & block - CHALLENGE
Position
Float
Download full section: 10 MB
Visualization
Visualization
Content
Text: font property
Text: other properties
Text: lists
Text: tools
Download full section: 7 MB
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
Visual Studio Code extensions: UI elements and CSS Grid layouts
Alerts
Badges
Breadcrumbs
Buttons
Cards
Grids
Forms
Navigations
Paginations
Tables
Congratulations!
Course goals in one slide: review
Next steps
Keep on learning: sites, newsletters, communities and relevant authors (update: 21-Mar-2023)
Teach online with
Simple selectors - BEM (naming convention for classes)
CSS_Fundamentals-Selectors_simple-BEM.pdf
Download
CSS_Fundamentals-Selectors_simple-BEM.pdf
Complete and Continue