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
📬Do you want DAILY coding problems sent DIRECTLY to your Inbox? (with solutions the next day) 👉 links.papareact.com/university
thanks for demonstrating, been watching a lot of ur vids as ur presentations are really clear
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.
This is the best revision for Flexbox! I needed this very much! Thanks my g!
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
2 жыл бұрын
Awesome idea!!! You’re welcome!
@davidomar742
2 жыл бұрын
you have paid developers that don't understand flexbox lol?
@masterjim8bp805
2 жыл бұрын
@@davidomar742 lmao
@internetbscop5364
Жыл бұрын
@@davidomar742 dare you call them them novices. I am sure they showed him a lot of promise during interviews lol 😂😂
this game was really simple but I found it really helpfull, thank you Sonny
It's so easy to understand when you teach. You are my hero #1 African Follower All the way from Zambia
thanks for this beautiful tuitorial
Another amazing content. Thanks.
This is actually the Easiest way, I now understand, thank you ❤
very clear explanation ,👌
Nice job Man thank you very much
This was really helpful !
This is a brilliant website for refreshing yourself and learning! Great for programming problem solving good series bro!
This was fire brother!
this was really awesome 😄 , I paused the video on the start and tried to solve . I only got stuck at the last one
Hello bro! Very useful. Thanks much
The course is really amazing! Flexbox seems easy after watching this vedio
Great video! ♥️💛
I saw the thumbnail image and clicked to like and support, it's also how I learned
Thanks man
Thank you bro
thank you!
assalamu alaikum brother!!! This is the best video on flexbox!! You did a great job!! Congrats!!!
This is such an amazing game. 😍 Thanks a lot..
Thanks bro
Can't wait 😜🚀
Very cool, thanks ;)
please do a grid one aswell, thank you
Really good 👍
Ty for this website. Is there same website for CSS Grid?
Please create a video for grid as well
Thank Sonny.
Make one for grid as well please
I will wait for the css grid tutorial :)
Pretty cool. align-self changes the whole game, this whole time I've been messing with Position to get the same effect
@SonnySangha
2 жыл бұрын
I know right!
The best in the business
Bro you're the best
Bhai mje aa gye✋
flex-flow:column-reverse wrap-reverse; align-content:space-between; justify-content:center;
Also explain grid
finally i got it!
bigup man
I have done it all my on
Please do OAuth Next Js Django... I have been struggling with it.
Can we create a website with flexbox without using any other css properties like margin, position etc.
Content: "Top" // 💥🚀
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! 🌹🙏
I have completed the 24th challenge in 10minutes, very interesting!
@SonnySangha
Жыл бұрын
Good job!!
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.
Bro please make a complete tutorial on responsive website using HTML CSS Js.
L-E-G-E-N-D 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥 I mean.. PAPALEGEND 😮💨 🥶🥶🥶🥶
It is really good game It’s help me
What is flexbox ?
💯💯💯💯💯💯💯💯💯💯
Gonna watch later, now I'm out with my wife 🤦🏾♂️😂💯💪🏼
Boooooom Million times O
I have completed this game flexbox froggy
Flexbox froggy?!?
can't do level 24 😑😑
I was able to do the last level successfully, but I only 90% understood it.
last one 80 %
Aiyoo when vikkstarr started coding instead of Minecraft 🙂
I clicked on the video because you look like vikkstar123 from the sidemen.
Flex can be so confusing. How long did you practice this before making the video. 😭
@SonnySangha
2 жыл бұрын
10 years
@thedigitalceo
2 жыл бұрын
@@SonnySangha 😂😂😂
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.