Summary: font-size: rem width: % in combination with a max-width, ch height: question urself "do i rly need to set height" if yes -> use a min-height padding/margin: rem or em, kevin often uses em for padding of buttons media queries: em px only for little things like shadows, borders etc. Great Video :)
@kedigiller1113 жыл бұрын
Just I'm looking for this, thanks :D
@JErock253 жыл бұрын
Thank you!
@colindante51643 жыл бұрын
Thanks ))
@DilshanPuwanendran3 жыл бұрын
thanks mate
@tabhesab35553 жыл бұрын
Thanks
@TheBigCheez3653 жыл бұрын
This is such a solid channel. Literally my go-to for any and all things CSS. You da man Kevin.
@yasuekko88143 жыл бұрын
Indeed 🔥
@ErikZettersten3 жыл бұрын
Second this
@juanmartinguillen48763 жыл бұрын
I concord
@robs2572 жыл бұрын
I agree
@dr_corrupt1014 Жыл бұрын
kevin you are the man!
@andreschavarria70913 жыл бұрын
Ok so I’m 37 years young and decided to learn html/css with absolutely 0 experience and knowledge about coding or programming. Your channel has made things way easier for me to understand. So I guess I just want to say thank you and recognize the importance of sharing and the impact you’re making.... thanks!
@toddhoward59473 жыл бұрын
All the best man ❤
@samuelgoncalves56163 жыл бұрын
Love that you are trying to learn! That's the way to go. Just out of curiosity, why did you start learning?
@rellison683 жыл бұрын
Hi Andres. I am 52 and am returning to development after about 10 years off. I really appreciate channels like this to help out. Good luck!
@andreschavarria70913 жыл бұрын
@@rellison68 thanks Robert, and good luck to you too! Agree with you, channels like this show some of the greatest benefits of platforms like KZbin... sharing IS caring
@andreschavarria70913 жыл бұрын
@@samuelgoncalves5616 thanks Samuel! My wife started doing volunteering at her job, but one requirement is that whoever they’re volunteering for, must have a website and must of them don’t have one... so I said to her... I can build them a website, I’m sure that’s easy! Ha, little did I know... lol. And so I started learning literally 32 days ago. It’s a win win situation, they get the website and I get to learn.
@cmyk89642 жыл бұрын
For basic HTML games, I define a custom variable in the root relative to the viewport width/height (e.g. min(4vw, 3vh)) and calc everything else relative to that
@patriknordberg12593 жыл бұрын
I think you missed out on CSS Grid and using fractions or fr. Which I think should be very relevant at this time. People really need to start embracing CSS Grid as it makes your layout so much cleaner and allows you to keep your HTML semanticly correct. Appreciated the comment about ch. I hadn't used that so much and it really makes sense for column sizes.
@lofi_stations2 жыл бұрын
I discovered this channel a few days ago, I learned more about mobile responsive design than anywhere else and feel more confident using CSS. Kevin, you're a real one
@rohitkf84742 жыл бұрын
Font size : use rem Width : coupled with max width, use ch unit(75 or less) Height : set min height Padding or margin : em(padding for buttons) or rem Medi queries : em
@TheJacklwilliams2 жыл бұрын
The ironic thing, as newb, I've used pixels for most everything because? I haven't the slightest idea of the definition and proper usage of the units you mentioned... Which of course, calls out the immediate need for me to, learn them, and use them accordingly. Thanks for this Kevin. I'm enjoying your content very much.
@tomasjsierra2 жыл бұрын
After watching this I improved my site by a lot, I think. Such a big difference in just 6 minutes of video. Many thanks.
@lofi_stations2 жыл бұрын
Same!! made a new css which went from 1000 lines to 700 for my website
@CodingNuggets3 жыл бұрын
The CSS GOAT bringing everyone some very useful info. Appreciate you Kevin. See you soon!
@TheMatcap13 жыл бұрын
After deploying some sites on html and css i started watching your tutorials and i´m totally impressed, you really helped me a lot improving my css styling an writing. Thanks!
@kiggi__3 жыл бұрын
I am playing catch up with everything HTML, CSS, Javascript. Your video's are fantastic at helping me get to grips with all that has changed, keep up the awesome content!
@VasilyPavlik3 жыл бұрын
Man, after your videos I started to use REMs. And it's marvelous. Because you can change only one font-size for body in media-query. And that's all. It works like variables even in IE. Now I'm thinking in REMs everywhere. Our body default font size is 10px, so it's quite easy to calculate. But it's also easy to scale layouts for any screen size depends on media. Thank you a lot!
@erichobbs40423 жыл бұрын
I learned about Ch from one of Kevin's other video's last year. It's my go to unit for designing text layout now.
@maxwellandyaffanyi74993 жыл бұрын
🙌🙌🙌👏.... You be CSS bossu 🥳🥳 😄Kudos from Ghana🇬🇭
@theorycreative3 жыл бұрын
Great video! It definitely gets confusing sometimes, especially if you’re hours into a project, getting tired and start making mistakes. I’m still a designer at heart, even though I’ve been writing code for decades, it’s not often enough to keep track of everything... and then throw math into the mix after a long day, d’oh!
@ViorelMocanu3 жыл бұрын
My rules of thumb are: » % or vw for box widths » % or vh for box heights (indeed, rarely) » rem or em for font sizes, leadings, and other type-related dimensions (e.g. image sizes sometimes) » em for paddings and margins » px for border widths (especially when aiming for that 1px crisp) and media queries (will take a look at the article you recommended, but in principle, it worked well for me so far) and widths and heights (even if I override them in CSS in other units) » ch for paragraph max-widths
I really like that you add your face to your content. It makes things much more direct, so it's easier to learn. :)
@MasayaShida3 жыл бұрын
Thanks so much for this I'm always insecure about what units to use
@Coco-ii2pu Жыл бұрын
You're the best tutor online Kevin. And somehow you have all the answers 😂. Thank you
@mikaockerman8326 ай бұрын
Our designers want things to look consistent across sizes, fully responsive, and they also make very complex designs. This means the headings, boxes, margins, padding all needs to adjust to screen size. I find myself using Calc with VW quite often. I don't know of that's the best way, but it has been working for me. I do use REM for font size whenever I can though. Thanks!!
@tonybell159710 ай бұрын
Thankyou! I’ve very recently arrived at coding a website for a group of people, having managed to avoid html, css and Java since Sir Tim B-L invented it! (Odd as I’ve been in this business for 40+ years) and now I’m here! Wow…. Thank you so much for your vids, they have been superb at explaining principles … keep up the grand work…
@arceniocornejo67793 жыл бұрын
I'm trying to learn more about css "little tiny details" for many years. I know your videos will be helpful to learn the subtle details hidden in this languages. Thanks very much for your efforts to disseminate these important techniques. PD I am a retired professor from Panama.
@doug78973 жыл бұрын
Due to writing a lot of wordpress stuff, I've avoided using the 62.5% font-size trick since that breaks certain styles in the admin. Instead I have a SASS function called rem(), which just takes whatever pixel value I want to have, and devides by 16 to convert to rems. Definitely a few more characters to type (painfully so), but I've honestly gotten used to it and outside of the awkwardness using them in things like long padding declarations, it's been pretty nice. Untill the designer uses inspector to figure out size adjustments and gives me values in REMs that I have to convert back to pixel values. Then it's hell.
@aceandember2 жыл бұрын
So, today something clicked and I owe it all to you Mr Powell. I have been doing CSS/SCSS almost every day for a few years but I didn't grasp the concept of parent height affecting the height of children until I watched one of your videos (you do great btw, ty). I struggled with dealing with it for a long time and today I was tackling a typical challenge, one where a div dynamically pops up from the bottom and I had to size the content above so that it could handle a custom scrollbar etc. Anyway, due to your videos, I walked it through and it worked the first time! Often I'd struggled over this similar scenario with other elements and had to guess, refresh, and just sort of luck my way into it. Now I get it! TY TY TY!!
@jackr91223 жыл бұрын
Kevin thank you so much man - the clarity I get from these videos is unreal. Keep it up, my friend!
@imluctor59973 жыл бұрын
You can also make a function in scss to calculate the pixels to rem. I always use that and call the function px-to-rem() if you take this in use make sure you don't have to put a value with px at the end to make it faster to write it.
@mountainslopes3 жыл бұрын
I like the idea of px for html font size (can change with breakpoints), rem for components, and em for elements within those components.
@KevinPowell3 жыл бұрын
For accessibility reasons, it's really important not to set the html font size with a pixel value. Assume the default is 16, and use a percentage. You can still scale that number up and down within breakpoints :)
@maitolehrer26133 жыл бұрын
I've been looking for this kind of video for a long long time now. Thank you so much for this!
@dimitrys.24943 жыл бұрын
i thought you had like a million plus followers. you are my go to guy if i don't understand something in css. let's try and bring you to at least half a mil. i'm sharing for sure all the time ! you go man!
@antoniomasotti80602 жыл бұрын
I love this man and his videos. You see immediately how experienced he is and still humble and willing to help. And the advices are always top, they greatly improved the way I use css.
@doubledeckercouch62513 жыл бұрын
Excellent video - and something which needed a quick reference point to "flick back to". Thanks Big K :)
@asdfasdfsdflk2 жыл бұрын
This is so useful for how short it is; I really appreciate this content.
@haliszekeriyaozkok48512 жыл бұрын
When ı wasn't know the difference between relative and absolute units ı used to the absolute units and because of that struggled with media queries. Thanks to Allah ı learned them and now my layouts even more responsive and ı don't use media queries too much.
@troelsrasmussen74573 жыл бұрын
Realy nice example with the button where padding is defined using em! Good job and nice videos - thanks!
@A_Lesser_Man3 жыл бұрын
css is the bane of my existence, you make it bareable!
@SalmanSharieff-One3 ай бұрын
I tend to use "em" for button padding, When text of my buttons are of different sizes, because if you are using fluid typography "em" will resize based on font size, much better alternative, since i use svg icons for my buttons.
@AnandKumarChaudhary3 жыл бұрын
Kevin has unparalleled skill of explaining highly complex concepts in very simple manner. Great Work!!!!
@necroowl39532 жыл бұрын
Thanks a lot, Kevin, your videos are awesome and very complete. This used to be super boring to me, and your content got me interested in actually learning SCSS.
@mmelimahlobo7656 Жыл бұрын
I am forever grateful for having such people like you,every time I am stuck with css I know you will be the solution to my problem may the Lord increase you more and more
@nymusicman3 жыл бұрын
Been a rem user for a long time and love it. First time learning about ch. I'm very excited to start using it in some of my websites.
@wickedwifestre2 жыл бұрын
this was extremely helpful. i’m pretty new to css so this gives me a lot of good stuff to think about. thank you!
@snaydenoff3 жыл бұрын
Great video! As a product designer who has just started writing my own html/css, I find your videos really useful! It would be great for beginners if you could expand on the issues with examples, such as what issues using the viewport width would cause. ✌️
@GR_BackingTracks Жыл бұрын
@ 4:21 is my favorite of the tips... I'm a brand newbie to this stuff and this seems perfect for the site I'm making.
@georgiosg9464 Жыл бұрын
this cool person is the only one who making me enjoy his content , describe it as much as simple he can!
@Priority643 жыл бұрын
In addition to awesome content you put out constantly, I also have to admire that your videos are CRISP! Love that not only your content is hiqh quality but your video quality too.
@MaulikParmar2103 жыл бұрын
I still prefer ems over rems when it makes sense with math and size ratios, it makes life easier when done with pre-processor. It's all about design aesthetics, math and design systems we use. Different people have different design system preferences and there's nothing wrong with it. At the end pixel perfect output matters when it comes to design.
@mabelwin47796 ай бұрын
THANKS U SO MUCH❤😢WITH your videos, now I become understanding about front end working .the videos are right to the point and save time❤🎉
@yahayaoyinkansola82587 ай бұрын
Thank you so much Kevin for this particular video!, it really clarified a lot for me
@DANNFIGDESIGNS Жыл бұрын
This was the video I was looking for. I know how the units work, but where to use them busted my brain. For the most part I was using vh and vw to much. Also, I was using em for my font sizes, and the parents all the way up were using em as well. Also the whole concept presented here will stick. Thank you Kevin. Big fan. Update: I read the article regarding the media queries and I'm curios if it's still relevant today. It definitely was written a long time ago. I'm using Webflow and was surprised to see them using px for media queries.
@chrislife11012 жыл бұрын
Kevin, I'm a dumbass, it's hard for me to pick up the simplest concepts, but idk how you do it. You just make my brain work with ur explanations. Currently following a Udemy course and alot of the properties etc are poorly explained, so I come here
@md.farukuzzaman3911 Жыл бұрын
Kyle(WDS) said, you are the guru of css, i think you are also the guru in presentations.
@zummon2 жыл бұрын
Browser setting is the main point of using *rem* . Just like dark and light mode. People preference is just infinite amount of works for developer/designer. And using *rem* helps a lot for sizing.
@RahulKumar-jx5ku3 жыл бұрын
You are making my job easier, Kevin. Thank you very much for that.
@90kidsgamezone763 жыл бұрын
You are the man who learn me a lot of love with css
@Reckless9173 жыл бұрын
Amazing video as always. Super concise and well explained, thanks a lot!!
@penggunayoutube25802 жыл бұрын
I always check a video or two from this channel. All of them is really helpful in my road on web development learning Love your content
@DrewBombard3 жыл бұрын
Just found Kevin last week. Wow… so awesome and easy to understand examples and tutorials and … just amazing.
@KevinPowell3 жыл бұрын
So glad you're enjoying my content!
@PharoahJardin Жыл бұрын
Just came from your video telling me to avoid using percentages for widths but here you recommend it... Also why not get into the nitty gritty? People clicked on the video to know about the details of CSS units. Everyone already knows the basics. Had to google rem vs em.
@0the0ambient03 жыл бұрын
Kevin ~ You are amazing . So much ambiguity yet you find clarity
@ru29793 жыл бұрын
Sir .This is a ultimate web dev channel . Kudos to your hard work and love your videos ❤️☺️
@utkarshagrawal36403 жыл бұрын
This is what i do...... html { font-size : 62.5%. [That is around 10px = 1rem] } then I use rem and em everywhere, helps a lot in responsiveness!
@dancehalllyrics13033 жыл бұрын
Thanks! I might try to adapt that into my pen future projects!
@LanFeusT233 жыл бұрын
This is a good solution, because then 1.5rem is very easily understood as "15px". That being said, when I do that I add body { font-size: 1.6rem } to bring back the default font size to 16px. Although I personally prefer leaving 100% on the html and only changing it for media query. If my designers want a default 14px (which I usually fight back against) then I'll do a body { font-size: 0.875rem }
@utkarshagrawal36403 жыл бұрын
@@LanFeusT23 this is not a good idea, bcs let say u add body { font-size : 0.625rem} And u have a parent div and a child div div#parent { font-size : 2em width : 2em } _____________ div#child { width : 2em } here the width of the child would be 80px and for parent would be 40px...... ________ where as rem unit would refer to the root element only and so to ease the multiplications i used html font size 62.5%
@LanFeusT233 жыл бұрын
@@utkarshagrawal3640 You make a good point, but I guess I should have added I don't use em units, ever. I find that using almost exclusively rem is a better and easier way to deal units. Using a large button is a good example that Kevin makes, but I'd rather just have a class that states what my font-size and margins are when large than having to deal with rem and em. If everything is rem you almost never have any issues!
@in43sh3 жыл бұрын
does it work for static websites?
@dragonore20093 жыл бұрын
Same here I don't use pixels as much anymore. For when I do use them, it's usually some margin left or right that needed 4px or something. The only big use I have for pixels is sometimes I will use them for min-widths where appropriate.
@lieutenantlascivious19923 жыл бұрын
Thank you so much! I learn so many little tricks and get so many great suggestions from your videos!
@micahhlc Жыл бұрын
the best CSS teacher in youtube.
@cmdaltctr3 жыл бұрын
THANK YOU THANK YOU! I have been wondering about this as a beginner and this helped me termendously!
@TheMoonLayingLow3 жыл бұрын
This is so helpful! Thank you for sharing your knowledge, Kevin.
@stefanofrontani22202 жыл бұрын
So clear. You've just won a new subscriber.
@KevinPowell2 жыл бұрын
Welcome aboard!
@lostcarpark2 жыл бұрын
That's really helpful. I occasionally need to design things for print, and sometimes for label printers, so need to be able to control exact size on the page. I generally use cm or mm with media queries for these.
@KevinPowell2 жыл бұрын
I come from a print background, and the idea of using fixed units like that in CSS scares me so much, lol. But it does the job!
@lostcarpark2 жыл бұрын
@@KevinPowell Absolutely. I think in most cases fixed units are to be avoid. There are just occasions when something needs go to a printer, and needs to fit precise measurements. Mostly this will be for admin pages that end users will never see.
@mechmaverick3 жыл бұрын
literally subbing because the "ch" explanation
@stevepiraud76293 жыл бұрын
Awesome, like always!
@md.siddiq71653 жыл бұрын
I set up font-sizes with vw and also I needed to make them responsive with media queries. Yeah I know that's a lot of work. I didn't find my way out with rem for font-sizes 🙂🙂
@joeldcanfield_spinhead3 жыл бұрын
When possible, I use calc(X.Xvw + 0.Xrem) - I haven't stopped to do the math yet, but I'm planning to come up with a formula that always works.
@md.siddiq71653 жыл бұрын
@@joeldcanfield_spinhead Thanks. Yeah I will try for that kind of formula too. Let me know if you can figure that out.
@jimhalpert98033 жыл бұрын
I'd rather just use rem with media queries set at the breakpoints when the font starts getting weird.
@KoalaBerzerker2 жыл бұрын
Ah well, I just did a small self-paced course on HTML and CSS. I can do some stuff but the more I watch your videos the more I know that I don't know crap.
@centrumsaiyan76232 жыл бұрын
Noooooooooooo Why didn't I came across this channel earlier in my life.
@mrx-qi8th3 жыл бұрын
Nice,thanks for sharing your information. I've always clicked the like button even if i didn't have the time to watch it at the moment
@guillermoandradaFSD3 жыл бұрын
Thank you so much... You channel is awesome
@enos51922 жыл бұрын
Trust me when I say Kevin is really underrated
@williamboshi18553 жыл бұрын
This topic interested so much I liked before watching, I hope the algorithm gods noticed
@vojkanbg Жыл бұрын
When setting the value of REM units, do you round or do you use full 3 or 4 decimal places? I mean for 21px on the front end, do you set 1.3125 rem, 1.313 rem, 1.31 rem, or 1.3 rem?
@shahshail123 жыл бұрын
Hey Kevin, your videos are awesome 👌, just wanted to ask you that is it a good practice to give margin top & bottom in vw?
@jensensphotography45706 ай бұрын
Shit that’s cool about the html font size to make calculating the rem size a lot easier
@eddymison35272 жыл бұрын
75 chars per line.. that's new to me. Thanks a lot.
@Vreth63 жыл бұрын
You nailed the thumbnail on this one 😂
@TheDMaciek Жыл бұрын
Thanks man! Great video
@adedimolao90942 жыл бұрын
This page is a goldmine
@kblyr3 жыл бұрын
Awesome! This is really very helpful, thank you!
@tommy63223 жыл бұрын
I am not sure. But hopefully you will clear things up for me! :) Love your videos!
@nico2207903 жыл бұрын
Percentages (except for fonts) and viewport units don't play well with the accessibility of your website. Some users need to use the zoom function and those units don't play well with that. Always use em for your media queries, not only for compatibility reasons but for accessibility as well. It will allow for the media queries to kick in when the user is zooming again just like it would when the viewport changes in size. Accessibility is easily overlooked, but some simple/low-maintenance tricks like these are a breeze to implement. Would be waste potential when ignored.
@krishchandrahasan79553 жыл бұрын
I see this being done all the time. Devs, in fact entire teams use rems for font sizes because, you know, they've probably heard that using pixels are bad and then they do two things. 1. Set the base font size in pixels (defeats the purpose of using ems end rems) OR 2. Use pixels for media queries along with REM font sizes - this completely destroys layouts when the media query kicks in and the base font is not 16px.
@PlayRiteProductions3 жыл бұрын
Video is gold, thanks so much!
@jovanlaguitao33842 жыл бұрын
Very helpful Kevin thank you so much!!
@fabulousman39997 ай бұрын
I used dvw in setting width and dvh in setting height
@Andrei-xb1pz3 жыл бұрын
Cool video! I don't like CSS but you make me hate it less
@vasiovasio2 жыл бұрын
Great video! Thank you!
@PaulNieman2 жыл бұрын
Brilliant and helpful advice. Thank you.
@timbittins3 жыл бұрын
If you would be a rapper, your name would be EmiRem
@huynh41283 жыл бұрын
This is the video i needed right now
@creatorshorizon51252 жыл бұрын
Em: will the real slim unit, please stand up!
@KasumovMedia3 жыл бұрын
Kevin after watching your channel religiously for 3 months I feel like I plugged into the matrix and downloaded some expert coder experience