Flexbox Tutorial (CSS): Real Layout Examples

แชร์
ฝัง
  • เผยแพร่เมื่อ 23 พ.ย. 2024

ความคิดเห็น • 1.6K

  • @tborges3736
    @tborges3736 5 ปีที่แล้ว +71

    22:45 it changed my life forever. "margin: auto" 😍

  • @mio...
    @mio... 5 ปีที่แล้ว +124

    One of the best code explaining video I have ever seen: Detailed, thorough, spontaneous, clear... Amazing!
    Thanks!!

    • @svendbentjensen5512
      @svendbentjensen5512 4 ปีที่แล้ว +3

      Don't you mean: One of the best code explaining videOOOOOOOOOOOOS. Detailed, thorough, spontaneous, clear, amaZIIIIIIIIIIIIIIING. Thank yOUUUUUUUUUUUUU.
      ?

    • @mio...
      @mio... 4 ปีที่แล้ว +2

      @@svendbentjensen5512 no, i don't

  • @aminabdelgadir1171
    @aminabdelgadir1171 2 ปีที่แล้ว +15

    I'm really speechless! you can't be more simple, direct and accurate to explain a topic more than this. you are a gifted teacher. Hats off!

  • @getachewsharew5904
    @getachewsharew5904 4 ปีที่แล้ว +25

    till now i were in margin-left , margin-right , margin-bottom , margin-top but now i am in flex , auto , space-between , align-item , justify-content ... etc. thank you so much bro. plz guys give him five star !!

  • @scottvincentyoung6965
    @scottvincentyoung6965 3 ปีที่แล้ว +3

    This is a really great tutorial. Simple, clear, no mistakes or pauses or wasted time, well set up. All tutorial vids should be just like this. Thanks.

  • @bayinoyi
    @bayinoyi 3 ปีที่แล้ว +1

    Hands down this is the best TH-cam tutorial to grasp the concepts of flexbox.

  • @leanprogrammer
    @leanprogrammer 8 ปีที่แล้ว +275

    easily best flexbox tutorial on the web, keep it up!!

    • @LearnWebCode
      @LearnWebCode  8 ปีที่แล้ว +19

      Thanks!

    • @serenity2656
      @serenity2656 7 ปีที่แล้ว +3

      +LearnWebCode You literally saved my life + countless hours of time. God bless you!

    • @haiz1985
      @haiz1985 5 ปีที่แล้ว +1

      couln't agree more with this, super easy to understand for someone like me who doesn't know how to code *applause*

  • @fazalnajam
    @fazalnajam 4 ปีที่แล้ว +5

    You should teach *everything* on TH-cam. Concept, example and progress. How beautifully organized! Trust me, I've been searching for flexbox and grid tutorials (in 2020) and there's nothing even remotely close to the clarity of your video! I cannot like more! Subscribed!

  • @Kyuute_Kyuubi
    @Kyuute_Kyuubi 2 ปีที่แล้ว +6

    0:32 display flex/flex 1
    2:57 three column layout (order)
    9:09 (margins flex basis)
    15:52 mobile/responsiveness
    18:08 multiple rows of items (flex wrap)
    20:34 simple centering (margin auto)
    23:09 columns and rows (flex within flex & flex directon)

  • @88spaces
    @88spaces 4 ปีที่แล้ว

    I worked on a flex project for hours trying to figure out how to align material cards. This video saved me hours more. Thanks a great deal.

  • @londe7494
    @londe7494 6 ปีที่แล้ว +4

    Thank you, i've been studying HTML and CSS and Flexboxes have been confusing me for the longest time and your video helped me clear things up. You're a life saver!

  • @juanamador2965
    @juanamador2965 5 ปีที่แล้ว

    After obtaining my CSS certificate , I was told flexbox would make my css look better with less hassle, after watching this great video I am convenced learning to use flexbox is great, I appreciate this good lesson and i will continue to watch more...thanks

  • @Lawa9919
    @Lawa9919 8 ปีที่แล้ว +1169

    I cried a bit after "margin: auto;"

    • @LearnWebCode
      @LearnWebCode  8 ปีที่แล้ว +45

      LOL

    • @m41kdevelops41
      @m41kdevelops41 8 ปีที่แล้ว +97

      I know that feeling bro... years of life were wasted.

    • @SirSidi
      @SirSidi 7 ปีที่แล้ว +21

      it s not only me then.

    • @laurenthoxhaj7387
      @laurenthoxhaj7387 7 ปีที่แล้ว +35

      I cry every time I use it!

    • @sonnguyen3874
      @sonnguyen3874 7 ปีที่แล้ว +9

      me too! bro....

  • @nikeylashaw6890
    @nikeylashaw6890 4 ปีที่แล้ว

    I have been building websites for 27 years. Flexbox is the first css that really makes sense. Thank for your great tutorial. I can't wait to start rebuilding all of my websites using this code.

  • @shubham0638
    @shubham0638 5 ปีที่แล้ว +15

    This was the most satisfied I have ever been after watching any tutorial on youtube.

  • @timsullivan7155
    @timsullivan7155 5 ปีที่แล้ว

    Learned to code cobol on IBM360 long before web browsers so I have seen and attended more than a few education/tutorials. Your presentation and explanations are clear, concise and relate to real world scenarios. Job Well done. Wish I had seen this LONG ago.... Anyone that gave a thumbs down or a negative comment..... no reason for that.

  • @LebogangRatsoana
    @LebogangRatsoana 5 ปีที่แล้ว +14

    It's an actual steal that we are getting this much clarity for free. Super awesome.

  • @eklavyasharma
    @eklavyasharma 4 ปีที่แล้ว

    This is the best video I have seen on Flexbox. Some of them are only explaining without any examples and others' screen size is too small. Can't read the code at all. Yours was perfect. Great combination of Explaining with Examples. Thank you.

  • @BobMazzo
    @BobMazzo 4 ปีที่แล้ว +6

    3.5 years later and it still seems quite relevant. Great lesson indeed - thank you !

  • @shnam928
    @shnam928 6 ปีที่แล้ว

    I watched/read many flexbox tutorials, but I really liked the way you teach. "Why we do all of these things", which is your method is really important. I hope you keep on teaching. Thanks a lot.

  • @johnnweke5547
    @johnnweke5547 5 ปีที่แล้ว +4

    Currently attending a Web Dev Bootcamp. This vid explained a lot! You and Brad Traversy are awesome. Thank You.

    • @psale1
      @psale1 4 ปีที่แล้ว

      Which Web Dev Bootcamp did you attend?

  • @neosabiit
    @neosabiit 6 ปีที่แล้ว

    Sir,i have completed my first code project by watching your javascript in half an hour tutorial.
    now its flexboxxx time.....Thanks to u ...Love from Bangladesh Sir.

  • @alskywell
    @alskywell 5 ปีที่แล้ว +7

    Honestly, the best tutorial on flexbox I've seen, so far. You have a talent for teaching. Thank you!!!

  • @aarthiv6574
    @aarthiv6574 3 ปีที่แล้ว +1

    Watching this channel videos in 2021 ,I wish I could found this 2 years before. His way of teaching is so simplest and much clearly understandable for all members. I do not understand why this man has not yet received a million subscribers

  • @BillyLoweBeauty
    @BillyLoweBeauty 3 ปีที่แล้ว +5

    You changed my life in 28 minutes well worth the patience

  • @jorrickhoutman2613
    @jorrickhoutman2613 5 ปีที่แล้ว +1

    This is without doubt the best and easy to listen to tutorial I've seen so far..... Fast paced but not to fast, everything gets shown, basic insticts get reviewd... 100% best tutorial. keep it up!

  • @jelodev-j1f
    @jelodev-j1f 8 ปีที่แล้ว +14

    That centering text horizontally and vertically literally blew me up. Thanks a lot!

  • @samtucker8352
    @samtucker8352 6 ปีที่แล้ว

    I'm taking a paid class in HTML and CSS and you just taught me more about flexbox in less than 30 min than they did in hours worth of classes. Thank you!

  • @Alphadragon1979
    @Alphadragon1979 5 ปีที่แล้ว +5

    This has to be one of the single best flexbox videos I think I've seen. Great GREAT job!

  • @cekuhnen
    @cekuhnen ปีที่แล้ว

    Honestly after having watched for 3 days other tuts too this video is the most explanatory and well structured lecture

  • @kellymartin8090
    @kellymartin8090 5 ปีที่แล้ว +12

    Brilliant! You sir, are a fantastic teacher. I've been around for a long time, and in my opinion, you're the best I've ever experienced. This includes college instructors.

  • @psphotos
    @psphotos 5 ปีที่แล้ว

    Being a mobile app developer, I can say this is the bestest video which made my interest to learn HTML. I used to do a little bit of HTML in my earlier times of Phonegap/Cordova... but this video is like a PRO level tutorial for anyone.

  • @JMRpink101
    @JMRpink101 6 ปีที่แล้ว +5

    Such a thorough and easily-understandable tutorial! Thank you!

  • @navidansari3142
    @navidansari3142 6 ปีที่แล้ว

    Most clear and creative tutorial on flexbox, and also felt your joy when you vertically center aligned the content..

  • @itsumarejaz
    @itsumarejaz 5 ปีที่แล้ว +5

    your explanation and every thing including voice quality is awesome

  • @thisisashwani
    @thisisashwani 6 ปีที่แล้ว

    Every time you said, "What's the first thing that comes to mind when we face this scenario", it actually was the bad idea that you first mentioned which came to mind, that can be used for the scenario.
    Your explanation is simply amazing!

  • @nelsonomoro8591
    @nelsonomoro8591 8 ปีที่แล้ว +22

    this is the best tutorial video that i have watched in the whole of 2016!! Great explanation and humor too,...

    • @Seiyefa_him
      @Seiyefa_him 7 หลายเดือนก่อน

      10yrs later it still is 😢😢. Hopefully your still active to see my comment bringing you back here

  • @supercriz
    @supercriz ปีที่แล้ว

    Great explanations! I am just beginning my journey to become a web developer and I've learned about flexbox the last two days. The way you laid out your explanations gives a clear understanding of the content. Thanks.

  • @ryanexplorer
    @ryanexplorer 8 ปีที่แล้ว +43

    Great job, best youtube tutorial about Flexbox. 🔥

  • @mistborn1136
    @mistborn1136 4 ปีที่แล้ว

    Hey man! I just finished this tutorial and I am absolutely baffled. You didn't waste a single second and explained everything clearly. I was struggling with the concept of flexbox. After watching your video I created my own full responsive layout in 2 hours with flexbox. You made my day. Thank you very much. Please stay well.

  • @lars-sorensen
    @lars-sorensen 8 ปีที่แล้ว +30

    Best explanation yet on this topic

  • @anversadutt
    @anversadutt 5 ปีที่แล้ว

    For example #3 adding flex: 1 1 350px for the boxes will adjust the flex-basis to start at 350px and it will take up all the remaining space on big screens, if it comes to small screen it will adjust itself without adding any media queries. Thx. Your videos are gr8, keep 'em coming. :)

  • @kevsermuslu8594
    @kevsermuslu8594 4 ปีที่แล้ว +5

    Best flex-box video I’ve seen so far!! Love how structured it is! Thank you for sharing:)

    • @LearnWebCode
      @LearnWebCode  4 ปีที่แล้ว +2

      There are a lot of flexbox videos out there; so thanks!!

  • @happynarwhal1985
    @happynarwhal1985 3 ปีที่แล้ว

    Thank you, thank you, THANK YOU. I have always struggled with flexbox, mainly because I've used Bootstrap almost exclusively so I didn't actually dive too deep into vanilla CSS and this video is making things SO MUCH EASIER. You are amazing.

  • @ksk235
    @ksk235 5 ปีที่แล้ว +3

    It's a great video. Really appreciate it. Just a small suggestion. In 22:44 you won't actually need to use margin auto; to vertically center the text. There is a better flex boxy way of doing it. Just add justify-content: center and align-items: center in the .banner{} block. The text will be centered both horizontally and vertically

    • @MuhammadTalha-lg4jg
      @MuhammadTalha-lg4jg 5 ปีที่แล้ว +1

      He probably wanted to make the code shorter, but yours is helpful too, thanx.

  • @nathancornwell1455
    @nathancornwell1455 5 ปีที่แล้ว +1

    ive watched at least 10 videos on flexbox and this one is by far the best.

  • @isabelphillips451
    @isabelphillips451 6 ปีที่แล้ว +3

    I'm just 7 minutes into this video and I'm already enjoying this.... I love the way you said "Hmm, I'm the the only child" ... So funny, let me continue the video

  • @itsonlysound
    @itsonlysound 5 ปีที่แล้ว +1

    This is such a great video. I'm currently doing a distance learning degree and none of the course materials were able to explain this anywhere near as clearly and concisely, as you have. Thank you so much!

  • @syedusmanahmed
    @syedusmanahmed 7 ปีที่แล้ว +218

    With every example, I want to like this video. But I can only like it once. TH-cam should be as flexible as flexbox.

    • @CleverCheats
      @CleverCheats 5 ปีที่แล้ว +2

      I agree, TH-cam is outdated...

    • @bhushangawali81
      @bhushangawali81 5 ปีที่แล้ว +3

      Relatable man. Revisited this vid after months and wanted to like it again 😆

    • @张风-o6r
      @张风-o6r 5 ปีที่แล้ว +1

      agree!

    • @svendbentjensen5512
      @svendbentjensen5512 4 ปีที่แล้ว

      You want to like the videOOOOOOO? More than OOOOOOOONCE? Hahaha, that is such a funny notiOOOOOOOOON. Do you really like when people speak like THIIIIIIIIIIIIISSS?

    • @svendbentjensen5512
      @svendbentjensen5512 4 ปีที่แล้ว

      Man I really hate this guy's intonation. Blah blah blah blah BLAAAAAH. Blah blah blah blah BLAAAAAH. Then you use flex SHRIIIINK. Mih mih mih mih MIIIIIIH. It can just remains it's natural auto SAAAAAAAIIJSE. It's as if he thinks everything is somehow more clear when he talks like that. There's also a level of arrogance to it. Every third sentence is said with the subtone "see how easy this is? I am such a brilliant teacher, I just need to mention something exist, then everyone will learn what it meeeeeeeeans"
      I'm pretty sure it's the same guy who's behind the Udemy course "Git a web developer job", which was outdated and thus broken(april 2020), which didn't teach things but just mentioned them (in spite of the instructor from the beginning stating he would never just exactly that), and it had the same problem as this video: After a while you just want to make a drinking game. Drink every time he intonates like THIIIIIIIIIIS. You should probably not play this drinking game with strong alcohol, you WILL die.
      Must funny part about that course is that it claimed you could go from knowing basic html and css to being hireable developer in just a 15 hour course. Lololololol. It's a downright scam. There is just no way you go from having basic no JS knowledge to suddenly know enough about node.js, NPM and Webpack to be hireable.
      It's actually a really good example. He teaches students with no JS knowledge, and then he says "And then you just set up an array and use a JS selecTOOOOOOOOOOOR" and everyone is like "huh?"
      Edit: Just realized that it says in the description that he IS in fact the buy behind that atrocious Udemy course. It's pretty saying that you can recognize that from his voice and intonation ALOOOOOONE. If you are a little more advanced, then maybe buy the course (for 9.99, not $199, are you insane!), but make sure to work through it within the 30 day refund-period. Around section 7 the first problems arises, around section 16 you really start realizing the issues. If you can and will troubleshoot a lot, then the course may actually be ok. But on the other hand, if you have the ability to troubleshoot stuff like node.js and webpack, then you probably don't need the course.
      Anyway, I digress, it you don't want to waste your money, make sure to not buy the course and then let it lay around for 4 weeks, cause chances are that you are going to want a refund.

  • @nareshpurushotham37
    @nareshpurushotham37 5 ปีที่แล้ว +1

    When u made that text center in the black box with simple line of code, I felt just wow that's too good, I used to do display: flex, justify-content:center, align-items:center
    U made my day bro thank u

  • @MuhammadTalha-lg4jg
    @MuhammadTalha-lg4jg 5 ปีที่แล้ว +4

    How can someone be this good at explaining things?😅😅😅

  • @nssdesigns
    @nssdesigns 5 ปีที่แล้ว +1

    I'm a graphic designer of 32 years now getting into website, CSS and html (never too late right?) I use Word>Press and lately jumped ship from DIVI and Brizy to OXYGEN. OXYGEN uses flexbox which is great and now thanks to this video helps me understand the options and why and how to use it. SUBSCRIBED and off to your channel.

  • @sahilsinghhtc
    @sahilsinghhtc 7 ปีที่แล้ว +26

    Best flexbox tutorial...

  • @pankam7800
    @pankam7800 5 ปีที่แล้ว

    I have stopped the video in 6.45 ..just to give a thumbsUp (already a subscriber) ..and continue..!!
    YOU are the best teacher-explainer in TH-cam..!!
    FANTASTIC TUTORIAL again.!!
    Thanks for taking the time to make videos for us ..I know that it takes a lot of time and effort

  • @himatjutla6993
    @himatjutla6993 8 ปีที่แล้ว +44

    i love you! Thanks, never using floats again :)

  • @L0kacitron
    @L0kacitron 4 ปีที่แล้ว

    Mindblown and at the same time a bit frightened by the extent of things I have to learn as a newcomer of web design and coding. This made that process easier. Thank you so much for this very instructive and informative video!

  • @overunityinventor
    @overunityinventor 7 ปีที่แล้ว +20

    wish I could find you earlier! i would have saved lot of css work frustrations!

  • @danaelza
    @danaelza 6 ปีที่แล้ว

    Haven’t been doing websites for a couple of years. This video and others you have produced are helping me get back into the flow. You are a great teacher.

  • @mg-ln9sw
    @mg-ln9sw 5 ปีที่แล้ว +6

    I can't believe I've waited this long to learn about flex box.

    • @svendbentjensen5512
      @svendbentjensen5512 4 ปีที่แล้ว

      Maybe you are not cut out to be a developEEEEEEEEEEER? Because then you need to stay on top of THIIIIIINGS. Flexbox has been around for half a decade, what are you even talking abOOUUUUUUUUUUT?

    • @godfathermikal
      @godfathermikal 4 ปีที่แล้ว

      @@svendbentjensen5512 Wow. Do you let your professional ignorance hang out this much all the time?
      If you expect every developer to stay up to speed on everything all the time then you are an absolute idiot. I've been doing back end and cloud development for so long that I've not touched a UI in years. So maybe you should learn a little bit about what being a developer even is in 2020.

  • @robertoinnocenzi3626
    @robertoinnocenzi3626 6 ปีที่แล้ว

    No words, simply the best explanation ever listened to so far

  • @shazzamconsta7325
    @shazzamconsta7325 4 ปีที่แล้ว +4

    I so share your joy with 'margin:auto;' haha.. Thanx a zillion, life changing tutorial!

  • @cosmelvillalobos6448
    @cosmelvillalobos6448 4 ปีที่แล้ว

    Hey man i was working on a project and couldn't get to understand how to fully use flex boxes until i saw you video, really well explained and the examples nailed it for me. I was able to correct my mistakes and finish my project ,thanks a lot !

  • @wanderdias6645
    @wanderdias6645 7 ปีที่แล้ว +6

    This is awsome! You're the man, great tutorial, very clear explanation. Your Udemy courses are also very good.

  • @ShivamSingh-bx5lg
    @ShivamSingh-bx5lg 5 ปีที่แล้ว

    Dude , trust me I have been to a lot of tutorial channels and they were not bad but your methodology tops them all, straight to point examples!!

  • @BloodyClash
    @BloodyClash 5 ปีที่แล้ว +101

    OMG...SO extreeemely perfectly and easy explained. Thank you so much :)
    From now on : FLOAT my ass :D

    • @rajeshbasnet501
      @rajeshbasnet501 4 ปีที่แล้ว +1

      Our college taught us float that pained my ass in maintaining media query. As I learned flexbox it was like chocolates in hand. Now i use flexbox everywhere literally.

  • @SoulStitch1111
    @SoulStitch1111 2 ปีที่แล้ว

    I agree with Miodrag Veljovic. Definitely one of the most clear and understandable vids on coding. Wonderful.

  • @gerryattrik4410
    @gerryattrik4410 8 ปีที่แล้ว +101

    Came for the cat. Stayed for the tut.

  • @a.joshatt7518
    @a.joshatt7518 5 ปีที่แล้ว

    Best flexbox tuts I've ever seen. Examples does cover more than ordinary learning.

  • @muhammadarsalan1766
    @muhammadarsalan1766 8 ปีที่แล้ว +6

    Super Awesome! you made a genuine subscriber!

  • @internap627
    @internap627 5 ปีที่แล้ว

    This video gives a practical demo of all the flex-box concepts I've learnt over the past couple days.

  • @ranvirsinghg
    @ranvirsinghg 8 ปีที่แล้ว +6

    not even single dislike.... you are doing great bro...

    • @AsifMehedi
      @AsifMehedi 7 ปีที่แล้ว

      Well, now, one year later, there are 30 dislikes to 4K likes. I wonder why anyone would dislike this video. Perhaps clicked the wrong icon by mistake?

  • @wojtek6206
    @wojtek6206 5 ปีที่แล้ว

    I'm just making a website on commission for customer after a long time of break. Few days ago I got to know about flexbox and I didn't understand it until I watched this video. Great job!!

  • @ahme585
    @ahme585 4 ปีที่แล้ว +5

    23:04
    "margin: auto;"
    bind blown

  • @dougui20
    @dougui20 4 ปีที่แล้ว

    I didn't even finish the tutorial , had to stop and comment and like it, great job using examples where we can see the actual layout on the web page, other tutorials, people just use bunch of divs with small content and maneuvering them around. I could get a clear picture.

  • @hugochavez6170
    @hugochavez6170 5 ปีที่แล้ว

    As a backend developer I admired CSS for its many possibilities and options. But at the same time I never understood, why the alignments, centering and positioning were *ucking complex and hated CSS. After this video I think the backend developers are much more happier about the flex box than the frontend developers. :)
    Being a Turk, born and grew up in Turkey, living in Germany for more than 14 years and not using English in my everyday life, I was able to understand all parts of your tutorial. Very clear and simple language, very precise explanation with very short and smart reasoning. With just one word: PERFECT!

  • @MrEamunn
    @MrEamunn 5 ปีที่แล้ว

    Simple, clean and easy to understand. All the other tuts used complex examples that i spent more time figuring out there html and css that I missed most of the video.Excellent job. Hope you're still making videos.

  • @yeeen123
    @yeeen123 6 ปีที่แล้ว +1

    Summary:
    * parent div: display: flex; justify-content: space-between (aligin left & bottom, space out the elements' margin in between to occupy reminding space, default is flex-start); align-items: flex-start / flex-end / center (align top & bottom, default is stretch); flex-direction: column (default is row)
    * plus child div: flex: (manage elements to occupy in the flex direction based on the ratio specified); box-sizing: border-box (if u hv both padding & width); flex-basis: % (flex way of specifying width; same as "width"); flex-wrap : wrap (default is no wrap); margin: auto; (centre both horizontally & vertically)
    * @media (min-width: px)
    * can nest flex in flex

  • @RussDnB
    @RussDnB 4 ปีที่แล้ว

    Dude. I pained over horizontal and vertical entering for about 3 hours this morning. Then I found your video.
    Right now, I can totally get behind the excitement of margin: auto;
    I need refactor some of my code, and setting the height of a 'box' to match the browser height (minus any header and footer) is another story, but this should be a massive help alone. As well as the rest of what you have taught me.
    Thank you sir.

  • @OriBengal
    @OriBengal 6 ปีที่แล้ว

    Wow! Thank you! I just discovered Flexbox tonight, but... it became very clear very fast that without it, I'm going to have to add a zillion media queries, etc... Your tutorial was top-notch, and helped a LOT.

  • @AsadAli-vk6gc
    @AsadAli-vk6gc 4 ปีที่แล้ว

    hi sir, im your student at udemy too, you are a real savior. this lecturer is also full of information.

  • @smmosfequrrahaman3768
    @smmosfequrrahaman3768 6 ปีที่แล้ว

    You are the guru , you are the person whom can be called "Boss" , great tutorial ...

  • @mitchtheneedle
    @mitchtheneedle ปีที่แล้ว

    I'm just a rock-n-roll songwriter and producer who was sick of the cumbersome limitations of our band's wordpress site (and slow as molasses response time on a GoDaddy shared-server hosting plan, so I decided I'd code my own site from scratch with my very limited css knowledge. It's AMAZINGLY refreshing to find this video, as it filled in every single question I had about layout of my new simplified site. And, as so many others have said, "This presenter is fantastic!" But I just wanted to say it myself with a big "Thanks". --Jer of the band "Mitch the Needle" (no one in the band named Mitch, just three great friends making enjoyable pop/rock music).

    • @LearnWebCode
      @LearnWebCode  ปีที่แล้ว +1

      Rock on 🤘 - you're so welcome. This is one of the coolest comments I've ever received, thank you. I'm glad the video is helpful; flexbox is so much easier and more intuitive than the old "floats" approach. And there's something really satisfying about seeing the site you coded from scratch load 10x faster than the old WP site. -Brad

  • @pmcomputer1
    @pmcomputer1 2 ปีที่แล้ว

    This is the absolute best tutorial on Flexbox concepts. Not relative, Thank you so much!!!!

  • @Vishalkumar-vj7hx
    @Vishalkumar-vj7hx 3 ปีที่แล้ว

    this is the best explanation of flexbox . I have seen many videos on LinkedIn learning , coursera and youtube but you nailed it . awesome . god bless you bro!

  • @kelplushfr
    @kelplushfr 2 ปีที่แล้ว

    I had no idea how to work with flexbox. When i watched tutorials but for real after watching this video I am surprised how amazing flexbox is and the guy teached. Just knew about your channel and subscribed

  • @123gregery
    @123gregery 5 ปีที่แล้ว

    Man, that was good. Simple everyday examples. Not only this, but in the process you are teaching basic css, too.

  • @brito809
    @brito809 2 ปีที่แล้ว

    You are definitely the best in all youtube. You are the only one i have seem that uses real examples.

  • @LSTA24
    @LSTA24 5 ปีที่แล้ว +1

    The way you explain this whilst showing visual clues works perfectly - I found this so easy to understand! cant wait to see more of your content, this has been very helpful - Thank you

  • @nathaliasantos6043
    @nathaliasantos6043 2 ปีที่แล้ว

    Thank you! Every video I tried to watch was so annoying. You made it very easy to understand everything. Again, thank you for sharing your knowledge.

  • @DomiSiki
    @DomiSiki 4 ปีที่แล้ว

    Great video and logical explanation. Very well prepared with all divs and classes easy to understand. Even text inside of divs we're different sizes so you could show flex start and flex end properties. Bravo

  • @coryallen202
    @coryallen202 6 ปีที่แล้ว

    Best Flexbox tutorial I’ve found. This has cut my development time substantially. Thanks!

  • @CiaowebCoUk123
    @CiaowebCoUk123 6 ปีที่แล้ว

    Amazing tutorial and I must agree with other comments on how good is the teacher. 10 out of 10 !

  • @LunaLovelyy
    @LunaLovelyy 3 ปีที่แล้ว

    This is the best video about flexbox in the entire TH-cam. You are the best teacher.

  • @shoirat.3696
    @shoirat.3696 3 ปีที่แล้ว

    Layout was very confusing for me with all the grids, displays, flexboxes, etc. And after watching this video I finally understood positioning, thank you

  • @AliRaza77
    @AliRaza77 6 ปีที่แล้ว

    such a great explanation of flexbox. no comparison ever.

  • @WPAcademyPK
    @WPAcademyPK 6 ปีที่แล้ว

    Easiest and Greatest tutorial about flex on Web. Thank you.

  • @wnoland
    @wnoland 5 ปีที่แล้ว

    Better, and much quicker laying down immediately usable knowledge than the entire CSS /HTML modules in my WebDev bootcamp.

  • @rajatagarwal426
    @rajatagarwal426 6 ปีที่แล้ว

    superb.. to set the content vertically center is an awesome part. I take a lot of headaches to center the content. awesome video display:flex
    2: child=> margin:auto

  • @edb.5457
    @edb.5457 4 ปีที่แล้ว

    The best explanation, I've come across of Flex Box.

  • @abdulnafay72
    @abdulnafay72 3 ปีที่แล้ว

    Even though i know all these i still watch the whole video. Your teaching skills are great.