Log In
0% completed
All Lessons
Free Lessons (7)
Getting Started
Course Introduction
CSS Basics
Box Model Review
The Process of Layouting
Challenges with Traditional Layouting
Traditional Layouting - Solution with Flexbox
Media Queries, Responsive Design, Mobile-First
Flexbox Layouting Exercise
Flexbox Layouting Solution
CSS Review Quiz
CSS Review Summary
Using Flexbox Containers
Introduction to Flexbox
Using Flexbox - Exercise
Using Flexbox - Solutions
Flex-direction
Flex-direction Exercise
Flex-direction Solution
Justify-content
Justify-content Exercises
Justify-content Solution
Align-items
Align-items Exercises
Align-items Solution
Flex-wrap
Flex-wrap Exercises
Flex-wrap Solution
Flex-flow: Combining flex-direction and flex-wrap
Align-content
Align-content Exercise
Align-content Solution
Flex Container Quiz
Using Flexbox Containers - Summary
Aligning Individual Flexbox Items
Introduction to Flexbox Item Properties
Align-self
Align-self Exercise
Align-self Solution
Flex-grow and flex-basis
Flex-grow and Flex-basis Exercise
Flex-grow and Flex-basis Solution
Flex-shrink
Flex-shrink Exercise
Flex-shrink Solution
Flex Shorthand Notation
Flex Shorthand Notation Exercise
Flex Shorthand Notation Solution
Order
Order Exercise
Order Solution
Flex Items Quiz
Aligning Individual Flexbox Items - Summary
Designing a Mobile-first Website Using Flexbox
Project Introduction
Page Layout
Header Component Layout
Footer Component
Main Banner Title and Tagline
Blog post Box Layouting
Highlighted Blogposts
Flexbox Wrapping in Incomplete Rows
Form Input Field Markup and Layout
Contact Form Markup
Removing the Layout Indicators
Final Quiz
Summary
Flexbox Conclusion and Next Steps
Conclusion and Next Steps
Designing Web Layouts with CSS and Flexbox
/
...
/
Final Quiz
Final Quiz
Review your knowledge of Flexbox by completing this quiz.
We'll cover the following...
Let us
...