This course teaches learners how to master CSS Flexbox through 20 videos. By the end of the course, students will be able to understand and implement various Flexbox properties such as flex-direction, wrapping elements, ordering, alignment, sizing, and cross-browser support. The course covers practical applications like creating navigation menus, pricing grids, equal height columns, and mobile layouts using Flexbox. The intended audience for this course is individuals looking to enhance their CSS layout skills and create responsive web designs efficiently.
Overview
Syllabus
- Introduction to What The FlexBox
- Introduction to Flexbox
- Working with Flexbox flex-direction
- Wrapping elements with Flexbox
- Flexbox Ordering
- Flexbox Alignment and Centering with justify-content
- Alignment and Centering with align-items
- Alignment and Centering with align-content
- Alignment and Centering with align-self
- Understanding Flexbox sizing with the flex property
- Finally understanding Flexbox flex-grow, flex-shrink and flex-basis
- How Flexbox's flex-basis and wrapping work together
- Cross Browser Flexbox Support and Autoprefixer!
- Pure Flexbox navigation code along
- Mobile content reordering with Flexbox
- Nesting Flexbox for vertical and horizontal centering with Flexbox
- Flexbox Pricing Grid
- Flexbox Equal height columns and leftover elements
- Flexbox single line form
- Create a mobile app layout with Flexbox
Taught by
Wes Bos
