Flexbox Crash Course 2024

Рет қаралды 416,237

Күн бұрын

Flexbox is used for space distribution, positioning and alignment in CSS.
💻 Project Code:
codepen.io/bradtraversy/pen/J...
👇 Website & Courses:
traversymedia.com
💖 Show Support
Patreon: / traversymedia
PayPal: paypal.me/traversymedia
👇 Follow Me On Social Media:
Twitter: / traversymedia
Instagram: / traversymedia
Linkedin: / bradtraversy
Timestamps:
0:00 - Intro & Slides
5:05 - Setup HTML & Base CSS
7:50 - Create a Flexbox Container
8:20 - Float Example
9:49 - Justify Content
11:05 - Align Items
11:39 - Align Self
12:50 - Flex Direction & Column
15:15 - Centering Elements
16:32 - Flex Wrap
17:39 - Order
18:37 - Flex Basis
19:30 - Flex Grow
22:13 - Flex Shrink
23:58 - Flex Property
25:40 - Flexbox Layout Project

Пікірлер: 684

@tdematos Жыл бұрын

Not only did he explain the flex properties in detail, but he also showed how to apply them to a real-world example. Amazing video!

@johnryder8464 3 ай бұрын

Thats what he does🙄👎

@wildmemes2530 2 ай бұрын

shut it@@johnryder8464

@nick.karimi 2 жыл бұрын

Haven't finished watching but I'm certain that the content in this course is gold. Just wanted to appreciate your efforts to educate us in numbers for free. You're the real GOAT 🐐 in the tech :-)

@ramasoft5110 2 жыл бұрын

Shoutout to you Brad from Ethiopia; I'm trying to teach myself web development and I consume your content as much as I can. Thanks for your effort you are a great gift to the world. Keep up Never stop the good thing you are doing as people are benefiting big time from your work!.

@virtualbrian 2 жыл бұрын

Brad, Im sure that you've heard this before but, you've got a gift for teaching. Well done and thank you! Some little pieces that I was confused by with Flexbox are no longer confusing. Thanks!

@Ts-yy2jn 2 жыл бұрын

I learned flexbox from your previous crash course about flexbox years ago but still its so relaxing and enjoyable watching this new crash course from you Brad 😁❤️

@juanpablocl1 Жыл бұрын

I discovered your channel recently and I feel like I really need to thank you for the super VALUE, explanations, examples, etc. you are sharing for FREE. Thanks and keep up the good work! Hope you are doing terrific!

@christellemeyer8541 2 жыл бұрын

Thank you so much for this video, this is the most comprehensive one I have seen so far. You made it look so effortless. It was easy to follow, and I appreciate the fact that you did not stop the tutorial right after "flexing" the divs.

@adamdixon5028 2 жыл бұрын

Amazing work! This is the first tutorial that I’ve actually been able to follow along with and understand. Thank you

@shortygordy 2 жыл бұрын

Just watched this tutorial and followed along on my own for some self-learning. I really appreciate you taking the time to walk-through and help us learn, man!! Thank you!

@__greg__ 2 жыл бұрын

I've been pretty 'trial and error' with flexbox the past few years, and this is lesson has by far been the best for improving my understanding of what it's actually doing. Much thanks! 🙏🏽

@AnthonyLepki 2 жыл бұрын

Your videos are so timely ... the fact you are re-visiting ones done before is excellent - thanks Brad!

@mykalimba 2 жыл бұрын

38:50 would be the perfect time to introduce "gap" property, which is supported in flexbox by most of the major browsers.

@techtycho4752 2 жыл бұрын

I totally agree. I was once attempting to create a 3 box layout (like the one in this website, the blue boxes). I used flexbox but I really didn't know much about it because I watched Brad's five-year-old tutorial (the old one) and I didn't know that there was a new one, and he really didn't cover as much. I wanted to have the boxes have the same space in-between; that's because I just used a constant width, and not something like "flex: 1". So I just wrote tons and tons of media queries for every possible screen size, and every time, I just changed the width of the boxes. my bad. I knew I was doing something wrong and there is no way this could be the way to do it. When I finished, the layout still looked like shit; it wasn't smooth, instead, it was sluggish and very bad looking when I resized the browser. That's when I discovered the gap property.. And when I watched this video, I just realized that there was a million ways to do it, but I just didn't have the CSS knowledge that I have now. Pretty surprised how he didn't mention it though. ya know it is a 1 hour crash course about a single topic in CSS.

