The Easiest Way to Master CSS Flexbox...
Рет қаралды 40,835
Күн бұрын🚨 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
@SonnySangha Жыл бұрын
📬Do you want DAILY coding problems sent DIRECTLY to your Inbox? (with solutions the next day) 👉 links.papareact.com/university
@DevBishwasBh 2 жыл бұрын
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.
@CavanMitchell 2 жыл бұрын
thanks for demonstrating, been watching a lot of ur vids as ur presentations are really clear
@enricopucci2797 2 жыл бұрын
This is the best revision for Flexbox! I needed this very much! Thanks my g!
@bekhzodbeknematov 2 жыл бұрын
this game was really simple but I found it really helpfull, thank you Sonny
@jacksonmwanaumo9403 2 жыл бұрын
It's so easy to understand when you teach. You are my hero #1 African Follower All the way from Zambia
@MathewCris-lp6ly Жыл бұрын
This is actually the Easiest way, I now understand, thank you ❤
@Smurfis 11 ай бұрын
This is a brilliant website for refreshing yourself and learning! Great for programming problem solving good series bro!
@yaghiyahbrenner8902 Жыл бұрын
This was fire brother!
@mdbicky9460 2 жыл бұрын
thanks for this beautiful tuitorial
@sleepcs2 2 жыл бұрын
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 😂😂
@VIJAY_B_1998 2 жыл бұрын
this was really awesome 😄 , I paused the video on the start and tried to solve . I only got stuck at the last one
@BlaizeChannel Жыл бұрын
This was really helpful !
@ThugLifeModafocah 2 жыл бұрын
Another amazing content. Thanks.
@zetsuwi6577 Жыл бұрын
very clear explanation ,👌
@NacerCoder 2 жыл бұрын
Nice job Man thank you very much
@kavyajanardhanan5412 2 жыл бұрын
The course is really amazing! Flexbox seems easy after watching this vedio
@barkamololimjonov5515 2 жыл бұрын
Hello bro! Very useful. Thanks much
@iam__anandu7 Жыл бұрын
Great video! ♥️💛
@cau8777 2 жыл бұрын
I saw the thumbnail image and clicked to like and support, it's also how I learned
@sherifdeenadebayo1644 2 жыл бұрын
Can't wait 😜🚀
@nono5g535 Жыл бұрын
Thanks man
@afeezbadmos7623 2 жыл бұрын
Thank you bro
@2441139knakmg 2 жыл бұрын
assalamu alaikum brother!!! This is the best video on flexbox!! You did a great job!! Congrats!!!
@Flower-ho2kp Жыл бұрын
thank you!
@uncle_trap 2 жыл бұрын
please do a grid one aswell, thank you
@amindusaputhanthri 2 жыл бұрын
Thanks bro
@laponiec 2 жыл бұрын
Very cool, thanks ;)
@kulanibaloyi4437 2 жыл бұрын
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!
@sweetdollsree Жыл бұрын
This is such an amazing game. 😍 Thanks a lot..
@mirkokawa2117 2 жыл бұрын
Really good 👍
@gtbaba123 Жыл бұрын
Ty for this website. Is there same website for CSS Grid?
@BlackSky-123 2 жыл бұрын
I will wait for the css grid tutorial :)
@dulanjanadevindabandara6648 2 жыл бұрын
Please create a video for grid as well
@manojrao9867 Жыл бұрын
Thank Sonny.
@magnnetic4093 2 жыл бұрын
Bro you're the best
@PRASHANT619100 2 жыл бұрын
Make one for grid as well please
@christianniyokwizerwa Жыл бұрын
The best in the business
@reactwithkeshav4937 2 жыл бұрын
Bhai mje aa gye✋
@yusefweb3693 2 жыл бұрын
finally i got it!
@correctcode367 2 жыл бұрын
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! 🌹🙏
@rameenana 7 ай бұрын
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.
@manjunathreddy5210 2 жыл бұрын
flex-flow:column-reverse wrap-reverse; align-content:space-between; justify-content:center;
@grx4.067 2 жыл бұрын
Also explain grid
@kabagambedaniel2468 Жыл бұрын
bigup man
@AmitSingh-qx5gy 2 жыл бұрын
Can we create a website with flexbox without using any other css properties like margin, position etc.
@DevBishwasBh 2 жыл бұрын
Please do OAuth Next Js Django... I have been struggling with it.
@Zaheer__zk40 2 жыл бұрын
I have done it all my on
@RaviSingh-qp1sx Жыл бұрын
I have completed the 24th challenge in 10minutes, very interesting!
@SonnySangha Жыл бұрын
Good job!!
@chaitanya4600 2 жыл бұрын
Content: "Top" // 💥🚀
@SohailKhan-tc8uz 2 жыл бұрын
Bro please make a complete tutorial on responsive website using HTML CSS Js.
@twenyone5034 2 жыл бұрын
L-E-G-E-N-D 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥 I mean.. PAPALEGEND 😮💨 🥶🥶🥶🥶
@modres2444 2 жыл бұрын
It is really good game It’s help me
@al3ezi 2 жыл бұрын
What is flexbox ?
@oldgsteel 2 жыл бұрын
Gonna watch later, now I'm out with my wife 🤦🏾♂️😂💯💪🏼
@amarsinhamadke3950 2 жыл бұрын
I have completed this game flexbox froggy
@abepena5789 2 жыл бұрын
Flexbox froggy?!?
@syedmunawwarali5999 2 жыл бұрын
Boooooom Million times O
@josephomotade864 2 жыл бұрын
💯💯💯💯💯💯💯💯💯💯
@hades5509 Жыл бұрын
last one 80 %
@dr3pts 2 жыл бұрын
I was able to do the last level successfully, but I only 90% understood it.
@yaminshaikh 2 жыл бұрын
can't do level 24 😑😑
@casual_GamerHQ 2 жыл бұрын
Aiyoo when vikkstarr started coding instead of Minecraft 🙂
@bumfuzzlygubbins7811 2 жыл бұрын
I clicked on the video because you look like vikkstar123 from the sidemen.
@thedigitalceo 2 жыл бұрын
Flex can be so confusing. How long did you practice this before making the video. 😭
@SonnySangha 2 жыл бұрын
10 years
@thedigitalceo 2 жыл бұрын
@@SonnySangha 😂😂😂
@meilyn22 2 жыл бұрын
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.