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

Sdílet
Vložit
  • čas přidán 25. 06. 2024
  • 🚨🚨🚨 COURSES - slayingthedragon.io 🚨🚨🚨
    Discord - / discord
    0:00 intro
    1:09 Pixel unit
    6:15 em & rem
    12:10 %, vh, vw
    14:12 ch unit
    There’s at least 40+ different length units in the CSS specification and initially I was going to go over literally each one of them until I realized how silly of an idea that was. The truth is, many of these units should either not be used at all or are rarely used for web design.
  • Věda a technologie

Komentáře • 315

  • @slayingthedragon
    @slayingthedragon  Před 9 měsíci +4

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

  • @slayingthedragon
    @slayingthedragon  Před rokem +267

    Next video building a portfolio website from scratch, yes?

  • @nemeziz_prime
    @nemeziz_prime Před rokem +86

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

  • @PhootballEdits
    @PhootballEdits Před 5 měsíci +10

    They're so many dev channels on CZcams. 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

  • @aritmoydatta4404
    @aritmoydatta4404 Před 29 dny +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!

  • @Corbinhol
    @Corbinhol Před rokem +17

    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.

  • @rj771
    @rj771 Před rokem +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.

  • @jcis1013
    @jcis1013 Před rokem +4

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

  • @rhys7homas
    @rhys7homas Před rokem +7

    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!

  • @adi_trades99
    @adi_trades99 Před rokem +3

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

  • @rewazilol
    @rewazilol Před 6 měsíci +2

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

  • @AbhishekNagargoje63
    @AbhishekNagargoje63 Před rokem +6

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

  • @relja_
    @relja_ Před rokem +20

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

  • @rudyboock7518
    @rudyboock7518 Před rokem +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

  • @sergio_saad
    @sergio_saad Před 10 měsíci +1

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

  • @bibimathew6381
    @bibimathew6381 Před 3 měsíci +2

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

  • @tamirhalperin2404
    @tamirhalperin2404 Před rokem +1

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

  • @aghilest.m.a1118
    @aghilest.m.a1118 Před rokem +1

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

  • @meauxx
    @meauxx Před 11 měsíci +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!

  • @andredss3154
    @andredss3154 Před rokem +1

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

  • @yonsukim3047
    @yonsukim3047 Před rokem +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~

  • @michaellawson9353
    @michaellawson9353 Před rokem +1

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

    • @slayingthedragon
      @slayingthedragon  Před rokem

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

  • @JonathanCampDesigner
    @JonathanCampDesigner Před rokem +1

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

  • @JaLikon65
    @JaLikon65 Před 11 měsíci +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 Před 11 měsíci

      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

  • @fvgoya
    @fvgoya Před 11 měsíci +3

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

  • @harshitjoshi3082
    @harshitjoshi3082 Před rokem +1

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

  • @Noel_VI
    @Noel_VI Před rokem +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  Před rokem +1

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

  • @juliusbusiness4283
    @juliusbusiness4283 Před rokem +1

    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.

  • @jahnisicalderon5600
    @jahnisicalderon5600 Před 17 dny +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.

  • @nickmasters8474
    @nickmasters8474 Před rokem +1

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

  • @iribaaa2643
    @iribaaa2643 Před 8 měsíci +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.

  • @Hugo-sy6lj
    @Hugo-sy6lj Před 11 měsíci +1

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

  • @weeyox...4390
    @weeyox...4390 Před 9 hodinami +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 ❤

  • @satyamdograreallife
    @satyamdograreallife Před 11 měsíci +1

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

  • @dhirajdeshmukh9443
    @dhirajdeshmukh9443 Před rokem +1

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

  • @juniorWeb247
    @juniorWeb247 Před měsícem +1

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

  • @AbJadzera
    @AbJadzera Před rokem +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 CZcams!

  • @rameenana
    @rameenana Před 6 měsíci +1

    Your videos are effing awesome mate! Thank you.

  • @Xooou_
    @Xooou_ Před rokem +1

    Can't wait for another GREAT GREAT GREAT video 😁

  • @otiagomarques
    @otiagomarques Před rokem +1

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

  • @azamtamboli3186
    @azamtamboli3186 Před rokem +1

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

  • @Yesterday_i_ate_rat
    @Yesterday_i_ate_rat Před 11 měsíci +1

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

  • @MsArsinoe
    @MsArsinoe Před 10 hodinami +1

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

  • @jericlloyd9436
    @jericlloyd9436 Před rokem +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.

  • @satyamdograreallife
    @satyamdograreallife Před 11 měsíci +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.

  • @neeraj4210
    @neeraj4210 Před rokem +1

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

  • @NazmulHaque-md1mc
    @NazmulHaque-md1mc Před rokem +1

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

  • @antonchigurh4125
    @antonchigurh4125 Před rokem +1

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

  • @user-zj6iz1rl8d
    @user-zj6iz1rl8d Před 2 měsíci +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.

  • @meherabhassan5421
    @meherabhassan5421 Před 10 měsíci +1

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

  • @nakoskyranos4080
    @nakoskyranos4080 Před 11 měsíci +1

    the accessibility part was awesome!

  • @NewbieDev42-it8tg
    @NewbieDev42-it8tg Před rokem +1

    You are the best css youtuber bro

  • @tanjimulislamsabbir2264
    @tanjimulislamsabbir2264 Před 9 měsíci +2

    That's outstanding. I love it. ❤

  • @hey.shashwat
    @hey.shashwat Před 6 měsíci +1

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

  • @mayankverma3684
    @mayankverma3684 Před rokem +1

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

  • @shineLouisShine
    @shineLouisShine Před rokem +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)

  • @soham3190
    @soham3190 Před měsícem +1

    Thanks broo for making such amazing video

  • @abdouiguess5441
    @abdouiguess5441 Před rokem +1

    DUDE
    WHY YOUR VEDS ARE AMAZING

  • @UndeadSasuke34
    @UndeadSasuke34 Před rokem +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.

  • @sahadpop4135
    @sahadpop4135 Před rokem +1

    Clear crisp explanation as always 🙌 ✨

  • @ui.930
    @ui.930 Před rokem +1

    I just found your channel and my life is saved.

  • @abdullahaladibakhand960
    @abdullahaladibakhand960 Před 10 měsíci +1

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

  • @gabrielv2187
    @gabrielv2187 Před 4 měsíci +1

    Man is the goat in explaining

  • @shubhamdhiman7516
    @shubhamdhiman7516 Před rokem +1

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

  • @flowerrbomb
    @flowerrbomb Před 5 měsíci +1

    You ate it up henny... thank u xoxo

  • @averagestudent9070
    @averagestudent9070 Před 9 měsíci +1

    This video is delighted to watch.

  • @shreyanshmalviya4571
    @shreyanshmalviya4571 Před rokem +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

  • @felipegutierrez2944
    @felipegutierrez2944 Před rokem +1

    This content is awesome! please keep going!

  • @nahal_rahman
    @nahal_rahman Před rokem +1

    You're gonna cross 1M for sure 🌟

  • @BK69XXX
    @BK69XXX Před 18 dny +1

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

  • @subyouwont
    @subyouwont Před rokem +1

    I thought I was understanding units okay but then I watched this video and my understanding grew a lot.
    Only thing I would add is to use the font size browser slider at the end of your rem section with the button to show how the padding interacts with the font. We can infer it grows and shrinks but I’m a visual learner

  • @graceljoyermena151
    @graceljoyermena151 Před rokem +1

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

  • @raven.4815
    @raven.4815 Před rokem +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!

  • @webb-developer
    @webb-developer Před 10 měsíci +1

    purely amazing thank you . ☑

  • @alexandrefernandes1976
    @alexandrefernandes1976 Před rokem +1

    great job man wow!!!

  • @Parthesh28
    @Parthesh28 Před 9 měsíci +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 !!!!

  • @s1gma9000
    @s1gma9000 Před měsícem +1

    7:55 'big disrespect, don't do this.' LMAO

  • @user-so6fv3gh5e
    @user-so6fv3gh5e Před rokem +1

    Great work. Keep it up!

  • @chrisuu__
    @chrisuu__ Před rokem +1

    Amazing content. Looking forward to more. Liked (loved!) + subscribed for life

  • @DanielAyioka
    @DanielAyioka Před 9 měsíci +1

    amazing stuff

  • @kamdanibwp
    @kamdanibwp Před rokem +1

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

  • @melihctl6747
    @melihctl6747 Před rokem +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  Před rokem

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

    • @melihctl6747
      @melihctl6747 Před rokem +1

      @@slayingthedragon thank you!

  • @fn2195
    @fn2195 Před rokem +5

    Thanks, no one can be shorter and more understandable

  • @Tech-Dev
    @Tech-Dev Před rokem +1

    Cheers for this.

  • @6.squash.936
    @6.squash.936 Před rokem +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  Před rokem

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

  • @__________HolySpirit__________

    You're amazing thank you

  • @witchestify
    @witchestify Před rokem +1

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

  • @finyx
    @finyx Před rokem +1

    You're making learning easier for me. Thanks a lot! Hope you get more subs and views. Also, I hope you're planning on making JS vids too.

    • @slayingthedragon
      @slayingthedragon  Před rokem +1

      I'm happy to hear that! And yea totally, JS vids are in the works

  • @shalin1
    @shalin1 Před 11 měsíci +1

    This channel is my priority now.

  • @ganeshsublaniya9923
    @ganeshsublaniya9923 Před rokem +1

    you are a great teacher.

  • @royandescartes
    @royandescartes Před 11 měsíci +1

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

  • @moreloveandjoy
    @moreloveandjoy Před 2 měsíci +1

    You are a genius. Thanks you.

  • @harshitjoshi3082
    @harshitjoshi3082 Před rokem +1

    I feel like a css god now 🙌

  • @redstone682
    @redstone682 Před 11 měsíci +1

    this is i need, ty.

  • @jonathantubo1310
    @jonathantubo1310 Před rokem +1

    This is very helpful

  • @HenzyProductions
    @HenzyProductions Před rokem +1

    Nice video!
    I like to use rem:
    :root {
    font-size: 62.5%
    }
    Its more easy to use, because 1rem = 10px, 16px = 1.6rem.

  • @AISHKARINGE-dd8pw
    @AISHKARINGE-dd8pw Před 9 měsíci +1

    so easy to understand 👍👍❤️!

  • @maulgans
    @maulgans Před rokem +1

    great channel

  • @_ndot
    @_ndot Před rokem +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.

  • @lucasstampini1713
    @lucasstampini1713 Před rokem +1

    yay new slaying the dragon video lesgooooooooooo