MadhavBahl / flexbox-webinar

Assets for my upcoming webinar: "Flex with Flexbox"

Flex with Flexbox

Webinar on CSS flexbox

Get the resources

1. Download the slides: http://madhavbahl.tech/learn-flexbox
2. Visit the reference website: http://madhavbahl.tech/flex
3. Open Flexbox froggy: https://flexboxfroggy.com/
4. Clone this repo
5. For the final code, run the index.html in finished_code directory
6. For boilerplate code, open the boilerplate directory in your favorite text editor

Slides overview

1. Title
2. About the speaker
3. Before we start
4. Why meetups?
5. Let's play a game side by side
6. Today's Agenda
   1. Two axes of flexbox
   2. Parent Element - Flex Container
      1. Flex direction
      2. Justify content
      3. Align Items
      4. Flex Wrap & Flex Flow
      5. Align Content
   3. Child Elements - Flex Items
      1. order
      2. align self
      3. Flex grow
      4. flex Shrink
      5. flex basis
      6. flex
7. Let's see it in action!
8. That's it! Let's connect :)

Slides

Special Thanks

1. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
2. Website reference: https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_website2
3. W3Flexbox - https://www.w3schools.com/css/css3_flexbox.asp