@khoroshoigra8388 Жыл бұрын

yeah

@mobeenrajpoot5315 Жыл бұрын

This is what i was looking for. Briefly explained with a full fledged responsive project. I really appreciate that.

@evyan7234 2 жыл бұрын

I’m so grateful for this video. The amount of hours I spent trying to fix alignment with float. This lesson is gold for a perfectly optimised layout ❤️

@Lorta21 Жыл бұрын

Very grateful for all of your content and resources you've put out here for web dev, and how easy and straight-forward it is to follow. Thank you Brad

@jamesekene2152 2 жыл бұрын

Brad, thanks for always taking time to make things easy for us developers. I really appreciate all you do.

@i.d.1988 Жыл бұрын

Love your YT tutorials and Udemy courses. The combination of your explanation plus hands-on implementation is phenomenal. Makes me fully understand the subject that you tackle and also gives me a solid basis to further investigate on my own. You are helping a lot of developers who just started and also mediors who just wants to brush up their skills. Thank you for that 🙏

@tristanyates9915 Жыл бұрын

Your videos are excellent and a very easy & efficient way to learn and I very much appreciate the work that you put into them!

@imadalnajjar8251 2 жыл бұрын

I don't think there will be any tutorial like this one; it is organized to keep the information in memory for an extended time. I always open Brad's channel to get any answer, and I almost bought all his Udemy courses; he teaches any subject professionally. Thanks again, Brad.

@rodblues6832 Жыл бұрын

You are a fantastic teacher, I can't tell you how much this video has helped me. I was on the verge of despair in my bootcamp with flex, but this video has shed so much light. This is reference I can return to again and again. Thank you!

@thomasnarvestad6226 2 жыл бұрын

Thank you so much man! Really helpful in the course im taking this spring. Relaxed and perfect speed of vocie with easy and in depth explanation. Love it. Keep up the good work!

@Wesleyendlich 2 жыл бұрын

Awesome course, as always. Thanks a lot for the high quality free content.

@MRAMetharam 2 жыл бұрын

Definitely the best flexbox tutorial I've seen! The practical application was long but definitely worth the time!!! Awesome!

@mella.i.7464 Жыл бұрын

I really appreciate that you are doing these videos. You can't imagine how helpful they are. Your explanations are always clear and straight to the point. You are a great teacher! Thank you, you've helped me (and not only) a lot!

@AlTushman 2 жыл бұрын

Thank you, Brad. Your videos are the best. And thank you for making the code easy to locate when necessary.

@Digitized_NV Жыл бұрын

Absolutely the best! I was looking for some Flexbox 101 and this was exactly what I needed to watch. Now I have a clearer understanding of how it all works and how I can keep tinkering to get it to do what I want. Thanks so much

@VIBrunazo 2 жыл бұрын

"Grid for the overall layout, and Flexbox for the items inside it" That's a great rule of thumb for combining the 2. I do the same thing! Another one "if you're using too many fixed width items on your FlexBox, you probably should be using Grid"

@godstimenwabue4394 2 жыл бұрын

It possible to combine the two

@godstimenwabue4394 2 жыл бұрын

Asking if it possible

@jstinmv6228 Жыл бұрын

Thanks so much! The last couple days I have been completely lost learning flex. I watched videos, read tons of content, and did a bunch of assignment with the course I am doing to ultimately go to bed last night totally discouraged. I found this video and started to watch and I had the lightbulb moment. It felt so good. Also, thanks so much for building the site to see how this is all applied. I have been wondering how all this is out together once we learn all these concepts. This video was great man. I subscribed to you and will definitely keep watching you from now on. Thanks again.

@mindblowinglifehacks2471 2 жыл бұрын

Thanks a million for this amazing free content tutorial, bro. I love every bit of your teaching techniques. Looking forward to seeing more amazing stuffs like this

@Moon-li9ki 2 жыл бұрын

I was just looking up css again after a long time and always struggled with flexbox and making my sites responsives... and then traversy just drops this video right on my lap! Perfect!!

@andreiabasile9853 9 ай бұрын

Best video on Flexbox I've ever watched! Keep up with the amazing work you do! Thank you for this!

@banyarnaing2597 2 жыл бұрын

Brad is really making this year better and better. Thank you.

@mikezpo Жыл бұрын

Loved the video! Without a doubt the best Flexbox tutorial! Keep up the great content 👏👏

@maximkoval7167 Жыл бұрын

Amazing tutorial which covers everything necessary to get started with flexbox! Great end-project too!

