Forms | In a Rocket

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

Forms

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock