Video starts at 2:30 Takeaway: For font-sizes, always use "rem" to avoid compounding problem Use "em" for properties other than fontSize like margin, padding, width etc... rem are useful when we are trying to use media queries
Thank you, Kevin. I didn't know prior to watching this that using ems outside of font-size is relative to that element and not it's parent element. I always learn something new with every one of your awesome videos and that is why I love your channel. You're awesome and thank you.
It's worth mentioning that em's are not only great for 'typographic padding' like you've shown, but for keeping line-height consistent with the font-size. And em's are the default for the unit and you can leave it off: line-height: 1.2;
No, that’s not how line-height works. line-height without a unit and line-height with em behave differently. The latter are not the default. If you leave out the unit line-height will be calculated for each element based on that element’s font size. If you specify line-height in em, it’ll be calculated once on the element the rule applies to and then all descendants will inherit that value regardless of their font-size.
I don't know how many times I've looked up the definitions for rem vs em and still felt confused as to when to use one over the other. Guess I'm more of a visual learner, thanks so much for this!
Wow this is the first instance I have ever heard that em's for everything besides font-size are referencing that particular element and not the parent. Solid information thanks!
Thanks Kevin! Longtime viewer first time commenter. The context in this video really solidified the inheritance concept of REMs for font size. I haven’t nested text the way you did in this video so the concept seemed too abstract before, I’ll definitely use REMs for font size moving forward.
OMG... mind blown. FINALLY I understand the difference, and why! As a noob responsive designer, this clears up a ton of problems for me already. THANK YOU!!!!
I did learn something important. I had not viewed the videos when you posted them in the course but having watched them now makes it easy to decide what to use when. Cool.
This is so helpful!! Thank you. I've been using EMs for fonts and was completely running into the HUGE example and getting really frustrated :) going to try rems
Maaan, this is excellent! Thank you for bringing so much clarity into my CSS World of understanding! :) i'm pretty sure these videos are highly valuable for others! :) Have a nice day, Fritz
Great video. I think "em"s can be useful for font size occasionally. It can be very useful if you have an element that you want to be a little bit smaller than the surrounding text, but the surrounding text could be different sizes in different contexts. As long as the parent element is set in "rem" (or another more predictable unit), it can be safe.
Hi, Kevin. using rem and em was known to me what you did explain about font size is the key learning for me. Thank you! I will share it with more people!
Very useful information!!!! I actually made it a policy to ALWAYS set font sizes using "em" so they would scale better than using pixels. I now understand the problem with this and will start using "rem" for font sizes. Question: when specifying a font size, using rem, must I sing or hum the song "Losing my Religion"? :) Thanks for posting!
I watch your videos randomly. lol Great tips man, very useful material. I didn't know the differences between one use and the other. Thank you very much! =D
I read article over article and didn't understand anything about this topic and felt kinda dumb. Thanks to you I finally understand it. Just like I finally understood Flexbox thanks to you.
awesome video, Kevin! Thank you. Would love to learn how one would go about setting margins in ems for the purposes of creating "vertical rhythm". Have you done this in a web project?
I have, and coming from a print background where baseline grids are common, I thought I'd love it. I ended up hating it, haha. I have it setup on my own site now (where the code is a complete mess, lol). So many times I found myself getting more frustrated with it than it helping me out, so I'm probably not the right person to take a deeper look into it, lol.
@@KevinPowell I totally hear you- there seems to be a lot of frontloading with typescales and line-height calculations. I'm doing a lot of reading on the subject- maybe I can share notes on what I've learned. BTW- purchased your course on Scrimba- loving it so far! Thanks for all that you do, Kevin!
I was watching the video and at the end of the day, I think it's about how can you justify what you pick and defend it. I can see em's being useful if say you really need and can justify elements being relative to another. Like you absolutely know that this font must be 1.5x times another font and you want it to scale as the other font scales. There are always exceptions to hard and fast rules and at the end of the day, it depends on how well you can reason about and explain and justify your code to others.
Hmm. It sounds like defining values for text stroke width and text shadow distance in ems will keep those effects proportional to one's text. Thanks for the tip!
To solve the em compounding without using either pixels or rems, you could use the > selector between the list parent and list item tags. However, good old IE6 did not support parent > child selectors. Font-size is an inherited property so using ems for heading and paragraph elements ensures they always have relative sizes, while you can adjust base size for the element. Rems are only relative to the root em of the html element, while using a mix of pixels and ems lets you vary text size in different regions.
If you know how to approach it, and you're really careful, it can even be useful at times, but I think for the majority of situations using rem makes life a lot easier. If it's well set-up, you can def. work with ems, but what if you end up with a component inside another component that you didn't plan on at the start, and suddenly it's hitting a double compounding effect?
Agreed. Luckily IE6 is dead, IE8 is on life support and IE11 will go the way of the dodo once Windows 7 is end-of-life. Although my main focus is on Javascript , I've worked alongside designers and frontend devs who manage to produce gargantuan pixel-perfect stylesheets with a zillion overrides and endless media queries because they don't understand that font-size is an inherited property and everyone in the UI/UX team refers to pixels.
My dear old Typographer lecturer, from way-back in the 1980's art college, would be rolling in his ash-tray at this one. This isn't a failure of the "em!" This is an issue of how local and global variables are handled. In the good old days; type used to be carved on the front of a block of metal. The "em" was the height of the block of metal; not the typeface carved in the front of it. Obviously you can't carve the font beyond the extent of the metal block. And all your twiddly bits have to fit in that block of metal. Hence the "em" is the height of the letter; PLUS the little bit of daylight above and below it. But notice the "em" is related to the size of the font. (Or more correctly the font is related to the size of the "em".) A 14pt "em" is different to an 18pt "em". It is "relative". "Proportional" . . . it is not a size . . . it's a "variable." A Chihuaha, and a Great Dane, are both dogs; but they are very different sizes. Bandying "em"s around as a size for something; is like the time my sister was convinced a box would fit into the back of her car because she had measured it with the strap of her handbag. Personally I'd stick to the raw data; points (1/72 of an inch); pixels; millimetres; inches - whatever . . even Picas and Ciceros . . . but this not a problem with "em" - this is about declaring variables . . and what the heck are you doing multiplying the "em" anyway? Uuurgh; made me giddy!
There is no like one more case when one of the font is small but good enough to read on desktop. And on lower screen sizes, when we reduce the root font size, the text is going to be unreadable. So we will be using more rem value than the desktop which is kind of confusing.
If you're going to use it for a font-size, use it within a calc, so something like calc(1rem + 2vw). Basing it only on viewport width is bad for accessiblity, and it also tends to make for *really* big fonts on large screens, or *really* small ones on small screens. clamp() can help with that though :)
Personally, I use a base pixel value (usually around 20px) on the HTML element, and then scale all font sizes (and some instances of margin and padding) using rem's. I rarely every use em's except for things like "small" or "large" classes. And those I use sparingly.
Hey , Kevin!! I’m really your big fan. I’m learning so much from your you tube channel, specially CSS. Do you have any video that can help me to learn How to create Web Component in vanilla Js or Angular?
However the cool thing thou when setting up root font size is that it makes easier to when scaling down to responsive With simply reducing the font size on the root all the elem that are set with rems would automatically adjust
I have found that by using vw or vh (whichever one has the lowest impact depending on viewport) works very well for font scaling. For example, I use vh when it is a desktop viewport. If I used vw for desktop, it was scale far too much and become too large. So vh works best. For tablet and mobile I use vw.
I use rem exclusively, with the exception of pt, which I sometimes use with printing in mind. But the worst thing you can do is using viewport units for font size, it completely destroys the accessibility of a webpage. Browsers really ought to prevent developers from doing this.
If you use just vw for a font-size, things will go to hell quickly. If you add it in a calc with a decent rem as the "base", it stops things from getting crazy in terms of size, but I don't know the overall accessibilty impact. I'd never do it on the body though, only a really big h1, say something like calc(5rem + 1vw). I think from an accessibility perspective it would be safe, but I'd want to talk with someone who knows more before saying that.
I had a div with a height in vh and i wanted the content (one word) to fit exactly in that div so I used vh as my font size. Wat would've been a better way to do this?
Actually, like @Hanneke, I have used viewport width units as a font size, exactly FOR responsiveness reasons. It's a great way to get large or very large text to fill a screen or area. For example, you could set a font-size of 10vw or 11vw to display elapsed time of hours, minutes, and seconds with colons between and it would fill the width of the viewport no matter how big it is. I would agree with you that it is a terrible way to specify the size of 'normal' text.
What do you think about something like "font-size: calc(1.5rem + 0.5vw); " I've seen people using this for scaling the font as the screen size changes. Thanks for this video, I did not know that em's compounded like that.
I've done that for titles, and think it can be useful. I don't like it for body text, things can get too small. But I do like the idea. I've heard of issues with accessibility, but I *think* it's all good as long as the "base" size (the rem part) is big enough... but I'm far from an accessibilty pro
@@marshchawki1912 it does a calculation on page render I believe that will take into account the viewport width and add that to the value that rem calculates...so if your rem is say 24px and your viewport width is 600px then you will wind up setting your font-size to 27px (1.5*16px + 600px*.005) = 27 px
i have been following various tutorials on html , css and js for the past couple of months, currently I feel as I have hit a wall and progress has reduced significantly as most of the tutorials target beginners ,... please suggest as to how to further Improve my skill in this field
Deaf dog You should try and look at awwwwards.com, there are always a lot of fantastic projects shown on there, you can recreate them or even make something new yourself while you improvise using the stuff people made on there! Think about real life problems, someone already fixed a problem by making something, recreate that and make it as your own. For example, forums, blogs, your own cms etc.
I've got some idea brewing here, but as Liam said, it might not be that the tutorials are too basic, and it might be that you're ready to start doing things without tutorials. Now, you still might get stuck, but it'll be on a part of what you are trying to do and then you'll be able to find an article or short video for that one specific thing.
Great video never knew about rem and em and how they work etc only 2 months xDD (my parents card and mine ive used 10 months free xD) now im payng but yeah 10 months free was good
In my website i always use em because they scale nicely, also according to media queries you can manipulate body's font size accordingly And my friends there is very little chances that you are going to use this deep nesting of html
6:13 if we assume a class .cta_button { background: red; text-decoration: none; padding: 1em 4em; } . If we don't define font-size inside .cta_button class then, what value does em in padding reference to?
@@KevinPowell I don't use em for padding and margins because of two reasons, 1> its size depends on its parent element because of that if I got a need to change the size of parent element every child elements messed up. 2> when you set a font-size to root element ( html ) and use rem for padding, margin, and fonts then try changing the root element (html) everything changes, use there your media queries to break. I hope this helps.
@kevinpowell, or anyone on the channel who knows and adapted this approach, Is there any type of conversion, maybe some chart exists online where you can understand what 10px is in rem? I am trying to understand if the designer sends me the figma file all set in px how should I transfer in rem but still meet the spec requirements. How you normally start with building the page using this metric system
Video starts at 2:30
Takeaway:
For font-sizes, always use "rem" to avoid compounding problem
Use "em" for properties other than fontSize like margin, padding, width etc...
rem are useful when we are trying to use media queries
vg job at takeaway!
I mostly only use REM, %, vw and vh units. No em
Bruhs Doing Gods Work
Life saver
but what if i use the rem for parent element and em for children element ?
finally get the point of em and rem. Confused me since I knew them. Thank you so much!
Thank you, Kevin. I didn't know prior to watching this that using ems outside of font-size is relative to that element and not it's parent element. I always learn something new with every one of your awesome videos and that is why I love your channel. You're awesome and thank you.
Glad you learned something Jeff :D - The joy (and sometimes frustrating thing) about CSS is there is always something new to learn!
It's worth mentioning that em's are not only great for 'typographic padding' like you've shown, but for keeping line-height consistent with the font-size. And em's are the default for the unit and you can leave it off:
line-height: 1.2;
No, that’s not how line-height works. line-height without a unit and line-height with em behave differently. The latter are not the default. If you leave out the unit line-height will be calculated for each element based on that element’s font size. If you specify line-height in em, it’ll be calculated once on the element the rule applies to and then all descendants will inherit that value regardless of their font-size.
@@mina86 *descendants* will inherit
@@GregPerham, fixed, thanks.
Best channel out there for CSS. Thanks for your clarity, your pacing and your rigor.
I don't know how many times I've looked up the definitions for rem vs em and still felt confused as to when to use one over the other. Guess I'm more of a visual learner, thanks so much for this!
3:39 em compunds each other
4:29 show that em has multiple !
6:38 use rem instead
9:02 when to use em
Many thanks Kevin! So much clarity you gave and with simple to understand language. Always nice to watch your video. 👍👍
Wow this is the first instance I have ever heard that em's for everything besides font-size are referencing that particular element and not the parent. Solid information thanks!
Thanks Kevin! Longtime viewer first time commenter. The context in this video really solidified the inheritance concept of REMs for font size. I haven’t nested text the way you did in this video so the concept seemed too abstract before, I’ll definitely use REMs for font size moving forward.
Awesome :D and glad that you took the time to comment!
OMG... mind blown. FINALLY I understand the difference, and why! As a noob responsive designer, this clears up a ton of problems for me already. THANK YOU!!!!
I did learn something important. I had not viewed the videos when you posted them in the course but having watched them now makes it easy to decide what to use when. Cool.
I thought I never gonna use em, but now there is a perfect case to use so along with a perfect explanation when not to use them. Thanks!!
This is so helpful!! Thank you. I've been using EMs for fonts and was completely running into the HUGE example and getting really frustrated :) going to try rems
I gotta tell ya, this was the most perfect explanation of em's and rem's. Thank you so much, Kevin!
Wow, I just updated my project and now it perfectly adapts to the browser text size :)
THANK YOU!
Maaan, this is excellent! Thank you for bringing so much clarity into my CSS World of understanding! :) i'm pretty sure these videos are highly valuable for others! :)
Have a nice day,
Fritz
Great video. I think "em"s can be useful for font size occasionally. It can be very useful if you have an element that you want to be a little bit smaller than the surrounding text, but the surrounding text could be different sizes in different contexts. As long as the parent element is set in "rem" (or another more predictable unit), it can be safe.
Hi, Kevin. using rem and em was known to me what you did explain about font size is the key learning for me. Thank you! I will share it with more people!
MR KEVIN!!! Your channel is a freakin gold mine when it comes to web stuff.
Thank you. I will be using REMs for basic text and EMs for the pagination buttons I create for query results.
This video's title should be "Difficult Concept Made Easy in Less Than 15 Minutes." As always, an excellent explanation.
Nice tutorial, came here via conquering responsive layouts. Thanks Kevin!
Thanks Kevin for this video finally I got the concept of em and rem and which one to use when cheers and stay safe
CRL - Day 2! TY KEVIN! Filling in a lot of gaps in my css journey.
Thankyou! I was so confused 😬 but this cleared all my doubts 🙇🏾♂️
Very useful information!!!! I actually made it a policy to ALWAYS set font sizes using "em" so they would scale better than using pixels. I now understand the problem with this and will start using "rem" for font sizes. Question: when specifying a font size, using rem, must I sing or hum the song "Losing my Religion"? :) Thanks for posting!
only font-size em reference to parent element, rest of properties with em value reference to that element. MIND BLOWN
Thank you! I've read tons of articles to clarify these differences but they were too boring to actually fix something in my mind eheh
I thought I had the em vs. rem figured out, but you just gave me the last pieces of the puzzle. Thank you!
I watch your videos randomly. lol Great tips man, very useful material. I didn't know the differences between one use and the other. Thank you very much! =D
Wow! I thought I knew enought about EM's, but using for paddings is cool, thank you again!
Finally. Got the difference between em and rem. I m just starting out and it helped a lot
Kevin, thank you. Now I finally understand em and rem. Your content is excellent.
Thanks Kevin. Your explanations are so straightforward and easy to understand!
I read article over article and didn't understand anything about this topic and felt kinda dumb. Thanks to you I finally understand it. Just like I finally understood Flexbox thanks to you.
I definitely learned something new with this video, you're always doing a great job in making css a little bit less frustrating 🤣
Damn this vide entirely my confusion with rems and ems. Thanks Kevin !
Thank you for this. It cleared it up and lifted the fog
Awesome and makes me think twice about px for these things.
cleared up a lot of confusion between the two, thank you very much!
Thanks so much for the amazing css tutorials.
Like always, awesome! Keep uploading such useful content like this. Thanks!
Thanks for putting out this one. Clearly understood
You’re my favourite youtuber👏🏻🤩
It opened my eyes, I was struggling with ems and rems
This video is very helpful, as a starting web designer your vids are so helpful in my job!
Following Conquering Responsive Layout cours, thanks! Solid informations.
Solid like dropped on this video. I learned about em applying to font size.
I don't know what to say. You're awesome. Thanks 🚀
wow thank you so much kevin that was really awesome all the love from Egypt :D
What a legend! Thanks for the great explanation!
awesome video, Kevin! Thank you. Would love to learn how one would go about setting margins in ems for the purposes of creating "vertical rhythm". Have you done this in a web project?
I have, and coming from a print background where baseline grids are common, I thought I'd love it. I ended up hating it, haha. I have it setup on my own site now (where the code is a complete mess, lol). So many times I found myself getting more frustrated with it than it helping me out, so I'm probably not the right person to take a deeper look into it, lol.
@@KevinPowell I totally hear you- there seems to be a lot of frontloading with typescales and line-height calculations. I'm doing a lot of reading on the subject- maybe I can share notes on what I've learned.
BTW- purchased your course on Scrimba- loving it so far! Thanks for all that you do, Kevin!
Another wonderful video. 👏👏 Thanks Kevin!
Thx, that really helped a lot. Keep it up, Cheers
I was watching the video and at the end of the day, I think it's about how can you justify what you pick and defend it. I can see em's being useful if say you really need and can justify elements being relative to another. Like you absolutely know that this font must be 1.5x times another font and you want it to scale as the other font scales. There are always exceptions to hard and fast rules and at the end of the day, it depends on how well you can reason about and explain and justify your code to others.
Awesome! Thanks Kevin!
Hmm. It sounds like defining values for text stroke width and text shadow distance in ems will keep those effects proportional to one's text.
Thanks for the tip!
Great! Thank you Kev!
Years ago before REM became a standard this caused so much pain for me. Messed up sizes in need for redeclaring and don't forget line-height issues...
To solve the em compounding without using either pixels or rems, you could use the > selector between the list parent and list item tags. However, good old IE6 did not support parent > child selectors. Font-size is an inherited property so using ems for heading and paragraph elements ensures they always have relative sizes, while you can adjust base size for the element. Rems are only relative to the root em of the html element, while using a mix of pixels and ems lets you vary text size in different regions.
If you know how to approach it, and you're really careful, it can even be useful at times, but I think for the majority of situations using rem makes life a lot easier. If it's well set-up, you can def. work with ems, but what if you end up with a component inside another component that you didn't plan on at the start, and suddenly it's hitting a double compounding effect?
If IE6 is your target, rems will be an issue too - they're not supported until IE9. And don't use them in the font shortcut if your target is IE 9-10.
Agreed. Luckily IE6 is dead, IE8 is on life support and IE11 will go the way of the dodo once Windows 7 is end-of-life. Although my main focus is on Javascript , I've worked alongside designers and frontend devs who manage to produce gargantuan pixel-perfect stylesheets with a zillion overrides and endless media queries because they don't understand that font-size is an inherited property and everyone in the UI/UX team refers to pixels.
Really great video. I'll grab this knowledge for my life
Love this! Just finished day 2 stuff
Just wanna say .. Thanks a lot, Kevin… this cleared a lot of my confusions using em and rem 👍…
Great video Kevin as always. You say don't use the 62.5% trick but I learned that trick from one of your other videos lol
My dear old Typographer lecturer, from way-back in the 1980's art college, would be rolling in his ash-tray at this one. This isn't a failure of the "em!" This is an issue of how local and global variables are handled. In the good old days; type used to be carved on the front of a block of metal. The "em" was the height of the block of metal; not the typeface carved in the front of it. Obviously you can't carve the font beyond the extent of the metal block. And all your twiddly bits have to fit in that block of metal. Hence the "em" is the height of the letter; PLUS the little bit of daylight above and below it. But notice the "em" is related to the size of the font. (Or more correctly the font is related to the size of the "em".) A 14pt "em" is different to an 18pt "em". It is "relative". "Proportional" . . . it is not a size . . . it's a "variable." A Chihuaha, and a Great Dane, are both dogs; but they are very different sizes. Bandying "em"s around as a size for something; is like the time my sister was convinced a box would fit into the back of her car because she had measured it with the strap of her handbag. Personally I'd stick to the raw data; points (1/72 of an inch); pixels; millimetres; inches - whatever . . even Picas and Ciceros . . . but this not a problem with "em" - this is about declaring variables . . and what the heck are you doing multiplying the "em" anyway? Uuurgh; made me giddy!
😮
So that is how it works! Thanks!
thank you Kevin！！🙏🙏🙏
Amazing video! Thanks
Thanks, glad you enjoyed it :D
There is no like one more case when one of the font is small but good enough to read on desktop. And on lower screen sizes, when we reduce the root font size, the text is going to be unreadable. So we will be using more rem value than the desktop which is kind of confusing.
As my experience
VW (view with) is best option to use for font size because font size will be adjusted on small and big screen. 1vw = 1%
If you're going to use it for a font-size, use it within a calc, so something like calc(1rem + 2vw). Basing it only on viewport width is bad for accessiblity, and it also tends to make for *really* big fonts on large screens, or *really* small ones on small screens. clamp() can help with that though :)
Thanks ! Just thanks a lot !
Personally, I use a base pixel value (usually around 20px) on the HTML element, and then scale all font sizes (and some instances of margin and padding) using rem's. I rarely every use em's except for things like "small" or "large" classes. And those I use sparingly.
I think the possible issue with this might be accessibility for those who need a larger base font size; I think Kevin made another video about this.
Thank You Very Much!!! ~ Peace :) Have a Great Day!!! :)
very clear, thanks :)
Hey , Kevin!! I’m really your big fan. I’m learning so much from your you tube channel, specially CSS.
Do you have any video that can help me to learn How to create Web Component in vanilla Js or Angular?
Not really 😕
I have a few JS things, but nothing much.
Oh, well I do have a carousel with vanilla JS
Once again, clearing up a small yet massive issue. em's for padding and margin, rems for fonts! :D
However the cool thing thou when setting up root font size is that it makes easier to when scaling down to responsive
With simply reducing the font size on the root all the elem that are set with rems would automatically adjust
This is great! Using em paddings. Should I use em on margin? Thank you so much!
There are times to use em for margin (I do most of the time), but if you want to ensure it's always a fixed size, then use rem :)
I have found that by using vw or vh (whichever one has the lowest impact depending on viewport) works very well for font scaling. For example, I use vh when it is a desktop viewport. If I used vw for desktop, it was scale far too much and become too large. So vh works best. For tablet and mobile I use vw.
Thank you CSS KING 👑
Thanks KEV
I use rem exclusively, with the exception of pt, which I sometimes use with printing in mind.
But the worst thing you can do is using viewport units for font size, it completely destroys the accessibility of a webpage. Browsers really ought to prevent developers from doing this.
If you use just vw for a font-size, things will go to hell quickly. If you add it in a calc with a decent rem as the "base", it stops things from getting crazy in terms of size, but I don't know the overall accessibilty impact. I'd never do it on the body though, only a really big h1, say something like calc(5rem + 1vw). I think from an accessibility perspective it would be safe, but I'd want to talk with someone who knows more before saying that.
I had a div with a height in vh and i wanted the content (one word) to fit exactly in that div so I used vh as my font size. Wat would've been a better way to do this?
Actually, like @Hanneke, I have used viewport width units as a font size, exactly FOR responsiveness reasons.
It's a great way to get large or very large text to fill a screen or area. For example, you could set a font-size of 10vw or 11vw to display elapsed time of hours, minutes, and seconds with colons between and it would fill the width of the viewport no matter how big it is.
I would agree with you that it is a terrible way to specify the size of 'normal' text.
How did I not know this?
Better late than never :D
What do you think about something like "font-size: calc(1.5rem + 0.5vw); " I've seen people using this for scaling the font as the screen size changes. Thanks for this video, I did not know that em's compounded like that.
I've done that for titles, and think it can be useful. I don't like it for body text, things can get too small. But I do like the idea. I've heard of issues with accessibility, but I *think* it's all good as long as the "base" size (the rem part) is big enough... but I'm far from an accessibilty pro
how this works?
@@marshchawki1912 it does a calculation on page render I believe that will take into account the viewport width and add that to the value that rem calculates...so if your rem is say 24px and your viewport width is 600px then you will wind up setting your font-size to 27px (1.5*16px + 600px*.005) = 27 px
i have been following various tutorials on html , css and js for the past couple of months, currently I feel as I have hit a wall and progress has reduced significantly as most of the tutorials target beginners ,... please suggest as to how to further Improve my skill in this field
Deaf dog You should try and look at awwwwards.com, there are always a lot of fantastic projects shown on there, you can recreate them or even make something new yourself while you improvise using the stuff people made on there! Think about real life problems, someone already fixed a problem by making something, recreate that and make it as your own. For example, forums, blogs, your own cms etc.
I've got some idea brewing here, but as Liam said, it might not be that the tutorials are too basic, and it might be that you're ready to start doing things without tutorials. Now, you still might get stuck, but it'll be on a part of what you are trying to do and then you'll be able to find an article or short video for that one specific thing.
@@KevinPowell thank u .. il start workng towards that direction
Great video never knew about rem and em and how they work etc
only 2 months xDD (my parents card and mine ive used 10 months free xD) now im payng but yeah 10 months free was good
Kevin, thanks A LOT.
In my website i always use em because they scale nicely, also according to media queries you can manipulate body's font size accordingly
And my friends there is very little chances that you are going to use this deep nesting of html
6:13
if we assume a class
.cta_button {
background: red;
text-decoration: none;
padding: 1em 4em;
}
. If we don't define font-size inside .cta_button class then, what value does em in padding reference to?
Thank you!
Thanks alot
I use rem for font-size and em only for media-quries :-)
Isn't more simple to use px for media queries ? I don't really see why it could be useful to use em instead
@@Banalitude Answer is right here > zellwk.com/blog/media-query-units/
No ems for padding or margins?
Question...does everyone use standard pixel widths for the media queries and if so, what are they?
@@KevinPowell I don't use em for padding and margins because of two reasons, 1> its size depends on its parent element because of that if I got a need to change the size of parent element every child elements messed up. 2> when you set a font-size to root element ( html ) and use rem for padding, margin, and fonts then try changing the root element (html) everything changes, use there your media queries to break. I hope this helps.
This is awesome.
This is why frameworks like Tailwind use rem for font size. I've always tended to used rem, it just seemed like common sense to me.
thanks
Thanks.
start button - 2:37
Great video as always =)
@kevinpowell, or anyone on the channel who knows and adapted this approach, Is there any type of conversion, maybe some chart exists online where you can understand what 10px is in rem? I am trying to understand if the designer sends me the figma file all set in px how should I transfer in rem but still meet the spec requirements. How you normally start with building the page using this metric system