@AliSiHosseini Жыл бұрын

Your approach to describing, explaining, coaching, and teaching flexbox surpasses that of any other international instructor I've encountered. Your expertise and guidance are truly exceptional, making you a genuine GOAT. Consequently, I have added you to my regular watch list.

@kaseyknudsen1307 Жыл бұрын

Fantastic Tutorial!! Learned a ton. Thank you! 🙏🙏

@jimhenegan709 2 жыл бұрын

Thanks Brad. I have been relying on Materialize for my CSS needs, but I have been wanting to learn Flexbox for a while now. This is just what I needed!

@noahdiez9400 Жыл бұрын

Incredible work. I love real work examples and you are very informative, plus you also explain why things doesn't change.

@raaghavendrahm4883 2 жыл бұрын

So good to brush up flexbox with this video! I first learnt it with your previous flexbox crash course! Thanks a lot, Brad! This video is great.

@wewiwowo42 2 жыл бұрын

I needed this updated flex-box crash course. delivered with quality like usual. Thanks Brad

@ratsfeast 10 ай бұрын

Thank you for your help! You speak so clearly, your thinking is reasonable and easy to follow. I love your explanations. Keep up the good work Brad!

@roving-camera_72 Жыл бұрын

Easy to follow, very thorough intro to Flexbox. Thank you so much for all the work you do to share the skills you've learned.

@Anchor001 Жыл бұрын

Your explanation is Gold Brad. God bless you. I started researching on flexbox two days ago and as from today, I can teach it to someone. Thanks to your explanation and exercise at the end. I am relatively new in coding (2 months) but my journey is swift. Thanks a lot for your content.

@MartinJaszczuk 2 жыл бұрын

Your crash course videos are awesome. Your get down to business, brass tacks, no bullshit approach is why I subscribe and buy your stuff.... and seriously... You even put it on codePen!?! Damn... what a pillar of the learning-to-code community

@ToumaRenshi 2 жыл бұрын

Thank you for a great course. I feel I am gotta better and better at coding in CSS after watching this video. It was the most one smooth and best explanation how the flexbox works! I would love to see a "GRID Crash Course 2022". Greeting from Poland! :)

@yessirski7868 10 ай бұрын

best tutorial I have came across for flex box. Explained very well and straight forward with examples. Thank you!

@StrengthFromGiving Жыл бұрын

I love these crash courses, I'm working hard to get better at my CSS and this is just so refreshing to see what can be done with some study and practice. Thanks again!

@souvikroy622 Жыл бұрын

Just finished this awesome tutorial, learned a lot from you. I'm really so greatful for this video. Thank you so much Brad, your teaching style is extraordinary. Lots of love and respect for you...❤

@zappingstar 2 жыл бұрын

VERY helpful! I feel like I've been fighting with flex for weeks now and I feel WAY better after this video! Thanks!!

@danielafolayan966 2 жыл бұрын

Thank you so much Brad, web I started out with web dev I want to do more backend than frontend but your courses made me realise I actually love frontend more. Your courses are very comprehensive. I finished the css, html, and flex box course in two weeks and now I'm working on my own project.

@michaelmaldo7345 Жыл бұрын

you're the best, relaxing video, yet thorough, easiest video to watch but explained the concepts logically.. best tutorial!!

@hosna7211 2 жыл бұрын

It was great! Thank u so much Brad for teaching us so well! ❣

@tuanphamcong3583 2 жыл бұрын

Thank you, you're amazing. Everything is so clear and to the point. It really helps me get the college webapp project done and prepare for internship.

@wetsand7379 2 жыл бұрын

This was super helpful! Thank you, and I'm looking forward to your CSS grid crash course :)

@kristonburnstein 2 жыл бұрын

New subscriber here and I just want to thank you from the bottom of my heart for this content! It was so helpful to code along here and it's so thoughtful when you stop and say, "now you may ask why . . . " and go on to answer potential questions. On point! Thank you, I'll be back often!!

@chrisbartolomei 2 жыл бұрын

Awesome stuff, love these interactive tutorials. Thanks Brad.

@johnnyholiday1150 2 жыл бұрын

Brad, you just made me realize something that didnt sit in my head for over a year. just what i needed.

@talleyrand9530 2 жыл бұрын

Well, who doesn't need refreshment from time to time? Thanks, Brad you're truly awesome. All the best.

@thigarette1 2 жыл бұрын

This crash course came through clutch for me. Thank you Brad!

