Learn flexbox the easy way

Поделиться
HTML-код
  • Опубликовано: 25 ноя 2024

Комментарии •

  • @rafihasan7787
    @rafihasan7787 Год назад +255

    I missed the guy who inspires people who are currently on The Odin Project and comes to these excellent videos.
    So I'm commenting to all the learners, I know it's difficult, but you got this!

    • @sylviabellie4297
      @sylviabellie4297 Год назад +4

      Aww thats so sad I loved seeing those comments! Thanks for taking that place 👑

    • @bien_venu
      @bien_venu 11 месяцев назад +6

      Thank you!
      All of this reading can get overwhelming, but it's totally worth it.
      Keep pushing guys 🦾

    • @plantifulalexandra
      @plantifulalexandra 9 месяцев назад +3

    • @abdelhakimhamidi-zv4qs
      @abdelhakimhamidi-zv4qs 8 месяцев назад +5

      where are you now after 6 month

    • @rafihasan7787
      @rafihasan7787 8 месяцев назад

      @@abdelhakimhamidi-zv4qs Caught up in a 9-5 job, things got difficult so I didn't even write a single line of code in the last 3 months 😢 Will try to get back on track starting from April.

  • @Jugement
    @Jugement 2 года назад +1362

    As a professional bodybuilder, this really helped me to properly display my flexes, thanks
    10/10 would watch again

  •  Год назад +96

    The Odin Project brought me here and maaan, what a teacher!!! Congratulations.

    • @wotizit
      @wotizit Год назад +3

      Thor?

    • @issamramdani825
      @issamramdani825 11 месяцев назад +1

      How is the Odin project going for you? did you finish it ?

    •  11 месяцев назад

      @@issamramdani825 I haven’t finished it yet! Still a LOT to learn, but I know I’m improving everyday with TOP.

    • @Codebyakshay
      @Codebyakshay 7 месяцев назад +3

      Am i missing something? Whats odin project bro explain

    • @parvejshahlabib9167
      @parvejshahlabib9167 7 месяцев назад +1

      I am here for 2nd times from the odin projects after two year doing the same things😅

  • @ahmed51988
    @ahmed51988 Год назад +12

    Seeing a senior acknowledging how css can sometimes be frustrating gives me some confidence. I'm no dumb then and It will get better lol

  • @AlexBlack-xz8hp
    @AlexBlack-xz8hp 2 года назад +292

    This was incredibly useful. I've been using Flex box for ages, but never understood several aspects you covered. Thank you very much for this.

    • @JaspreetSingh-ci9xs
      @JaspreetSingh-ci9xs 2 года назад +2

      Same

    • @vladrileynavilys
      @vladrileynavilys Год назад +4

      yup, i think it's not a big stretch to say the naming of these properties was poorly thought out, if most people are struggling to make it intuitive enough after some time of use.

    • @SEE_DESCRIPTION
      @SEE_DESCRIPTION Год назад +2

      Bruh he knows where a beginner gets stuck.... May ram ji keep him happy forever 😊

  • @Eltonlin1998
    @Eltonlin1998 9 месяцев назад +2

    This is incredible, not just the visuals, but the words too e.g. "they start off at with the same width, they grow/shrink at the same RATE, so they end up with equal size"

  • @maialso6096
    @maialso6096 2 месяца назад +1

    22:33 just .. WOW!
    30:33 The best explanation on the differences between align-items and justify-content naming, it makes sense now.

  • @Donnshin
    @Donnshin Месяц назад +1

    I became discouraged with CSS/Flex/Grid and gave up a few years ago. I absolutely love your content and glad I stumbled upon you as I try and give this another go.

  • @jackc.5271
    @jackc.5271 7 месяцев назад +5

    I've been stuck on a flex exercise in TOP for almost a week now, was searching for solutions and found this video. Half an hour after watching, I completed the exercise almost flawlessly. Thank you good sir.

  • @haibaidzokwomandre1468
    @haibaidzokwomandre1468 9 месяцев назад +9

    I am taking the Meta frontend on coursera and fullstack open by uni of Helsinki but I always refer to TOP to get a deeper knowledge on fundamentals. Thanks for this great content.

    • @parvejshahlabib9167
      @parvejshahlabib9167 7 месяцев назад

      Hey there, I following the TOP and it's excellent. Can you tell me what do after finishing TOP

    • @official_bqpro
      @official_bqpro 6 месяцев назад

      @@parvejshahlabib9167 hi, am also doing TOP, where are you located in ?

  • @kenmken
    @kenmken 2 года назад +103

    Really excellent video. I find CSS content explaining the underlying mechanics of different rules like this are very lacking. It's mostly just how to achieve a certain style/layout and you have to figure out the mechanics along the way. This type of content is priceless

  • @TechnicolorMammoth
    @TechnicolorMammoth 2 года назад +41

    Definitely part of the, “been using this for years…didn’t really understand the how”, which absolutely bugs me. I hate not understanding how something works. Honestly to a detriment as I’ve gone through so many resources wasting the most precious resource: time. I’ve been using HTML and CSS a long time, but your videos are really helping me fill-out and polish those skill sets in a productive and efficient manner!

  • @leodelcastanher
    @leodelcastanher 2 года назад +5

    It doesn't matter how much I think I know about something. Everytime I watch a Kevin Powell video I lean something new! Keep up being our Front-End dude!

  • @Semidicht
    @Semidicht Год назад

    My only regret is that for a very long time I have been (badly) using flexbox by sheer trial and error. After watching this video it all finally makes sense!!!! Thank you!

  • @BUGPLAYS
    @BUGPLAYS 2 года назад +1

    By far the best source of information of any kind when it comes to flexbox. I've been trying to learn it for the last 3 or so weeks and every time I think i start to get it, flex starts going crazy and I become lost again.

  • @chenellesgameplays
    @chenellesgameplays Год назад +6

    It's thanks to your videos that I am still this invested in learning CSS without being terribly frustrated. Every time there is a mess in my head about something I just look at your videos and I am back on track with clear understanding of the subject! Truly grateful for your help :)

  • @Blargenfadibledoken
    @Blargenfadibledoken 4 месяца назад

    You are an excellent teacher! Not only do you obviously have dev skills, but you have some serious teaching skills too.

  • @Berbipedia
    @Berbipedia 9 месяцев назад +1

    Hey Kevin, I wanted to thank you directly for this video. I was struggling to understand some concepts of Flex. Currently I'm on my path to become a FS Developer. And you helped me SO MUCH with this one. I can't thank you enough. I'm another Odin Project fellow by the way. Keep these great videos coming!

  • @cxdimarco
    @cxdimarco 8 месяцев назад

    This just clarified some big issues that I was having with Flexbox - mainly not responding how I expected it to. Thanks so much, Kevin!

  • @Letsmeetpp
    @Letsmeetpp Год назад

    Hello Kevin, Thanks for your videos, it helps a lot. I have started my journey to learn web development from scratch, since February 2023.
    Also, If anybody here learning the same way, lets connect guys, It would be great help for everyone if we learn things in a group. I am on the verge of starting to learn Javascript. I hope I will be able to tackle all hurdles in future.

  • @lilyshevchenko7048
    @lilyshevchenko7048 Год назад +3

    You're a gentleman and a scholar, good sir. Ive always hated CSS but recently wanted to get back into more of the frontend line of work and deeply understand all the properties and when/how to pick them instead of wildly throwing darts and hoping they would stick. I have to say nothing really made it land as well as your videos. Deepest gratitude. You have a real knack for teaching! 🙏

  • @alex_marr
    @alex_marr 2 года назад +2

    I love your style of explaining how those things works. Most other people just show what you can do, but never touch the subject of why it works or doesn't.
    Really helps the understanding.

  • @WhatsMyNameAgain93
    @WhatsMyNameAgain93 2 года назад +5

    The timing of me seeing this couldn’t have been better. Your channel is AMAZING for explaining CSS and realising how great it can be

  • @christopherpink842
    @christopherpink842 2 года назад

    WOW!!!! literally i was building a website and having issue with flexbox, and this video answered the WHY certain things was not happening THANK YOU VERY MUCH

  • @ciano8999
    @ciano8999 2 года назад +4

    This was super helpful. I have started a software developer course and have been finding it a bit confusing when it comes to flex. Seems much more straightforward now thanks.

  • @RVilkaitis
    @RVilkaitis Год назад

    Oh my god, that helped me a lot. Im just beginning my journey and i was stuck on flexbox because i knew how important it is to understand it, now its all clearer. Thanks !

  • @abouzarazarpira6198
    @abouzarazarpira6198 2 года назад +1

    by far the best flexbox tutorial I've seen so far

  • @hassanmoechtar
    @hassanmoechtar Год назад +1

    Thanks! I'm doing a home course Front-End Development, your video made me understand the basics better.

  • @Vampirat3
    @Vampirat3 11 месяцев назад

    Man , wow , top on search results , not asking for money , AND you gave a code pen ?
    Thank you !

  • @daleryanaldover6545
    @daleryanaldover6545 2 года назад +2

    I remembered the first time I worked with flexbox and I can confidently say, "Random bullshit go!"
    Really glad you did a deep dive on flexbox as I saw one of your challenge videos you were having a hard time aligning the content items.
    And shout out for flex-basis, I didn't knew it was a parameter for flex attribute. I was using it without really knowing the magic it truly holds. Now I will go back to sleep
    Edit: I came back here because I forgot flex-basis existed, I'm getting old af

  • @adegboyegablessingolamide4147
    @adegboyegablessingolamide4147 2 года назад

    Very insightful... In my experience with flex, I have usually focussed on the parent properties and not the likes of shrink, grow, order, etc that you touched... Thanks...

  • @frankroos1167
    @frankroos1167 2 года назад

    "Sometimes it doesn't quite do exactly what we ask"? It ALWAYS does exactly what you ask. But you have to ask for the right thing. Must have been a slip of the tongue, as the meaning of what is said is right.
    This is a common thing about computers: Always does what you tell it, never what you want.
    And another good lesson. Thank you master Kevin.

  • @vona5251
    @vona5251 Год назад +1

    Thanks a lot Kev, this is Khani from South Africa, I am a graphic design tutor and I was recently given web development to teach, your videos have really been helpful. I am a subscriber and I wish to enroll in one of your courses in the near future.

  • @CoconutwCoco
    @CoconutwCoco 2 года назад

    This is exactly what I want to hear when I am seeing display flex does its thing! I have been checking but u r the one tells the fundamental abt it! Got me excited to clear a confusion n know in depth!

  • @agustinvis5720
    @agustinvis5720 2 года назад

    I watched A LOT of videos about flexbox. This is, by far, the best video about flexbox I had ever seen.
    You explained everything one always wants to know about why everything works the way it does (I'm sure there's more to explain, but this video deserves 5 stars).
    Thank you very very much, and congratulation on you great channel. I watch this channel a lot.

  • @joaopedroalves6777
    @joaopedroalves6777 Год назад +1

    dude, you are a goddamn hero

  • @prophetnozza4150
    @prophetnozza4150 Год назад

    I'm doing a diploma boot camp in web development, your guided videos help me without end! Clear, depth, concise and to the point! Thank you!

  • @ABUHMOSES
    @ABUHMOSES Год назад +1

    i love the simplicity of your work, i understood a lot even as a beginer

  • @liliponds
    @liliponds 9 месяцев назад

    TOP - Adding my first ever comment on RUclips, maybe I was saving it for a special moment - here it is - for The Odin Project(TOP) community. It is great to see everyone making progress, at their own pace but moving forward together, best of luck!

  • @its_trenner2900
    @its_trenner2900 2 года назад +7

    I am about a month into learning HTML and CSS. I just started learning flexbox and this was incredibly useful! This is a whole new big world I am tackling but your channel is really helping to understand things. Thanks for videos!

    • @Cognitoman
      @Cognitoman 2 года назад

      How you doinng

    • @YasirKhan-yv3zj
      @YasirKhan-yv3zj 2 года назад

      Hey how its going!!?

    • @BarnabyWinch
      @BarnabyWinch Год назад

      sean dyche
      👍

    • @maximocaceres4685
      @maximocaceres4685 Год назад +1

      Hey, did you stick with it? New learner here!

    • @its_trenner2900
      @its_trenner2900 Год назад

      @@maximocaceres4685 You know for a career choice I did not. Maybe its my old brain, but it was a bit much for me. I decided to into security instead. Best of luck though :)

  • @giulyanv
    @giulyanv 2 года назад +10

    Hey Kevin! I'm starting to learn everything about web development and your channel is helping me out a loooot! I would like to thank you for such an extremely good content. You're really fun while teaching!

  • @johnsondev169
    @johnsondev169 Год назад

    The video is amazing! I keep coming back to watch this video every once in a while to make sure my understanding of flexbox is correct.

  • @ranjoyguhathakurata5650
    @ranjoyguhathakurata5650 2 года назад

    Absolute joy and pleasure. One who loves flexbox can understand this feeling.

  • @Kuraviso
    @Kuraviso 8 месяцев назад +1

    for everyone that landed here because the odin project : Keep going you got this! remember to drink water and code everyday!

  • @joaquinroman1810
    @joaquinroman1810 Год назад +1

    I've been using margin all this time and the only thing i did was making my life harder haha. Thank you

  • @darylmirontos
    @darylmirontos 4 месяца назад

    Thank you for this tutorial now i understand how flexbox work in an easy way, best tutorial i've ever watch about flexbox.

  • @GR_BackingTracks
    @GR_BackingTracks Год назад

    When I'm supposed to be applying for work, I watch educational videos, and that is when I learn the best...
    Thanks, Kevin!

  • @Gabriel-dd5yt
    @Gabriel-dd5yt 11 месяцев назад +1

    To all people doing The Odin Project, you got this!

  • @Manas-co8wl
    @Manas-co8wl 11 месяцев назад

    You taught me so much about flex I feel like I can almost program the behavior elsewhere. Thank you so much

  • @Burnnskii_Gaming
    @Burnnskii_Gaming 2 года назад +12

    perfect timing on this for me! just finished your playlist with the 3 flexbox videos. i learned more from you in those short videos than a $130 udemy course. hero status.

    • @daleryanaldover6545
      @daleryanaldover6545 2 года назад +5

      most udemy courses are beginner even tho they tag it as intermediate. I highly recommend css-tricks if you haven't learned about it yet.

    • @laxmiprasanna4092
      @laxmiprasanna4092 2 года назад +3

      @@daleryanaldover6545 you bought a udemy course for $130 ? I alwayd bought them for only $9

    • @ahmadzenji6559
      @ahmadzenji6559 2 года назад +3

      @@laxmiprasanna4092 u guys buy udemy courses??

    • @senrign
      @senrign 2 года назад

      lol never pay full price to udemy courses :D

  • @paol7
    @paol7 2 года назад

    32:32 do my own thing don't listen to what everyone else is doing, I'm different from my siblings ignore my parent and do what I wanna do. Thanks for the advice, lol.

  • @mueblenudecarpinteriacancu8616
    @mueblenudecarpinteriacancu8616 9 месяцев назад +1

    how does this video only have 22k likes!??!?! kevin oure tha mastah of the mastah's thanks for all your videos!.... and TOP fellas hang in there and keep grindin!

  • @JaradDeLorenzo
    @JaradDeLorenzo 2 года назад

    I've never dreamed Fred Armisen could teach me so much about flexbox ! This was extremely well done. Thank you sir.

  • @dinckelman
    @dinckelman 2 года назад +2

    Kevin out there asks, completely unironically, why his metrics are through the roof this year, and then posts videos like this. That's why. Topic explained clearly, step by step, with examples, and reasoning. What else could you want?

  • @kanavchopra7333
    @kanavchopra7333 2 года назад

    Best video on YT for flexbox. This video is even better than your older videos. Thanks Kevin.💯💯💯

  • @zeeshansindhu
    @zeeshansindhu 5 месяцев назад

    I have been taking you lectures for a quite a while. you have a very good grip. Thanks for your lectures.

  • @agustinernestocardeilhacba2995

    bro... My day to day involves more backend stuff but you have css in your veins... its looks you really love it !...

  • @godwinolokor9372
    @godwinolokor9372 Год назад

    This is honestly the best explanation about flexbox I have seen. Thanks Kevin.

  • @drawdownwind6636
    @drawdownwind6636 Год назад

    This tutorial cleared up alot of the issues I've been having! Thanks!!!

  • @NearLife4life
    @NearLife4life 2 года назад

    This video is necessary viewing for any css would-be master. I can't believe i stumbled across it, it's that good.

  • @algavone
    @algavone 6 месяцев назад +1

    Kevin! You're a breath of fresh air in a stifling, insalubrious world full of computer programmers who suck at teaching :)

  • @silasowu4502
    @silasowu4502 Год назад +1

    Rich content, Kevin. I just relearned it again and even recommended it. Thanks a lot

  • @Garydoug
    @Garydoug 4 месяца назад

    By far my favorite code coach

  • @xiangli8906
    @xiangli8906 2 года назад +1

    I'm a new to CSS world. Found this video, referenced by the Odin Project. KP explained the flexbox very well. 10/10 no doubt.

    • @alfonsovieyra9321
      @alfonsovieyra9321 Год назад

      How's the progress coming along? Have you finished foundations?

    • @xiangli8906
      @xiangli8906 Год назад +1

      @@alfonsovieyra9321 yea it’s pretty good. I finished the foundations and now digging into the ruby path. The Odin’s has a lot of external links in their tutorials, most of them are pretty good imo, just sometimes you might feel some contents are duplicate with the others…

    • @blueskies3336
      @blueskies3336 Год назад +1

      @@xiangli8906 Thats great to hear! Glad to know you're still working your way through the curriculum. A lot of people i have messaged on other videos seem to have but given up lol I reckon at this point you'll make it all the way. I'm curious to know what you think has been the most difficult challenge you've faced thus far in the curriculum overall?

    • @xiangli8906
      @xiangli8906 Год назад +1

      @@blueskies3336 the lessons are actually not too hard if you follow the curriculum step by step. Hard part are the projects - there are million ways to do it, but it’s a good opportunity to learn some good ideas from the codes submitted by others.

  • @adetorofatiha
    @adetorofatiha 2 года назад

    Thank you so much kevin. I've been strugging with flex box for a while now and this really helped me.

  • @mrgp9
    @mrgp9 Год назад

    Thank you for your videos helps me a lot. I also want to say that u really looks like a good guy, geting really positive vibes from you and your videos, which makes it even more fun to learn 😄

  • @Zach-rw6jf
    @Zach-rw6jf 2 года назад

    Thank you so much! I've primarily been a backend developer and my latest project is requiring more front end work. This just solved many of my problems.

  • @Na4Ge4
    @Na4Ge4 2 года назад

    this flex family style is giving me lots of confusion. really appreciate your effort making it so easy to understand.

  • @unblemished_
    @unblemished_ 2 года назад +1

    Thank god you exist, and thank you for making it so understandable. Appreciated!

  • @MichaelSoriano
    @MichaelSoriano 2 года назад

    This is prob the best flex box tutorial I’ve seen

  • @Techvideos-q7u
    @Techvideos-q7u 3 месяца назад

    Kelvin always does it better, any day, any time, every minute 🔥

  • @Furki4_4
    @Furki4_4 Год назад

    Thank you Kevin, I really feel that I understand how flex works first time.

  • @garyenglish1221
    @garyenglish1221 2 года назад

    You are an absolute star. Thank you SO much for all of your wonderful tutorials.

  • @DominicHughes-b6d
    @DominicHughes-b6d Год назад

    Thank you Kevin, this video was really helpful for understanding flexbox better.

  • @janebenson9205
    @janebenson9205 Год назад

    Thank you for bringing clarity to Flexbox!

  • @_ata_3
    @_ata_3 2 года назад

    Thank you for this. It helps to clear flex a lot.

  • @MelodicMethod
    @MelodicMethod Год назад

    wow, I can't believe you made this understandable. hats off to you, good sir!

  • @caesarbala
    @caesarbala 11 месяцев назад

    Just now understood how flex:1 works never covered on other tutorials

  • @harisiftikhar9623
    @harisiftikhar9623 2 года назад

    Maaan...! that was Awsome i had never feel confident using FlexBox .. and like You said in the beginning .. I am Feeling Confident Now.. Great Work Keep that Up..!

  • @weeb3277
    @weeb3277 2 года назад +3

    Maybe you could make a video on Flex vs Grid.
    To see when to use one over the other.

  • @miss3773516
    @miss3773516 Год назад +1

    Thanks Kevin! Your explanations and examples makes CSS so simple and easy to understand, and I am now actually excited about CSS instead of dreading it. Awesome!!

  • @noahdiez9400
    @noahdiez9400 Год назад

    I'm not very bright but this was really informative in an understandable way. Love how you explain whats actually going on.

  • @dmcaneca4972
    @dmcaneca4972 2 года назад

    Thank you for this vid! I'm a beginner and would really want to understand better. It's a good thing you used nav as the sample for this vid!

  • @SpaceDoodle2008
    @SpaceDoodle2008 2 года назад

    Just the first 2 minutes helped me a lot!

  • @worldclasscode1847
    @worldclasscode1847 2 года назад

    Nice vid! I love Flexbox. It's so useful. I use it on each and every web page, multiple times.

  • @surajghimire7107
    @surajghimire7107 Год назад

    Just cleared all my doubts. Thank you very much, wizard !!

  • @johnatteo822
    @johnatteo822 2 года назад

    Hey Mr. Powell I bought one of your shirts from your merch last month and it still hasn't gotten delivered yet. I appreciate your channel and everything you do to simplify css for us. thankyou have a great day!

  • @mahirmuhammad6148
    @mahirmuhammad6148 2 года назад

    despite the great content, I found your presentation really friendly and jolly! Radiates happiness!

  • @adrianpabloalvarez2523
    @adrianpabloalvarez2523 2 года назад

    Definitely helped to come into peace with CSS. Very good video. Thank you!

  • @eumm11
    @eumm11 2 года назад

    Thank you so much, everytime time I watch you I learn something new!

  • @burakarslan24
    @burakarslan24 Год назад

    I had been struggling with understanding flex box until I came across your channel .Thank you for this incredibly useful video :)

  • @askhatarslanov6327
    @askhatarslanov6327 2 года назад

    Oh, thank you for starting and ending points. It's really helpful!

  • @more2learn279
    @more2learn279 Год назад

    Great Video. Truly Made Flexbox easy. Going to apply the concepts to the project I am working on now. Thanks, KP.

  • @RobotBanditos
    @RobotBanditos 2 года назад

    This is better described than the last 5 videos I just watched. Thank you!

  • @renebesicke
    @renebesicke 2 года назад

    Very helpful! Had exactly one of the issues you mentioned here some days before. Fixed it, but thanks to this video I hopefully never get this issue again. Thank you. :D

  • @Soulja2x69
    @Soulja2x69 2 года назад

    This is the style of teaching I've been craving! You have just become my mentor 😁

  • @vnm_8945
    @vnm_8945 2 года назад

    on every video u made and I thought I know about the subject there is something I learn. Thank you for your videos!

  • @reflectionethio9662
    @reflectionethio9662 2 года назад +1

    Thank you you really you made me to fall in love with CSS

  • @vittoriab
    @vittoriab 10 дней назад

    This is actually so helpful and well explained. Thanks for the video and keep going cause you make a huge difference for newbies devs like me 🥺✨

  • @g-whittington
    @g-whittington Год назад

    Currently in the foundations of the Odin project, and this is a super good video

    • @g-whittington
      @g-whittington 7 месяцев назад +1

      Hey me from a year ago. I'm currently redoing the foundations after taking a break for school, and here I am again