The Easiest Way to Master CSS Flexbox...

🚨 Join the world’s BEST developer community “Zero to Full Stack Hero”: www.papareact.com/course
📩 Want coding problems (with solutions!) delivered to your inbox daily? www.papareact.com/dailycoding...
🔴 LOOKING FOR THE CODE? 🛠️
links.papareact.com/github
👇🏻FOLLOW ME HERE:
Instagram: links.papareact.com/instagram
Facebook: links.papareact.com/facebook
LinkedIn: links.papareact.com/linkedin
Twitter: links.papareact.com/twitter
Discord: links.papareact.com/discord
Newsletter: links.papareact.com/newsletter
💰 WANT TO SUPPORT THE CHANNEL?
Donate here: links.papareact.com/donate
Grab some PAPA Merch: links.papareact.com/merch
🕐 TIMESTAMPS:
00:00 Introduction
00:21 Skillshare Sponsorship
02:11 Flexbox Explanation
02:42 Explaining justify-content: flex-end
04:44 Explaining justify-content: center
05:30 Explaining justify-content: space-around
06:58 Explaining justify-content: space-between
07:10 Explaining align-items: flex-end
08:02 Aligning item in the center of the page
08:56 Explaining align-items and justify-content
09:45 Explaining flex-direction: row-reverse
10:46 Explaining flex-direction: column
10:59 Explaining flex-direction and justify-content (1/3)
12:10 Explaining flex-direction and justify-content (2/3)
13:18 Explaining flex-direction and justify-content (3/3)
13:54 Explaining flex-direction, justify-content and align-items
14:59 Explaining the order-property (1/2)
16:37 Explaining the order-property (2/2)
17:50 Explaining align-self
18:50 Explaining order and align-self
20:01 Explaining flex-wrap: wrap
20:32 Explaining flex-direction and flex-wrap
21:21 Explaining flex-flow: column wrap
21:49 Explaining align-content: flex-start
22:35 Explaining align-content: flex-end
22:44 Explaining flex-direction and align-content
23:32 Explaining flex-flow, justify-content and align-content
26:10 Outro
Let’s get it PAPAFAM 🔥.
#reactjs #css #flexbox #tailwindcss