@seanpalmer1145 Жыл бұрын

Really good. Great idea to present the various elements before showing how they can be used to develop a project. Thanks for sharing this. Very much appreciated.

@hellaevie 2 жыл бұрын

Right as I was going to leave a comment on the old CSS Crash Course vid, I saw this link. That video was great, but this one, I'm walking away really confident in Flexbox. I hit pause a few times and was able to code along in making my own boxes move around. Extremely helpful. Well, I'm off to check out all your other vids! 🎊👩🏾‍💻

@codingaustralia3748 Жыл бұрын

Thanks again Brad. Everything works, no glitches. 👍👍

@aditideshpande3799 2 жыл бұрын

hey brad! thank you so much for these crash courses! learning tons from you!

@ArpeggioPegasusMusic 7 ай бұрын

The absolute best Flexbox video I've found. Thank you so much.

@ashwah Жыл бұрын

Great tutorial friend! Loved the format especially the real world example at the end.

@ramesh_rrl 2 жыл бұрын

Great crash course for flex I've ever seen. Thank you brad❤️

@faizalimuhammadzoda4731 2 жыл бұрын

You are so humble. Thanks for the time and effort you spend to make such helpful content.

@alexandersmotrikov9007 2 жыл бұрын

Perfect content for Flex refreshment and to learn if new with it! Thanks, Brad!

@brycecolwell4304 Ай бұрын

love your stuff. you explain each action and dont take for granted we know or dont know. too many do, and so much time is lost.

@mohammadthousif5373 2 жыл бұрын

Nobody can explain flexbox like this dude does. Great tutorial 👍🏻

@aminarahman2429 2 жыл бұрын

Thank you. Your video is the first and last one I have watched to understand Flexbox model. It is clear and concise.

@hamzakharal8276 8 ай бұрын

Man. That was incredible. I have watched countless Flexbox tutorials and explanations to understand it. It always helps me to watch multiple explanations. Yours and Kevin Powell's are the ones that stuck. Yours stuck mainly thanks to the "project" you built. Thank you

@omarmahmoud4696 2 жыл бұрын

week ago i just watched the old video of flexbox crash course on your channel, i'll watch the new one too😄 thank u brad😍

@JP-ld6nx 10 ай бұрын

I've been banging my head against flex box for days and you got me straight in less than 1 hour dude. Appreciate this so much!

@rafihasan7787 7 ай бұрын

I was strugling with Flexbox, knew all the properties and what they did but I couldn't use Flexbox at all. Now everything's clear! You are a legend, thank you so much!

@johndick6914 7 ай бұрын

same here - this is a really good tutorial and thanks you Traversy M

@pragmaticmansboots Жыл бұрын

Love the hands-on approach to learning (ie Flex direction). Went over my head when I first learned it. Thanks

@CuriousAnonDev 2 жыл бұрын

Thanks Brad, this was really amazing. That slides, that explanation and the project at the end, enjoyed every second of the lecture :)

@metaligla Жыл бұрын

The best tutorial ever. Absolutely brilliant explanation thank you very much for that.

@davejones4740 2 жыл бұрын

great. Usefull as easy to understand and follow. Thanks for taking the time again.

@babylee3975 Ай бұрын

Really great content. Straight forward and precise in explanation 💯

@gregmilligan4569 2 жыл бұрын

As always, great content, good tutorials (thorough but not over done - accessible)

@drviagrin3798 7 ай бұрын

Awesome! Thank you! This was very enlightening.

@deadbunnyeyes190 2 жыл бұрын

Really good tutorial! Got me smiling all throughout the video, especially the last part.

@conspirathon Жыл бұрын

Thank you for making this. It's exactly what I needed, where I am on my learning path.

@randyafriansyah9340 Жыл бұрын

thank you so much brad, this tutorial is amazing!

@lucasanfilippo5370 Жыл бұрын

Best video by far I have found on flex box for years...

@deshael6532 Жыл бұрын

Thank you! This was everything I needed to understand better!

@jamesnelson7096 2 жыл бұрын

Very nice tutorial. Thank you for taking your time to create it.

@techsamurai11 2 жыл бұрын

Amazing video. First you explained everything in a very clear manner, then you applied everything you taught in building a page starting with the html page and then moving on to the css which is really impressive. I really appreciated the tiny tricks like changing the line-height on the H1, using the section and header html tags, centering text on a mobile (it looks better), using Emmet. I wish you did an extension showing how Flex works in Bootstrap and how to apply it.