A CSS Unit Deep Dive - Learn CSS Units & When To Use Them

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

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

  • @slayingthedragon
    @slayingthedragon  Год назад +7

    🚨🚨🚨 New CSS Course - slayingthedragon.io 🚨🚨🚨

  • @slayingthedragon
    @slayingthedragon  Год назад +277

    Next video building a portfolio website from scratch, yes?

  • @nemeziz_prime
    @nemeziz_prime Год назад +98

    These small concise tutorials are exactly what we needed! Really solidifies our understanding of these important concepts. Thanks a lot 😊

  • @PhootballEdits
    @PhootballEdits 10 месяцев назад +16

    They're so many dev channels on RUclips. Your own is unique because it's straightforward, detailed, broken down, etc. I don't know how you do it but your explanation is clearer than the rest

  • @Corbinhol
    @Corbinhol Год назад +18

    I love how your videos feel like reading a book on the topic, or an article, but while also being able to see a live demonstration, without all the fluff other videos tend to have. It really helps me streamline the information. I cannot wait for your next video.

  • @bibimathew6381
    @bibimathew6381 8 месяцев назад +2

    Bro, you're so good at teaching and your videos provide the perfect visuals. The world needs more of your service!

  • @aritmoydatta4404
    @aritmoydatta4404 5 месяцев назад +3

    Your channel is a godsend. I had been reading articles and all but never truly understood where exactly to use the units. Your examples were eye opening. Thank you!

  • @relja_
    @relja_ Год назад +21

    I would love to see you cover Flexbox vs Grid - When to use which one (separately and combined). As always great and clean video!

  • @rhys7homas
    @rhys7homas Год назад +9

    This is such a massive help! I like that you show real use cases where you would use which unit and the reason for it. I’ll definitely remember the 45ch-75ch rule of thumb.
    Keep these coming. Your production is top tier!

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

    These are seriously the best tutorials on the internet. so much information packed into these videos.

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

    I have started my course on html and css. This is by far the best channel I have seen. The details you explain is helping make my base strong. Thank you.

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

    man. you`re just out of this world. Just cant believe the precise class I`m having. Congrats.

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

    the accessibility part was awesome!

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

    THANK YOU SO MUCH FOR THIS VIDEO, I never quite understood these types of units and stuck to the PX even though the people around me were using REM and EM.

  • @rewazilol
    @rewazilol 11 месяцев назад +2

    the first minute of this sold me on your entire channel. i so appreciate the explanation

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

    Dude, as someone who started webdeveloping 18 years ago (and been at it on and off), this channel is a treasure. Not following the space for longer periods of time had always made me feel like it's very hard to catch up with the latest developments. But it's videos like these (and your clear and concise explanations) that makes coming back to web development a LOT less daunting. Thanks so much!

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

    I just started working as a front-dev recently and your css videos have taught me basics that I wouldn't have learned unless I were in school again :) Thanks and can't wait for your next videos~

  • @JaLikon65
    @JaLikon65 Год назад +5

    You my friend, are an absolute gift to the world of web development. Thank you for this explanation and your videos in general. You make truly fantastic videos; I can't thank you enough for all the effort you put into them!!

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

      Also, thank you for covering the specific USECASES for all of these Units!
      There are some other videos out there that covers these units. Some of them are even as concise as your video. But, the key thing they lack is that they don't explain when you would actually use these units! Adding that in makes this video just so much more useful to me. And in general, I REALLY like how in your video you explain the concepts -- but the you also provide examples or guidance on how you can effectively use those concepts. That's the big thing that sets these apart I think. Along with the great voice quality, animations, examples, etc :)
      Just 10/10 work my friend, I really appreciate it. You have a real gift for this stuff

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

    That font size accessibility thing fully convinced me to start using rem instead of px. I love that you use real world examples to teach. This way I'm actually learning the why, and not just the how. I'm so glad I found your channel

  • @jahnisicalderon5600
    @jahnisicalderon5600 5 месяцев назад +1

    Aaa i think imma binge watch all your videos i love the fact that you take the time to explain it and helps us understand. Thanks. From someone that is wanting to know coding but doesn't have time to take classes.

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

    Thanks for providing amazing clarity on the topic! 🙌✨
    Eagerly waiting for future uploads ! 😊

  • @BK69XXX
    @BK69XXX 5 месяцев назад +1

    this shit is solid gold. never had mush good knowledge about css

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

    this is what I needed, not some 70 hours from zero to hero css course that doesn't cover css units

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

    Can't wait for another GREAT GREAT GREAT video 😁

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

    Very nice explanations. Appreciate the time you take to structure the info! Keep them coming!

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

    you have no idea on how much you have helped me through your videos, thank you so so so much

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

    This is the single best video i have seen about css units, definitely going to my favourites playlist

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

    I watched a looot of videos of basic concepts to undestand official docs, and your channel is by far the best explaining everything in a concise and practical way. Also love Berserk

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

    Your content is extremely well produced and detailed. You should have way more subscribers. Please don’t stop to create content.

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

    As the name suggests Sir, you have literally slayed the dragon. Thanks for your videos. Knowledge with precision!

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

    This just made my understanding of css units clear ! Thank you so much ❤

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

    How are you this underrated? Your contents are better than most of the paid courses that I find . . .

  • @aghilest.m.a1118
    @aghilest.m.a1118 Год назад +1

    You're amazing man!! keep posting these cool videos 🔥🔥

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

    Hi, thank you so much. The second part of the video about using the common CSS units was so straightforward!!!
    You're examples and the way you explained was really great.

  • @weeyox...4390
    @weeyox...4390 4 месяца назад +1

    I thought I was learning about the same thing I know but I stayed to watch the entire video and I got the bonus
    I didn't know about the ch
    This is very helpful ❤

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

    As always his videoes are gold to my stubborn ears, his words are a like a birds songs, truly this mans explantion is capable of bringing peace to this chaotic world.

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

    I like your straight forward words on your videos.thankyou bro

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

    Yo !!!! That explanation is so fast for beginners like me. I'll have to watch it like 20 times to fulty interpret it. Anyway setting the height of my grid to 100vh did set the grid cover the enitre height & width of the page. Thanks again dude.

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

    Good video, I recently found out about your channel, and I'm really amazed of the quality and the content overall. Keep up the good work, you are my best web dev learning channel !

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

      Thank you so much for the support, much love ❤️❤️❤️☺️

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

    Fantastic video. Explains everything so clearly and with such simplicity that anyone can finally understand such a ubiquitously confusing concept. Bravo!

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

    Straight to the point as usual, big thanks for the CH units I looked for someting like that for so long

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

      Thank you - yea ch unit is pretty pretty good ☺️❤️❤️

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

    One key takeaway from this video is at 10:58 (ruclips.net/video/fzZTvLmmTzM/видео.html)
    The use case for mixing em and rem is buttons.
    Font size in rem, padding in em.
    font-size: 1.5rem;
    padding: 1em;
    Why? When not used for font-size, em is the requested size relative to the font-size setting in the element.
    Another superb video. You really are a master of brevity and subject matter. That makes understanding sooo much easier.

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

      Thank you ☺️❤️❤️❤️❤️❤️❤️

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

    I ve just watched some videos of yours and I can safely say that you are the best CSS teacher on youtube, and I have watched quite a alot of CSS videos, most of them are just useless. You my friend are the real deal. Please don't ever stop with the CSS content.

  • @fn2195
    @fn2195 Год назад +5

    Thanks, no one can be shorter and more understandable

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

    best and superb example of em unit really thank you soo much brother. god bless you

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

    That's outstanding. I love it. ❤

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

    I DONT UNDERSTAND ANY OTHER RUclipsR EXPECT YOU PLS DONT STOP MAKING THESE TUTORIALS OR I WONT BE ABLE TO BECOME A DEVELOPER

  • @Hugo-sy6lj
    @Hugo-sy6lj Год назад +1

    This is amazing, please dont stop to produce content!!

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

    Nice video. I did not know about the padding trick and the ch units. Thanks.
    ----------
    Like you said the reference pixel is a reference for a standard that works for us, humans, visually. It's important to note that you can calculate the actual size on the screen, at least the majority of times.
    ----------
    In your first example the screen is 1080p (1920x1080px) and is 27 inch (23.532 by 13.237 inches). Lets translates this to the superior unit of length and we get 59.771cm by 33.622 cm. Because you used a square we can pick either height or width lets pick height for this example:
    33.622cm / 1080px = 0.03113148148148148cm/px -> this is the size of each pixel in cm
    0.03113148148148148 x 96px = 2.98862cm -> this is the size of a square with 96px
    If you look at 2:10 you can see that the ruler is on the money 2.9cm.
    ----------
    Cheers and keep it up really nice videos.

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

    What a smart, unique, original, enjoyable and refreshing approach for teaching.
    I wish you were my private teacher.
    I have too many questions, and too many topics that I like YOU to teach me :)
    Thank you for becoming a content provider.
    (...if it will ever develop into frontend/backend development that will be awesome)

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

    man. you are the best when its come to explaining. i'm still waiting for your coverage in javascript :). you are now one of my teacher in front end programming.

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

    Every unit is crystal clear ❤❤ Thank you so much sir, this channel is 💎 gem ❤❤❤

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

    Great vid - love your work. Been subscribed for a week or two now, and eagerly await more!

  • @6.squash.936
    @6.squash.936 Год назад +4

    Keep creating such small videos about topics in no time your channel will be a go to channel for beginners.
    Also create content regarding Javascript and React once you are done with the CSS part .
    I learned Flex-box and Grid from your channel i was a complete doodoo but after I saw your videos it changed everything.
    Keep Growing 💗

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

      Thank you so much for this comment, much love ❤️❤️❤️

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

    Solid Support from you bro. I appreciate it. Now (rem & em) are clear.

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

    Bro we want a compelete CSS tutorial from you on all the important concepts which are used in web-development
    Your tutorials are concise and easy to understand
    Keep going brother !!!!

  • @MsArsinoe
    @MsArsinoe 4 месяца назад +1

    Very straight forward, quick and to the point. Thank you ❤

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

    Your tutorials are easy to understand and packed. I consider you as my teacher now.☺☺

  • @raven.4815
    @raven.4815 Год назад +1

    Your videos should be paid but thankfully they aren't! That makes your channel 100x times better than what already is, keep doing this excellent content, cheers!

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

    Thankyou for such an explanation. Cleared many of my doubts.

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

    Man is the goat in explaining

  • @hey.shashwat
    @hey.shashwat 11 месяцев назад +1

    Watched too many videos, but this video cleared my all doubts
    Thanks😊

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

    Truly amazing, I would also like to add vmin and vmax to the list as they help me keep constant relative size to text across different screen resolutions and scalings

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

    Such a great channel with amazingly clear and detailed content! I was shocked seeing this unbelievably great content and having 20k subs only => which means keep it up and you will get what you deserve, a place in the list of the best learning channels on RUclips!

  • @NazmulHaque-md1mc
    @NazmulHaque-md1mc Год назад +1

    I really appreciate it. You have great quality contents. Please upload more videos. Love from Bangladesh.

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

    Your videos are the best online on CSS, so good!

  • @claersant-zumi6283
    @claersant-zumi6283 Год назад +1

    "...setting a pixel font size on the HTML makes your entire website ignore the preferences of people that took the time to modify the setting. BID DISREPECT. DON'T DO THAT." 🤣 amazing advice bro

  • @ixxxal
    @ixxxal 13 дней назад +1

    101% straight, but i love u man

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

    🎯 Key Takeaways for quick navigation:
    00:00 📏 *Understanding CSS Length Units*
    - Explanation of absolute and relative CSS length units.
    - Importance of using pixel units in web design.
    - Overview of the confusion surrounding the pixel unit's definition and usage.
    03:06 🖥️ *Understanding the CSS Pixel Unit*
    - Explanation of the CSS pixel unit's dependency on viewing distance.
    - Clarification of the reference pixel and its role in maintaining consistency across devices.
    - Summary of the pixel unit as a measurement relative to the expected viewing distance.
    06:20 📐 *Understanding the em and rem Units*
    - Comparison between pixel, em, and rem units in CSS.
    - Explanation of how em and rem units provide relative font sizing solutions.
    - Demonstrations of using em and rem units for responsive typography and layout.
    12:20 📊 *Understanding Percentages and Viewport Units*
    - Explanation of percentage units relative to parent elements.
    - Introduction to viewport units (vw and vh) for sizing relative to viewport dimensions.
    - Practical examples of using percentages and viewport units for responsive design.
    14:26 🆑 *Understanding the ch Unit*
    - Introduction to the ch unit for sizing based on character width.
    - Application of the ch unit for setting maximum widths based on character count.
    - Advantages of using the ch unit for controlling text length in paragraphs.
    Made with HARPA AI

  • @ui.930
    @ui.930 Год назад +1

    I just found your channel and my life is saved.

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

    wow. i am so happy i searched for a video on this and found Ramzay himself!!!

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

    really good videos, these helped me a lot, Thanks, keep making such videos

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

    Wow, just discoverd your channel and your tutorials are very clear and informative, I love it. You got a new subscriber, cant wait on your next video. Keep up the good work! 👏🏼
    Also what keyboard are you using? Sounds very satisfying 😁

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

      Thank you ☺️ - it's the Razer huntsman V2 tenkeyless with foaming pad and the silent linear keys

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

      @@slayingthedragon thank you!

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

    Love your video tutorials - so concise and great examples. Well done - keep them up mate :)

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

    Great video. I forget the name of the book (it's got to be 15+ years old now) but it had an example that used the absolute size of "small" on the html element. The benefit being it still allowed the user to customize their font-size (as you demonstrated) but gave you a rem equivalent to 10px. It made the math easier for me for when, for example, someone asked for 32px font I could just use 3.2rem instead.

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

      Was it the tag ? If so that's some OG stuff, I think it's deprecated now
      Thank you ☺️❤️

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

      Yeah that’s a strange one. Length units like PX and EM on fonts can be absolute or relative, but it’s confusing to realize the similarly named units like small and smaller are actually different - font-size:small; is absolute while font-size:smaller is relative. 🤯

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

      @@slayingthedragon Looks like my comment from last night got deleted so trying again. No, the absolute font size "small", as in: html { font-size: small; }. They're still current.

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

      @@theepicgamer5808 Ohhh, tbh, I've never use that, sounds interesting

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

    2:21 The screens are measured diagonally (i.e. 27'' diagonally, what changes sometimes is the aspect ratio), i.e. unless I'm not understanding what's going on, these examples are not proof, moreover the pixel size really changes, so computer screens and cell phone screens are usually more expensive than TV screens, for example, because the space is smaller and the manufacturing process, being more modern, is more expensive, to place the same amount of pixels in space dozens of times smaller

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

    Just stumbled upon your channel by good fortune. As others have said, superb and concise content. Subbed!

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

    Your videos are effing awesome mate! Thank you.

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

    This content is awesome! please keep going!

  • @pavfrang
    @pavfrang 2 месяца назад

    The real size in inches is always: pixels/resolution [dpi] , therefore it is a function of the resolution of the device. When you change the resolution of the device, the real size changes based on the formula above.
    (The almost empirical "expected viewing distance" may be the same for the same device/screen - but the size is clearly dependent on the resolution, which might change for the same device based on the graphics adapter settings, and therefore the definition that you present is not a strict one).
    In fact, this is how the resolution is defined primarily.
    Other than that - your presentation is almost perfect!

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

    This video is delighted to watch.

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

    All of your video are great. Learned a lot from your videos.

  • @tobiasnorheim7382
    @tobiasnorheim7382 10 месяцев назад +1

    svh and dvh can be useful as well when dealing with tablet and phone screens, but should have vh as fallback

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

    I feel like I have to watch the adds so that you get commission for your awesome work :))

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

      Haha thank you that's very nice 😊 much love ❤❤❤

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

    Talking about percentages, I made a (parent) container, inside of it made a child container gave parent background-color a width of 1919 Pixels which covered the entire width of the page. For the (child) typed in lorem50 & then gave this content a width of 50%. Sure enough it reflected, it's depending on the parent's width. I also checked it by setting the width of the child as 960px half of 1919px. 50% & 960 px acted the same. Question is :- I made a parent div, inside of it a child div, inside of that child div another div as child1. parent's background-color width 1919px, child's content width to 50% as you explained (relative) to the parent. Now child1's content width has also been set to 50%. Who is child1's width relative to ??

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

    This channel is my priority now.

  • @NewbieDev42-it8tg
    @NewbieDev42-it8tg Год назад +1

    You are the best css youtuber bro

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

    You are doing Gods work here. EXTREME Premium quality for free. Better than any course Ive ever seen. Got my subscription just with this one video

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

    I Really love these videos and please make a full video on covering the syllabus of front-end technologies in detail.....

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

    It helped me a lot. Specially the bonus part. Thanks

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

    Thanks for another great tutorial...
    Your explanation is great...

  • @devsadisatsowala1003
    @devsadisatsowala1003 3 месяца назад +1

    well explained!! ❤

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

    The number of pixels in a square inch remains same. I think the size of a pixel differs from device to device but the pixels in a side and pixels in a square inch remain same. It's tricky but I think that's it.

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

    DUDE
    WHY YOUR VEDS ARE AMAZING

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

    You're gonna cross 1M for sure 🌟

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

      Thank you ❤️❤️❤️❤️❤️❤️❤️

  • @crimsonblitz2795
    @crimsonblitz2795 3 месяца назад

    Thank you for the detailed video tutorial, may I ask? What is the best CSS Unit for images to use? Thank you. 😊

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

    you are a great teacher.

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

    Could you make a video about content, margin & padding?

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

      I might do that, I've been thinking about doing a similar video with box-sizing

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

      @@slayingthedragon Yeah, I had a question on Codeacademy that wanted me to make a rectangular with 200 px width and 100 px height, and a square that's 100 x 100 px, ONLY using Margin and Padding. Shit was hard man, I never got it right.
      Box-sizing is also something I'd like to learn more about, maybe that could go in the same video? Like "Margin, Padding & Box-Sizing, what are they and how do they relate?"

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

      @@GeTDuCkT Yea in fact they do go together, also border's - you can see it on the example here developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
      I'll try and make a video on all of this, thanks for the suggestion :p

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

      @@slayingthedragon Sounds awesome! Do you have a discord server or similar I could join? :)

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

      ​@@GeTDuCkT I created a discord server but I haven't publicly advertised it yet - I'll publicly advertise it on my next video which is almost ready.
      You can get it early though I don't mind discord.gg/Ccz9nQSfQB 😊

  • @hasibur.rahman
    @hasibur.rahman Год назад +1

    Bro when are you uploading the next video? Eagerly waiting!!

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

      Right now ruclips.net/video/dLDn_k8GmaU/видео.html

    • @hasibur.rahman
      @hasibur.rahman Год назад +1

      @@slayingthedragon wow. that was fast. 😃

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

    Thanks broo for making such amazing video