Пікірлер: 74

  • @SonnySangha
    @SonnySangha Жыл бұрын

    📬Do you want DAILY coding problems sent DIRECTLY to your Inbox? (with solutions the next day) 👉 links.papareact.com/university

  • @CavanMitchell
    @CavanMitchell2 жыл бұрын

    thanks for demonstrating, been watching a lot of ur vids as ur presentations are really clear

  • @DevBishwasBh
    @DevBishwasBh2 жыл бұрын

    Hello brother. I am a indie dev, and I've been watching your videos lately, they're so powerful and useful to me. Nowadays, I am upgrading my old webapps from Only Django Based to React Django Based.

  • @enricopucci2797
    @enricopucci27972 жыл бұрын

    This is the best revision for Flexbox! I needed this very much! Thanks my g!

  • @sleepcs2
    @sleepcs22 жыл бұрын

    I just made this a mandatory game for my Jr devs to play and complete. So freaking awesome! Thank you for sharing this to us Sonny

  • @SonnySangha

    @SonnySangha

    2 жыл бұрын

    Awesome idea!!! You’re welcome!

  • @davidomar742

    @davidomar742

    2 жыл бұрын

    you have paid developers that don't understand flexbox lol?

  • @masterjim8bp805

    @masterjim8bp805

    2 жыл бұрын

    @@davidomar742 lmao

  • @internetbscop5364

    @internetbscop5364

    Жыл бұрын

    @@davidomar742 dare you call them them novices. I am sure they showed him a lot of promise during interviews lol 😂😂

  • @bekhzodbeknematov
    @bekhzodbeknematov2 жыл бұрын

    this game was really simple but I found it really helpfull, thank you Sonny

  • @jacksonmwanaumo9403
    @jacksonmwanaumo94032 жыл бұрын

    It's so easy to understand when you teach. You are my hero #1 African Follower All the way from Zambia

  • @mdbicky9460
    @mdbicky94602 жыл бұрын

    thanks for this beautiful tuitorial

  • @ThugLifeModafocah
    @ThugLifeModafocah2 жыл бұрын

    Another amazing content. Thanks.

  • @MathewCris-lp6ly
    @MathewCris-lp6ly Жыл бұрын

    This is actually the Easiest way, I now understand, thank you ❤

  • @zetsuwi6577
    @zetsuwi6577 Жыл бұрын

    very clear explanation ,👌

  • @NacerCoder
    @NacerCoder2 жыл бұрын

    Nice job Man thank you very much

  • @BlaizeChannel
    @BlaizeChannel Жыл бұрын

    This was really helpful !

  • @Smurfis
    @Smurfis Жыл бұрын

    This is a brilliant website for refreshing yourself and learning! Great for programming problem solving good series bro!

  • @yaghiyahbrenner8902
    @yaghiyahbrenner8902 Жыл бұрын

    This was fire brother!

  • @VIJAY_B_1998
    @VIJAY_B_19982 жыл бұрын

    this was really awesome 😄 , I paused the video on the start and tried to solve . I only got stuck at the last one

  • @barkamololimjonov5515
    @barkamololimjonov55152 жыл бұрын

    Hello bro! Very useful. Thanks much

  • @kavyajanardhanan5412
    @kavyajanardhanan54122 жыл бұрын

    The course is really amazing! Flexbox seems easy after watching this vedio

  • @iam__anandu7
    @iam__anandu7 Жыл бұрын

    Great video! ♥️💛

  • @cau8777
    @cau87772 жыл бұрын

    I saw the thumbnail image and clicked to like and support, it's also how I learned

  • @nono5g535
    @nono5g535 Жыл бұрын

    Thanks man

  • @afeezbadmos7623
    @afeezbadmos76232 жыл бұрын

    Thank you bro

  • @Flower-ho2kp
    @Flower-ho2kp Жыл бұрын

    thank you!

  • @2441139knakmg
    @2441139knakmg2 жыл бұрын

    assalamu alaikum brother!!! This is the best video on flexbox!! You did a great job!! Congrats!!!

  • @sweetdollsree
    @sweetdollsree Жыл бұрын

    This is such an amazing game. 😍 Thanks a lot..

  • @amindusaputhanthri
    @amindusaputhanthri2 жыл бұрын

    Thanks bro

  • @sherifdeenadebayo1644
    @sherifdeenadebayo16442 жыл бұрын

    Can't wait 😜🚀

  • @laponiec
    @laponiec2 жыл бұрын

    Very cool, thanks ;)

  • @uncle_trap
    @uncle_trap2 жыл бұрын

    please do a grid one aswell, thank you

  • @mirkokawa2117
    @mirkokawa21172 жыл бұрын

    Really good 👍

  • @gtbaba123
    @gtbaba123 Жыл бұрын

    Ty for this website. Is there same website for CSS Grid?

  • @dulanjanadevindabandara6648
    @dulanjanadevindabandara66482 жыл бұрын

    Please create a video for grid as well

  • @manojrao9867
    @manojrao9867 Жыл бұрын

    Thank Sonny.

  • @PRASHANT619100
    @PRASHANT6191002 жыл бұрын

    Make one for grid as well please

  • @BlackSky-123
    @BlackSky-1232 жыл бұрын

    I will wait for the css grid tutorial :)

  • @kulanibaloyi4437
    @kulanibaloyi44372 жыл бұрын

    Pretty cool. align-self changes the whole game, this whole time I've been messing with Position to get the same effect

  • @SonnySangha

    @SonnySangha

    2 жыл бұрын

    I know right!

  • @christianniyokwizerwa
    @christianniyokwizerwa Жыл бұрын

    The best in the business

  • @magnnetic4093
    @magnnetic40932 жыл бұрын

    Bro you're the best

  • @reactwithkeshav4937
    @reactwithkeshav49372 жыл бұрын

    Bhai mje aa gye✋

  • @manjunathreddy5210
    @manjunathreddy52102 жыл бұрын

    flex-flow:column-reverse wrap-reverse; align-content:space-between; justify-content:center;

  • @grx4.067
    @grx4.0672 жыл бұрын

    Also explain grid

  • @yusefweb3693
    @yusefweb36932 жыл бұрын

    finally i got it!

  • @kabagambedaniel2468
    @kabagambedaniel2468 Жыл бұрын

    bigup man

  • @Zaheer__zk40
    @Zaheer__zk402 жыл бұрын

    I have done it all my on

  • @DevBishwasBh
    @DevBishwasBh2 жыл бұрын

    Please do OAuth Next Js Django... I have been struggling with it.

  • @AmitSingh-qx5gy
    @AmitSingh-qx5gy2 жыл бұрын

    Can we create a website with flexbox without using any other css properties like margin, position etc.

  • @chaitanya4600
    @chaitanya46002 жыл бұрын

    Content: "Top" // 💥🚀

  • @correctcode367
    @correctcode3672 жыл бұрын

    I literally got a master's at CSS Flexbox, Sonny! 🚀🚀🚀 Level 24 took 19 minutes to do for me, but after doing this level I am proud of myself because I get a master's in CSS Flexbox! ⚡⚡ Thanks a lot for your amazing tutorial! 🌹🙏

  • @RaviSingh-qp1sx
    @RaviSingh-qp1sx Жыл бұрын

    I have completed the 24th challenge in 10minutes, very interesting!

  • @SonnySangha

    @SonnySangha

    Жыл бұрын

    Good job!!

  • @rameenana
    @rameenana8 ай бұрын

    This was helpful, man. Thanks. But had to wait through a lot of bullshit to get to the important bits bro. Like you said, "Roll the intro" Are you saying that to yourself? Kinda weird. But still, useful. Cheers bro.

  • @SohailKhan-tc8uz
    @SohailKhan-tc8uz2 жыл бұрын

    Bro please make a complete tutorial on responsive website using HTML CSS Js.

  • @twenyone5034
    @twenyone50342 жыл бұрын

    L-E-G-E-N-D 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥 I mean.. PAPALEGEND 😮‍💨 🥶🥶🥶🥶

  • @modres2444
    @modres24442 жыл бұрын

    It is really good game It’s help me

  • @al3ezi
    @al3ezi2 жыл бұрын

    What is flexbox ?

  • @josephomotade864
    @josephomotade8642 жыл бұрын

    💯💯💯💯💯💯💯💯💯💯

  • @oldgsteel
    @oldgsteel2 жыл бұрын

    Gonna watch later, now I'm out with my wife 🤦🏾‍♂️😂💯💪🏼

  • @syedmunawwarali5999
    @syedmunawwarali59992 жыл бұрын

    Boooooom Million times O

  • @amarsinhamadke3950
    @amarsinhamadke39502 жыл бұрын

    I have completed this game flexbox froggy

  • @abepena5789
    @abepena57892 жыл бұрын

    Flexbox froggy?!?

  • @yaminshaikh
    @yaminshaikh2 жыл бұрын

    can't do level 24 😑😑

  • @dr3pts
    @dr3pts2 жыл бұрын

    I was able to do the last level successfully, but I only 90% understood it.

  • @hades5509
    @hades5509 Жыл бұрын

    last one 80 %

  • @casual_GamerHQ
    @casual_GamerHQ2 жыл бұрын

    Aiyoo when vikkstarr started coding instead of Minecraft 🙂

  • @bumfuzzlygubbins7811
    @bumfuzzlygubbins78112 жыл бұрын

    I clicked on the video because you look like vikkstar123 from the sidemen.

  • @thedigitalceo
    @thedigitalceo2 жыл бұрын

    Flex can be so confusing. How long did you practice this before making the video. 😭

  • @SonnySangha

    @SonnySangha

    2 жыл бұрын

    10 years

  • @thedigitalceo

    @thedigitalceo

    2 жыл бұрын

    @@SonnySangha 😂😂😂

  • @meilyn22
    @meilyn222 жыл бұрын

    Froggy is great, but it will not translate to the real world if you don't put it into practice. I have played Froggy more than 5 - 10 times now. Whenever you use Froggy, immediately try to build something if not you are gonna forget it and it wouldn't translate to building websites. Play the first level, open your vscode, create html items and then use css to implement what you are learning. Trust me, you will learn it better.