https://github.com/madhavbahl/flexbox-webinar

Assets for my upcoming webinar: "Flex with Flexbox"
https://github.com/madhavbahl/flexbox-webinar

Last synced: about 1 month ago
JSON representation

Assets for my upcoming webinar: "Flex with Flexbox"

• Host: GitHub
• URL: https://github.com/madhavbahl/flexbox-webinar
• Owner: MadhavBahl
• Created: 2020-04-08T05:12:24.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2020-04-11T05:27:01.000Z (about 5 years ago)
• Last Synced: 2025-04-12T22:57:59.380Z (about 1 month ago)
• Language: HTML
• Size: 7.74 MB
• Stars: 3
• Watchers: 1
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Flex with Flexbox

Webinar on CSS flexbox

## Get the resources

1. Download the slides: [http://madhavbahl.tech/learn-flexbox](http://madhavbahl.tech/learn-flexbox)

2. Visit the reference website: [http://madhavbahl.tech/flex](http://madhavbahl.tech/flex)

3. Open Flexbox froggy: [https://flexboxfroggy.com/](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. [x] Title

2. [x] About the speaker

3. [x] Before we start

4. [x] Why meetups?

5. [x] Let's play a game side by side

6. [x] Today's Agenda

   1. [x] Two axes of flexbox

   2. [x] Parent Element - Flex Container

      1. [x] Flex direction

      2. [x] Justify content

      3. [x] Align Items

      4. [x] Flex Wrap & Flex Flow

      5. [x] Align Content

   3. [x] Child Elements - Flex Items

      1. [x] order

      2. [x] align self

      3. [x] Flex grow

      4. [x] flex Shrink

      5. [x] flex basis

      6. [x] flex

7. [x] Let's see it in action!

8. [x] That's it! Let's connect :)

## Slides

![Slide1](./slides/Flex1.png)

![Slide1](./slides/Flex2.png)

![Slide1](./slides/Flex3.png)

![Slide1](./slides/Flex4.png)

![Slide1](./slides/Flex5.png)

![Slide1](./slides/Flex6.png)

![Slide1](./slides/Flex7.png)

![Slide1](./slides/Flex8.png)

![Slide1](./slides/Flex9.png)

![Slide1](./slides/Flex10.png)

![Slide1](./slides/Flex11.png)

![Slide1](./slides/Flex11.png)

![Slide1](./slides/Flex12.png)

![Slide1](./slides/Flex13.png)

![Slide1](./slides/Flex14.png)

![Slide1](./slides/Flex15.png)

![Slide1](./slides/Flex16.png)

![Slide1](./slides/Flex17.png)

![Slide1](./slides/Flex18.png)

![Slide1](./slides/Flex19.png)

![Slide1](./slides/Flex20.png)

![Slide1](./slides/Flex21.png)

![Slide1](./slides/Flex22.png)

![Slide1](./slides/Flex23.png)

![Slide1](./slides/Flex24.png)

![Slide1](./slides/Flex25.png)

![Slide1](./slides/Flex26.png)

![Slide1](./slides/Flex27.png)

![Slide1](./slides/Flex28.png)

![Slide1](./slides/Flex29.png)

![Slide1](./slides/flex30.png)

![Slide1](./slides/Flex31.png)

![Slide1](./slides/Flex32.png)

![Slide1](./slides/Flex33.png)

![Slide1](./slides/Flex34.png)

![Slide1](./slides/Flex35.png)

![Slide1](./slides/Flex36.png)

![Slide1](./slides/Flex37.png)

![Slide1](./slides/Flex38.png)

![Slide1](./slides/Flex39.png)

![Slide1](./slides/Flex40.png)

![Slide1](./slides/Flex41.png)

![Slide1](./slides/Flex42.png)

## 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