Flexbox Crash Course 2024

  Рет қаралды 440,207

Traversy Media

Traversy Media

Күн бұрын

Пікірлер: 700
@tdematos
@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!
@wildmemes2530
@wildmemes2530 8 ай бұрын
shut it@johnryder8464
@mudasirkhan3222
@mudasirkhan3222 2 ай бұрын
Who explains the best
@ramasoft5110
@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!.
@kariminic
@kariminic 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 :-)
@roger012194
@roger012194 Ай бұрын
Long video but didn't even notice until you pointed it out. Great teacher!
@virtualbrian
@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!
@evyan7234
@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 ❤️
@rafihasan7787
@rafihasan7787 Жыл бұрын
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
@johndick6914 Жыл бұрын
same here - this is a really good tutorial and thanks you Traversy M
@us-wolf
@us-wolf 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.
@VIBrunazo
@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
@godstimenwabue4394 2 жыл бұрын
It possible to combine the two
@godstimenwabue4394
@godstimenwabue4394 2 жыл бұрын
Asking if it possible
@mykalimba
@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
@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
@khoroshoigra8388 2 жыл бұрын
yeah
@mobeenrajpoot5315
@mobeenrajpoot5315 2 жыл бұрын
This is what i was looking for. Briefly explained with a full fledged responsive project. I really appreciate that.
@Ts-yy2jn
@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 😁❤️
@abstractworld2929
@abstractworld2929 5 ай бұрын
Bro, I've sat through countless videos, took at least 3 different courses and STILL could not understand flex. This video is absolutely 100% THE video to watch for understanding the Flexbox Model. Amazing work!
@mazal-bb
@mazal-bb 5 ай бұрын
100. I'm enrolled in a Udemy bootcamp and landed here to reinforce my learning. Super helpful and filled in a lot of holes in my understanding.
@juanpablocl1
@juanpablocl1 2 жыл бұрын
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!
@SurafelMengist
@SurafelMengist 11 ай бұрын
from Ethiopia amazing tutorials keep it up
@__greg__
@__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! 🙏🏽
@mattwhalen4100
@mattwhalen4100 3 ай бұрын
Came here from TOP. The video does a great job at showing a real world use case. A lot of the TOP content gives you bite size pieces which makes the final exercise hard to grasp. This clears it up immensely!
@AliSiHosseini
@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.
@ashishfrank99
@ashishfrank99 2 жыл бұрын
Brad is a celebrity for me, i mean look at just how hard working this dude is, putting out valuable content for free, he is a Hero cuz imagine the amount of people he must've helped.....and i'm not even exaggerating.....thanks Brad
@rodblues6832
@rodblues6832 2 жыл бұрын
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!
@wandersonhelmer1810
@wandersonhelmer1810 2 ай бұрын
Brad is undoubtedly a great teacher. I am currently enrolled in his HTML & CSS course at Udemy, and it's worth every cent spent. Do not overthink or idle by, his teachings are practical, and the language used is accessible. Moreover, he is a master at breaking down complex concepts into small, manageable and consumable chunks. Go get it!
@christellemeyer8541
@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.
@JP-ld6nx
@JP-ld6nx Жыл бұрын
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!
@odilanmaevidence9545
@odilanmaevidence9545 2 жыл бұрын
Give this man a Nobel Prize!
@Anchor001
@Anchor001 2 жыл бұрын
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.
@aft7059
@aft7059 2 жыл бұрын
You have taught me so much about flexbox in 45 minutes compared to the 3 hours I sat listening to my professor. Massive thank you.
@ti_oluwa
@ti_oluwa 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.
@AbdulMoeedgrw
@AbdulMoeedgrw 2 жыл бұрын
I thought that flexbox is very difficult to understand and to make responsive design with it but after watching this tutorial I am very glad that I learn flexbox completely. I really appreciate your efforts. 🤓 Your Tutorial is nothing less than a premium resource. Jazak-Allah-Khair! ❣❣
@Digitized_NV
@Digitized_NV 2 жыл бұрын
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
@shortygordy
@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!
@MartinJaszczuk
@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
@JesseSwagz
@JesseSwagz 2 жыл бұрын
Hi! This is an appreciation comment, this course is Gold.
@cabdikaficiise7682
@cabdikaficiise7682 2 жыл бұрын
thanks and so thanks today when watching your flexbox crash course i am sure i learn 80% flexbox in css 💓
@techsamurai11
@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.
@hamzakharal8276
@hamzakharal8276 Жыл бұрын
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
@Moon-li9ki
@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!!
@justicereads8683
@justicereads8683 2 жыл бұрын
Just finished watching and I feel so much better. In my last week of my CMST 385 Web Design course and I learned almost nothing. So, so much THANKS to you my friend!!!
@i.d.1988
@i.d.1988 2 жыл бұрын
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 🙏
@talleyrand9530
@talleyrand9530 2 жыл бұрын
Well, who doesn't need refreshment from time to time? Thanks, Brad you're truly awesome. All the best.
@michaelmaldo7345
@michaelmaldo7345 Жыл бұрын
you're the best, relaxing video, yet thorough, easiest video to watch but explained the concepts logically.. best tutorial!!
@its_zehri
@its_zehri 2 жыл бұрын
I have pretty much knowledge about flexbox .. but still watching this video just because of ur teaching method .. the way u teach is just perfect .. i appriciate u ❤
@jstinmv6228
@jstinmv6228 2 жыл бұрын
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.
@mohammadthousif5373
@mohammadthousif5373 2 жыл бұрын
Nobody can explain flexbox like this dude does. Great tutorial 👍🏻
@zappingstar
@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!!
@mella.i.7464
@mella.i.7464 2 жыл бұрын
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!
@AnthonyLepki
@AnthonyLepki 2 жыл бұрын
Your videos are so timely ... the fact you are re-visiting ones done before is excellent - thanks Brad!
@constomy
@constomy 2 жыл бұрын
Lol I should have checked comments first on your previous flexbox video. Just got done and now I see an updated version! Lol Here we go! Thanks for all you do!
@adamdixon5028
@adamdixon5028 2 жыл бұрын
Amazing work! This is the first tutorial that I’ve actually been able to follow along with and understand. Thank you
@Dope_Stories
@Dope_Stories 2 жыл бұрын
I have been learning CSS and html for about 6 months now and this course just really honestly tied a lot of it together for me, thanks again dude !
@alexnjihia440
@alexnjihia440 Жыл бұрын
how have you been learning css for six months....should take you a month and a half at most
@Dope_Stories
@Dope_Stories Жыл бұрын
@@alexnjihia440 At the time I did not really have a lot of extra free time to work with it. When I say learning though I really mean mastering it ... obviously picking up the basics of css take a couple hours. At the time I wrote this comment I really only had time to work on it about an hour or two a week. Obviously understanding it came quick but with only that small amount of time I often found myself needing to go back over things as I would come back to learn a new concept and forget some stuff because it had been like a week. Anyways this comment was super old, now I have a full understanding of CSS and honestly mostly use bootstrap or tailwind when possible.
@jimhenegan709
@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!
@Notionallity
@Notionallity Жыл бұрын
this is a world class tutorial on flexbox , he did not only explain the concept of a flexbox but also applied it👍👍
@mehmoodayaztravel
@mehmoodayaztravel 2 жыл бұрын
Hey Brad, Love from Pakistan, I love that you have changed your life, Huge respect for that. Much huge respect for teaching us these basics again and again. I never get bored of watching your videos again and again. Thank you. Stay safe, stay happy and take care care of yourself and your family.
@madhavkwatra5888
@madhavkwatra5888 2 жыл бұрын
The Real Project thing you did was Fabulous. So we could understand how its used in the real world . Thanks for the great work.
@techtycho4752
@techtycho4752 2 жыл бұрын
My entire web dev journey would have been much harder without you! Thanks!
@arronohagan4979
@arronohagan4979 2 жыл бұрын
Huge shoutout to Brad, making web development easy to dive into for the new generation of developers!
@ToumaRenshi
@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! :)
@MRAMetharam
@MRAMetharam 2 жыл бұрын
Definitely the best flexbox tutorial I've seen! The practical application was long but definitely worth the time!!! Awesome!
@hellaevie
@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! 🎊👩🏾‍💻
@winifycodm
@winifycodm 2 жыл бұрын
the best web development youtuber
@Lorta21
@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
@claudiobras22
@claudiobras22 2 жыл бұрын
Brad is at it again. Before a even watch the video, I always hit that thumb up button. I'm currently working on a school project, creating a STUDENT PORTAL. This crash course will help brush on my flex box css
@basechicken37
@basechicken37 11 ай бұрын
Man u a lifesaver, web dev school is waay easier now and I actually understand something! Great video keep this up.
@jamesekene2152
@jamesekene2152 2 жыл бұрын
Brad, thanks for always taking time to make things easy for us developers. I really appreciate all you do.
@lucasanfilippo5370
@lucasanfilippo5370 Жыл бұрын
Best video by far I have found on flex box for years...
@StrengthFromGiving
@StrengthFromGiving 2 жыл бұрын
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!
@Sijo2
@Sijo2 5 ай бұрын
Thank you for your video. I hate grid and try to avoid it as much as possible. This video on flex really helped
@wewiwowo42
@wewiwowo42 2 жыл бұрын
I needed this updated flex-box crash course. delivered with quality like usual. Thanks Brad
@CycleKillerlt
@CycleKillerlt 2 жыл бұрын
Jeez I was looking for answers what was wrong with my flexbox and you just done explained it like a champ; big big respect and love to u!
@FrenkyDev
@FrenkyDev 2 жыл бұрын
Big thank you from Ukraine, I love your channel! You describe complex things in simple language!
@aminarahman2429
@aminarahman2429 2 жыл бұрын
Thank you. Your video is the first and last one I have watched to understand Flexbox model. It is clear and concise.
@joshel4278
@joshel4278 2 жыл бұрын
To be honest,I love your work cause you are just original and a natural ,really enjoy your content ,nice one bro.
@tristanyates9915
@tristanyates9915 2 жыл бұрын
Your videos are excellent and a very easy & efficient way to learn and I very much appreciate the work that you put into them!
@ishanrastogi3049
@ishanrastogi3049 2 жыл бұрын
The best flexbox video I have ever seen. I had no idea that it was that easy. You are really amazing as teacher.
@kathleenmccarthy6347
@kathleenmccarthy6347 2 жыл бұрын
Just finished this tutorial. So helpful and satisfying to see it display in my browser. Thanks!
@souvikroy622
@souvikroy622 2 жыл бұрын
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...❤
@alwaysryan8454
@alwaysryan8454 Жыл бұрын
Hey Brad I got to your channel through the Odin Project. I just wanted to say thank you for all your amazing resources. They are extremely useful.
@whateveritwasitis
@whateveritwasitis 7 ай бұрын
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.
@ArpeggioPegasus
@ArpeggioPegasus Жыл бұрын
The absolute best Flexbox video I've found. Thank you so much.
@Christcomingagain
@Christcomingagain 2 жыл бұрын
I can't really understand the modern website tutorial u did previous year. ''Container flex''. Styling this was so difficult. Although u used flex, but I didn't get it. Because I code with my mobile phone. In the Acme web design project, the floating makes it rough for me. The media queries was not responding. I had to center the div class''boxes'' to meet my desire. But this is my first completed project. It is comprehensive enough for any beginner. Now I get the concept and principle with flex than floating. Thanks Brad. God bless you.
@brunodomingos5564
@brunodomingos5564 2 жыл бұрын
Thank you very much. Flexbox has always been difficult for me! Thanks to you I finally understood it, and fell in love with it. YOU'RE THE BEST!
@DevlogBill
@DevlogBill 2 жыл бұрын
Thanks, Traversy for the lesson. I watched the video up to 25:00 only. Trying to create a To-Do-App and grid isn't working for me so I figured I try out Flexbox and see how that comes along instead. I didn't watch the project, but I will return to that later on. Excellent video you explained the lesson in very good detail. Watched the video twice and took notes, you covered a lot of good content.
@da4nkplayz664
@da4nkplayz664 2 жыл бұрын
bro i was watching the old html crash course series and i was on the flexbox vid but i noticed how cool it was that you update your old videos thanks
@nullzero9224
@nullzero9224 Жыл бұрын
troubleshooting advice for beginners : always check if you applied property rule on flex container or flex item - a common mistake is to apply a property rule on container when the property is for flex item
@bipuljha792
@bipuljha792 2 жыл бұрын
You're God. I'm not saying this because you're soo good in this but because of your generous behavior. You're giving all this for free. Thank you. God bless you.
@andreiabasile9853
@andreiabasile9853 Жыл бұрын
Best video on Flexbox I've ever watched! Keep up with the amazing work you do! Thank you for this!
@jjjessee245
@jjjessee245 2 жыл бұрын
I'm new to html/css but your videos help the most of any that I watch. flex/grid is challenging and requires a grasp of available parameters an talent for visualazation. Pratacing is vital for developing understanding and visualazation. My personal project is developing a photo diary with a somewhat analog/organic feel. Tougher than I thought it would be. Thanks for your help, Brad.
@yessirski7868
@yessirski7868 Жыл бұрын
best tutorial I have came across for flex box. Explained very well and straight forward with examples. Thank you!
@danielpaul65
@danielpaul65 2 жыл бұрын
Thanks for the CSS Flexbox tutorial. I now feel confident with aligning objects on Front-end web development.
@enocol
@enocol Жыл бұрын
This is the only time I think I have actually learned how to use flex box. Thank you very much for he tutorial👍
@samratpudasaini
@samratpudasaini 2 жыл бұрын
Completed the flexbox froggy in an hour after watching this video. Amazing crash course Brad !
@johnnyholiday1150
@johnnyholiday1150 2 жыл бұрын
Brad, you just made me realize something that didnt sit in my head for over a year. just what i needed.
@maximkoval7167
@maximkoval7167 2 жыл бұрын
Amazing tutorial which covers everything necessary to get started with flexbox! Great end-project too!
@deekshantvaishnav5806
@deekshantvaishnav5806 2 жыл бұрын
Hey Brad, I love the you have changed your life, Huge respect for that. And much huge huge huge respect for teaching us these basics again and again. I never get bored of watching your videos again and again. Thank you. Stay safe, stay happy and take care care of you and your family.
@banyarnaing2597
@banyarnaing2597 2 жыл бұрын
Brad is really making this year better and better. Thank you.
@AlTushman
@AlTushman 2 жыл бұрын
Thank you, Brad. Your videos are the best. And thank you for making the code easy to locate when necessary.
@shakirkamal4958
@shakirkamal4958 2 жыл бұрын
I swear I just Love this Guy..
@jelly-beetle
@jelly-beetle Жыл бұрын
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!
@kristonburnstein
@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!!
@faizalimuhammadzoda4731
@faizalimuhammadzoda4731 2 жыл бұрын
You are so humble. Thanks for the time and effort you spend to make such helpful content.
@omarmahmoud4696
@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😍
CSS Grid Crash Course
53:45
Traversy Media
Рет қаралды 326 М.
CSS Flexbox Tutorial - Learn the right way
35:41
FollowAndrew
Рет қаралды 10 М.
Ice Cream or Surprise Trip Around the World?
00:31
Hungry FAM
Рет қаралды 22 МЛН
I thought one thing and the truth is something else 😂
00:34
عائلة ابو رعد Abo Raad family
Рет қаралды 10 МЛН
Flexbox CSS In 20 Minutes
19:59
Traversy Media
Рет қаралды 1,8 МЛН
CSS GRID Большое руководство
1:10:16
От 0 до 1
Рет қаралды 65 М.
Flexbox or grid - How to decide?
18:51
Kevin Powell
Рет қаралды 744 М.
Sass Crash Course
48:05
Traversy Media
Рет қаралды 405 М.
Learn Flexbox in 15 Minutes
15:12
Web Dev Simplified
Рет қаралды 1,2 МЛН
React JS Crash Course
1:48:48
Traversy Media
Рет қаралды 3,4 МЛН
Learn flexbox the easy way
34:04
Kevin Powell
Рет қаралды 726 М.
CSS Crash Course For Absolute Beginners
1:25:11
Traversy Media
Рет қаралды 4,5 МЛН
How to take control of Flexbox
16:01
Kevin Powell
Рет қаралды 142 М.
Flexbox design patterns you can use in your projects
15:33
Kevin Powell
Рет қаралды 444 М.