The secret to mastering CSS layouts

Поділитися
Вставка
  • Опубліковано 22 гру 2024

КОМЕНТАРІ • 237

  • @akshaymondal1372
    @akshaymondal1372 2 роки тому +193

    You don't have any idea how much you have helped me with your videos.. I literally was on the notch of giving up css.. but now .. this is the one of those things about which I feel confident . Thanks a lot sir . Kudos to you.

    • @KevinPowell
      @KevinPowell  2 роки тому +50

      That's amazing! Thanks so much for letting me know, that makes my day 😊

    • @xClown55
      @xClown55 2 роки тому +4

      Same here, css back in my college years would be as frustrating as js now it feels kinda easy

    • @Waqar_Ahmed75
      @Waqar_Ahmed75 2 роки тому +2

      Same here...

    • @zettai8087
      @zettai8087 Рік тому

      Wow. I hope I'll be able to share a testimony like this

    • @zettai8087
      @zettai8087 Рік тому

      Cus I feel I just don't know how to use css to make a website look jot it ought to look and I'm frustrated

  • @whatthefunction9140
    @whatthefunction9140 2 роки тому +103

    "The children are being forced to live inside those cells"... you said it

  • @bumbleguppy
    @bumbleguppy Рік тому +2

    Just like the best cooking videos, showing the underlying "why" instead of simply specifying "how" imparts an understanding that can be applied to any recipe and not just the one you're working on. Thank you for your style of video.

  • @RealCaptainAwesome
    @RealCaptainAwesome 2 роки тому +64

    Whenever I question my choices that lead to me becoming a back end engineer, I watch one of your wizardry videos and feel much better.

    • @KevinPowell
      @KevinPowell  2 роки тому +9

      🤣🤣🤣

    • @zorokutend
      @zorokutend 2 роки тому +5

      I choose to be on the both sides. Trust me, when you know how it works. You feel like you are god :D You can control everything in the eco system.
      And that feels really GOOD . Oh yeh

    • @gg-gn3re
      @gg-gn3re 2 роки тому +1

      Yea I've worked with dozens of front end guys and he knows way more than they knew. I know about the same as they did and can figure my stuff out.
      The lack of front end knowledge is very obvious on many sites, facebook for example uses the old 960px layout from the 1990s and is very static looking and old fashioned. It works I guess, but it is obvious they have no clue what to do there or how to fix it.

    • @luizinniziul2976
      @luizinniziul2976 2 роки тому

      same feeling

    • @elvissautet
      @elvissautet 2 роки тому +2

      😅😅😅😅😅

  • @IamPetrus
    @IamPetrus 2 роки тому +2

    Hey Kevin, I was having issues with a very basic relationship between a parent-child situation kept with flexbox. Your video came up here and then I understood what was going on after a terrible feeling of frustration. And man, you named them all!
    Gracias Kevin!!!

  • @aarondeimund6898
    @aarondeimund6898 2 роки тому +4

    Thanks for making these! I'm a developer in the I.T. department of a manufacturing company and the only one on my team with a good grasp of css, largely because of your videos. Thanks for helping me make my corner of the internet a little more awesome!

  • @tk4776
    @tk4776 2 роки тому +1

    The last tip, where flex let more control to child and/or siblings, and grid allows more control to the parent was so illuminating. I know now how to initiate a layout based on my content.

  • @goannacs6861
    @goannacs6861 Рік тому +4

    I learn HTML and CSS.
    I even attend some kind of online school and Udemy.
    But you are the only one who really helps me understand every bit.
    You have such a calming and logical way to explain things. You just feel secure about it afterwards. It's strange. It's like you were born for this stuff haha 😆

  • @BinaryStar10
    @BinaryStar10 2 роки тому +31

    Notes to myself:
    -Parent dictates children's width. Children dictate height... unless you set height and possibly cause overflow issues.
    -A simple wrapper with max-width and margin-inline: auto.
    -Collapsing margins - child's margins can reach outside parent (margins merge to parent). This can be prevented by removing margins from child, adding padding to parent or changing to a formatting context where collapsing margins don't exist (such as flow-root, flex and grid).
    -Using flex you can have even sized columns with flex: 1. But if columns have varying sized paddings, they are not even sized. Grid on the other hand takes padding into account when calculating size and therefore columns are even sized if they are set to be even.

    • @MasteringGravity
      @MasteringGravity 2 роки тому +1

      Thanks for the notes! Mind if I also use these? 😁

    • @carldrogo9492
      @carldrogo9492 2 роки тому

      Use Grid NOT Flexbox. 😉

    • @BinaryStar10
      @BinaryStar10 2 роки тому +1

      @@MasteringGravity Feel free! :)

    • @michelemoneywell8765
      @michelemoneywell8765 2 місяці тому

      ​@@carldrogo9492You can use both. Use grid for the layout of sections, then use flex for arrangement of elements inside each container.

  • @o_o_f_c_i4822
    @o_o_f_c_i4822 2 роки тому +5

    I have no money to buy premium courses so I day I found your channel and you help me a lot . I just become a frontend developer or css expert because of you and designs course UA-cam channel Thank a lot

    • @KevinPowell
      @KevinPowell  2 роки тому +1

      So glad that my content has been able to help you out! 😊

    • @o_o_f_c_i4822
      @o_o_f_c_i4822 2 роки тому +1

      @@KevinPowell Thank you sir I am so happy 😊. I would like to give you a small fee do you have your active Patreon

  • @francopdx
    @francopdx 2 роки тому +3

    Thank you for all the tips! The differences between flex and grid in regard to parent vs child influence was very enlightening! I've been using flex for almost a couple years, but it was just a few months ago that I really started dabbling with grid.

  • @ilovelctr
    @ilovelctr 2 роки тому +2

    Omg, this is so splendid! This is the first time I've watched your video, and I immediately subscribed. Your explanation makes utter sense out of CSS, whereas I'd say CSS seems to make no sense for most devs. Thank you so much for sharing your knowledge.

  • @andrewferguson7859
    @andrewferguson7859 2 роки тому +1

    Thank you for the clear, and quick review this topic. I always learn something, and that was certainly the case here. Just yesterday I was working with flex and grid and got myself thoroughly confused. Thanks to this refresher, I better understand what was confounding me so much yesterday.

  • @Spreadlove5683
    @Spreadlove5683 2 роки тому +1

    Dope!!!!! This is the exact question I've been wondering about for so long -- just how everything fits together and how relationships play out. Bought your CSS Demystified course just now. Excited to get a firm understanding of the fundamentals.

  • @joshhoffer
    @joshhoffer 2 роки тому

    kevin im falling madly inlove with you ... because you always get me out of the bind , css will never be close to my heart...

  • @the-real-tridder
    @the-real-tridder 2 роки тому +4

    great information mate, really apprecite the time you take to explain these really important concepts. The importance of relationships is so underrated when most people discuss css.

  • @pkunzel
    @pkunzel 2 роки тому +56

    "They don't live in isolation, they live in relation"
    That is the biggest challenge I have when teaching CSS.
    Amazing video!

  • @ginamdar
    @ginamdar 2 роки тому

    I know its not much but Kevin you can buy timy . Thank you so much..the crux of this video for me to learn more about collapsing margins!

  • @WadieGamer
    @WadieGamer 2 роки тому +1

    I've been following your videos for almost a year and I want to thank you so much for making my CSS learning much better.

  • @jpisello
    @jpisello 2 роки тому

    That last thing with the padding on the flex items blew my mind! Learned something new today, so thanks Kevin!

  • @petarkolev6928
    @petarkolev6928 2 роки тому

    Kevin, you are my CSS God!!! I am learning from you more than I have learned so far in my 5y front-end career, THANK YOU!!!

  • @CloudyInside1902
    @CloudyInside1902 Рік тому

    I'm beginning to learn html and css, your tutorials have been really helpful and are inspiring me to create and learn more and more, thank you ^^

  • @a5tr00
    @a5tr00 2 роки тому +6

    I basically started learning about CSS from your videos. And time to time I hear people say “I hate css”, “it is so frustrating” etc… Man, I don’t understand them… Is it because you, Kevin, makes CSS look so easy , simple and lovely? I don’t have any other explanation:)

    • @TroenderTass
      @TroenderTass 2 роки тому +1

      You don't understand people get tired of hasseling around with stupid layouts and inconsistent properties that might not even work un certain elements, or in certain browsers, when they can do more interesting programming in stead?

    • @0500MUSIC
      @0500MUSIC 2 роки тому +1

      @@TroenderTass Hahaha right! It’s a massive pain is the ass. people go on like we hate CSS for no reason.

  • @lauramangu2516
    @lauramangu2516 Рік тому +2

    Amazing content as always! You are my primary source of learning when it comes to Css, Kevin! Kudos to you and thank you for these great videos. Please never stop :)

  • @Michaelbhand
    @Michaelbhand 2 роки тому

    Thanks!

  • @mountainspirittribe161
    @mountainspirittribe161 9 днів тому

    I really Cannot Thank You Enough for explaining this so wonderfully and easy.... 🙏 You truly are an amazing teacher! ☀✨🎇

  • @FrankKynard-yf9yu
    @FrankKynard-yf9yu Рік тому

    I couldn’t tell you how many times does threw me off in the last year. Thank you so much.

  • @Tina-van
    @Tina-van Рік тому

    This is such a good video by someone who deeply understands how things operate in CSS. Thanks a lot!!

  • @tdematos
    @tdematos Рік тому +3

    The way you understand how everything comes together is unbelievably easy to understand! Definitely earned a new subscriber! 🙏

  • @alexjulius69
    @alexjulius69 2 роки тому

    It's to make a fk ton of money from front end development, and you're helping me a great bunch, thanks. I'm not a beginner, but I still struggle with sh*t not working sometimes and this explains A LOT.

  • @zorokutend
    @zorokutend 2 роки тому

    Thanks Kevin for explaining some of the most confused things of CSS . I think you should add the link to the course in the description. It might help people reach to the course easier. As well as make your video become more friendly to search engine.

  • @nostalgicnow6001
    @nostalgicnow6001 2 роки тому +1

    I understand css finally and it’s thanks to you 🙌🏾

  • @thisurathenuka8362
    @thisurathenuka8362 2 роки тому

    Thank you so much. Could you please do a video on how you approach adding CSS to a UI ? So many ways to do stuff. It's really overwhelming 😥

  • @sherryab3964
    @sherryab3964 2 роки тому

    I need this refresher right now 100%! Also, thank-you for the responsive drip course!

  • @rafidiul-albani4590
    @rafidiul-albani4590 19 днів тому

    Just while walking around, I came up with a creative solution how to learn the relationships between the different boxes (html tags) when they are nested.

  •  2 роки тому +1

    That padding in flex really caught me by surprise. What if the padding is applied to a div nested within the flex child? Would it still cause issues?
    Great video btw.

  • @saroj_kumar
    @saroj_kumar 2 роки тому

    Great stuff for someone who is starting out and facing common issues in CSS.

  • @EricRohlfs
    @EricRohlfs Рік тому +1

    30 years and I never thought about it about width an height had inverse relationships with children. Mind blown

  • @pcartisan2721
    @pcartisan2721 2 роки тому

    This lesson is so important. I had the thought that it might be a good lesson to slip into the beginning of a young developer’s journey. Or, at least a modified version to warn them about the amazing peculiarities to come. 😃

  • @PicSta
    @PicSta 2 роки тому

    An excellent video showing the differences. Thanks for this simplified explanation of this difference. I really prefer CSS grid for the rough layout and the content can be arranged with flex then. And I think this is the way it meant to be, right?!

  • @justnormi
    @justnormi 2 роки тому

    reaaaly like how the lights are setup ! and great video asusal

  • @designnimbus
    @designnimbus 2 роки тому +1

    Thanks for a thousand times ❤️

  • @Bkamron
    @Bkamron 2 роки тому

    I'm kinda happy I started CSS way back I'm the late 00s I still use techniques from the XHTML days (remember those days?) And the somehow still kinda work for me. If I had to learn all over again, it would be so daunting I'd probably give up.

  • @codewithfan
    @codewithfan 2 роки тому +1

    very clear explanation, thanks for it...

  • @chinmayghule8272
    @chinmayghule8272 2 роки тому

    Excellent video. No wonder you are CSS King!

  • @Spreadlove5683
    @Spreadlove5683 2 роки тому

    at 5:08 why are the .wrapper element's horizontal margins inside of the parent (header) whereas the h1's top margin is outside of its parent / applied to the parent (the header element)?

  • @bertlemoi431
    @bertlemoi431 2 роки тому +2

    the secret key to mastering css is watching all the videos kevin makes - easy.

  • @BtwinUnW
    @BtwinUnW 5 місяців тому

    I got a feeling while you are teaching css, you are giving family counseling as well.

  • @nomadshiba
    @nomadshiba 2 роки тому

    i always use grid or flex
    and use block and inline-block, inline and stuff, basically the default displays
    only if im actually rendering an article, a document etc basically what html has been made for originally
    other than that everything is always inside a grid mostly
    flex is only useful if stuff has dynamic different sizes, based on content, such as navigation menu, tags list, or such

  • @joao_penas
    @joao_penas 2 роки тому

    Amazing explanation!
    Everything it's about relationships! 😁
    Keep going. Best regards.

  • @mehdi-vl5nn
    @mehdi-vl5nn 2 роки тому

    10:07 flex also has impact on position ! and god knows what else

  • @yzap_
    @yzap_ Рік тому

    THANK YOU FOR YOUR KNOWLEDGE

  • @octothorpe12
    @octothorpe12 2 роки тому

    That's I think the important thing to consider: Flex is 1D, so it gives you the illusion of columns. They'll only ever look like true columns if you explicitly make them all the same (and even then everything gets wild when items wrap). If you want 'set and forget' true columns, you kinda need to go Grid.

  • @keaton718
    @keaton718 Рік тому

    I can totally imagine Kevin applying all these tips to Mrs. Powell.

  • @mikeb2604
    @mikeb2604 2 роки тому

    I'm learning so much in this video o_o

  • @spirit1292
    @spirit1292 2 роки тому

    Great video! I also don't get one css feature. I don't really understand why vertical padding of a child is getting calculated based on it's parent width???

  • @marcusantenor793
    @marcusantenor793 2 роки тому

    So much wisdom in just 17:10mn, thanks Bro!!!

  • @George10767
    @George10767 Рік тому

    I have discovered that the tags "div" and "article" have identical functions. Please say if you disagree.
    Also you can put a "div" function inside a "div" function, and a "article" function inside an "article" function.
    Also, of course, you can put an "article" function inside a "div" function and vice-versa.

  • @soonhongng7037
    @soonhongng7037 Рік тому

    15:05 what tool you are using to display the dimension with the pink tint? 😲

    • @soonhongng7037
      @soonhongng7037 Рік тому

      if it's part of the Chrome, how should I press it?

  • @k0k1t0
    @k0k1t0 2 роки тому

    How did you make vsCode to put automatic full stop when you copied the class name in 1:26

  • @kevinpellerin6715
    @kevinpellerin6715 Рік тому

    Thanks man, you are from Halifax too. I like your videos

  • @josephlivengood4508
    @josephlivengood4508 2 роки тому

    Is this why you use a reset CSS to remove all the default margin from the h tags? Just curious @7:40

  • @michaelgleason4791
    @michaelgleason4791 2 роки тому

    "Not just throwing display flex at something in columns and hoping everything works out." I feel attacked. Great video as always.

  • @Zakaros1000
    @Zakaros1000 2 роки тому

    Coffee time with a Powell's video ☕

  • @NiceChange
    @NiceChange 2 роки тому

    Thanks Kevin..great tips for development...🙂

  • @ricardoolartepuell2011
    @ricardoolartepuell2011 2 роки тому

    for the even columns with flex:1,
    can we use a wrapper in each element, and the wrapper child content put the padding?
    Ill test it

  • @uwakmfonessien6610
    @uwakmfonessien6610 2 роки тому

    Greetings Kevin. Please how can I get the source code of the html, css and javascript you used in teaching us. I want to get along with you because sometimes your screen division covers part of the code. Thanks for your kind contribution in the world of web development!!!

  • @paulknol
    @paulknol 2 роки тому

    Wow Kevin, really nicely explained. I have been doing these kind of things rather instinctively and successfully but never really breaking it down this way. I acutally had a few “oh right” moments. Thanks for joggin the ol’ noggin

    • @KevinPowell
      @KevinPowell  2 роки тому +1

      Yeah I think a lot of the time, it clicks for some people on a more instinctive level, which is great when it happens!

  • @DevoutJourney
    @DevoutJourney Рік тому

    Your videos inundate my CSS playlist hahahaha

  • @zorgivanov8685
    @zorgivanov8685 2 роки тому

    super good vid, thanks!

  • @thefootles
    @thefootles 2 роки тому

    Awesome, thank you!

  • @omaracelys3217
    @omaracelys3217 2 роки тому

    Amazing video, very few videos like this.

  • @MaddyChessVision
    @MaddyChessVision 2 роки тому

    we want 21 days responsive layout type of course. that was great❤❤

  • @amirkamalian8045
    @amirkamalian8045 2 роки тому

    Hey dear Kevin! Lovely video as always. Will you ever release your new course? 😅

  • @someone5502
    @someone5502 2 роки тому

    I wish I could use grid and more up to date features but I always have to cater for IE, and older browsers, as most sites I cater to at work are business sites. I love web development but I hate how it takes years before I can actually start using certain things.

  • @shubhamchandel-gs4so
    @shubhamchandel-gs4so Рік тому

    this guy is equipped in making you feel like an idiot. does not matter how much experience you have.

  • @Dev-Phantom
    @Dev-Phantom 2 роки тому

    it was cool to know the depth, i have to do it

  • @Oleg-o6m5p
    @Oleg-o6m5p Місяць тому

    Kevin are tte best!!!

  • @Pyrospower
    @Pyrospower 2 роки тому

    Thank you so much!

  • @pelumiamos6868
    @pelumiamos6868 2 роки тому

    I need this a lot thanks very much .

  • @christopherportorreal
    @christopherportorreal Рік тому

    @kevinPowell I have a problem when starting to design. I'm practicing with Frontend Mentor, and the designs are normally created with Mobile: 375px and 1440px widths. How should I start setting the right space to work? Should I use max-width or just the width at the beginning?

  • @securefolder4548
    @securefolder4548 2 роки тому

    Thanks to u im now good at css 💖💖

  • @dockeryz
    @dockeryz 2 роки тому

    why do you have double underscores for primary-header__content?

  • @markwerle
    @markwerle Рік тому

    What tool are you using at the end to show the red overlay of the gap, px size, etc?

  • @last.journey
    @last.journey 2 роки тому

    One thing that helped me a lot to understand some of this topics
    Is making a layout from figma skitch

  • @gobadri
    @gobadri 2 роки тому

    Hello Kevin, I've repeating the line: "box-sizing: border-box;" but I really don't know what does it mean. So, can you mention this in a video in the future.

    • @Hometonik
      @Hometonik 2 роки тому +1

      Let's say you gave
      width:200px
      Padding:10px;
      Then what you would think the width would be? 200px? No..here width takes padding/border values into consideration and goes upto 220px(add left and right padding) and would you want your width to change like that?No, right..so by including border box the padding and border values are subtracted and will not add up and extend your width value..that means your width stays the same

    • @gobadri
      @gobadri 2 роки тому +1

      @@Hometonik Thank you, your comment is very helpful.

  • @Kriptokeeper
    @Kriptokeeper 2 роки тому

    I love your videos they are the most in-depth and easiest to follow could you do a connect wallet button to your web page for metamask tutorial PLZ Java has me going nuts and no one does a very great tutorial I’m on windows I’ve got npm downloaded and my node says it’s running but keep getting crazy errors when I command npm run dev? Very frustrated and confused sorry for the rant

  • @SoniaKatru_
    @SoniaKatru_ 4 місяці тому

    Good job ❤❤❤

  • @sanfords
    @sanfords 2 роки тому

    Can't seem to pay for the demystified course. The Pay Now button never gets enabled even though I entered everything.

  • @KevinJTurner
    @KevinJTurner 2 роки тому

    Love the t-shirt!

  • @BarryDocherty
    @BarryDocherty 10 місяців тому

    Hello, I am looking for a boilerplate CSS specifically for HTML5 banner ads with best practices for all sizes. Do you know where I might find something like that?

  • @danielgarner100
    @danielgarner100 8 місяців тому

    I loved this

  • @dmitrybelov5703
    @dmitrybelov5703 Рік тому

    5:33 can margin-trim : Block helps?

    • @KevinPowell
      @KevinPowell  Рік тому

      I think so, yeah. I haven't played with it yet, but it's high on my list cause it might be one of those small and under the radar changes that has a pretty big impact

  • @mali_gaurav
    @mali_gaurav 2 роки тому

    What is best think for learning plan css or css framework

  • @thejuskv8052
    @thejuskv8052 7 днів тому

    Thanks a lot❤

  • @TheOne-qv3xw
    @TheOne-qv3xw 2 роки тому

    liked before watching!!!

  • @johnconnor9787
    @johnconnor9787 2 роки тому

    Waiting for the video on CSS nesting :)

  • @beinfomaniac7182
    @beinfomaniac7182 2 роки тому

    thanks kevin

  • @TundeEszlari
    @TundeEszlari 2 роки тому

    You are a very good videographer.🤗❤

  • @justdoitk
    @justdoitk 7 місяців тому

    What do you think about tailwindcss ?