whattheflexbox

Flexbox Video Course - @wesbos

What The Flexbox?! — A simple 20 video course that will help you master CSS Flexbox

Grab the course at https://flexbox.io Github official the course at https://github.com/wesbos/What-The-Flexbox

Observations

Some exercises within your directory have a file called package.json. If it have this file, you must have npm installed and execute the commands:

$ npm install
$ npm start

List of Resources

• Tools
  • Autoprefixer CSS online
  • gulpjs
• MDN Web Docs
  • flex-basis
• layout.land
  • layout.land - youtube
  • jensimmons - labs
• css-tricks
  • A Complete Guide to Flexbox
  • “Old” Flexbox and “New” Flexbox
  • Does CSS Grid Replace Flexbox?
• smashingmagazine
  • The Flexbox Reading List: Techniques And Tools
  • CSS3 Flexible Box Layout: Everything I Wish I Knew When I Started
  • Flexbox Is As Easy As Pie: Designing CSS Layouts
  • Laying Out A Flexible Future For Web Design With Flexbox Best Practices
  • The New Layout Standard For The Web: CSS Grid, Flexbox And Box Alignment
  • Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid

List of Exercises

• 01-IntroductionToFlexbox
• 02-WorkingWithFlexboxFlex-Direction
• 03-WrappingElementsWithFlexbox
• 04-FleboxOrdering
• 05-FlexboxAlignmentAndCenteringWithJustify-Content
• 06-AlignmentAndCenteringWithAlign-Items
• 07-AlignmentAndCenteringWithAlign-Content
• 08-AlignmentAndCenteringWithAlign-Self
• 09-UnderstandingFlexboxSizingwithTheFlexProperty
• 10-FinallyUnderstandingFlexbox-FlexGrow-FlexShrink-FlexBasis
• 11-HowFlexboxFlexBasisAndWrappingWorkTogether
• 12-CrossBrowserFlexboxSupportAndAutoprefixer
• 13-PureFlexboxNavigationCodeAlong
• 14-MobileContentReorderingWithFlexbox
• 15-NestingFlexboxForVerticalAndHorizontalCenteringWithFlexbox
• 16-FlexboxPricingGrid
• 17-FlexboxEqualHeightColumnsAndLeftoverElements
• 18-FlexboxSingleLineForm
• 19-CreateAMobileAppLayoutWithFlexbox