I used to think CodeDrip was the best programming youtuber, y'all both have way different styles, but man... no one beats you when it comes to your coding tutorials! Keep up the great work!
I saw almost 5/6 videos to understand the use of rem ,em and px. but I did not clear the difference and use case. then I got your lesson ,and now everything is clear.
First of all, great job with the way how you make the videos. I find the explanation simpler than any other programming tutorial channels out there. One small suggestion - when you are making a tutorial about dynamic sizing or spacing, it would be better if you can resize the output window to show how the objects would transform with relevant to the window or parent. Keep up the good work. You just earned a subscriber :)
I started to learn web development and the tiny tiny important concepts of CSS was very hard to understand and remember. But all your css based videos have made it easier for me! Thank you so much Kyle! Keep growing mate!
Yooooo, this is the first video and and most straight forward tutorial on CSS units I've watched. Whatever you're doing keep it up and improve as go grow. I've always wanted to know how these units work, and this tutorial has done it in one go. Thanks a lot man. God bless you.
00:20 px vs %: px is always absolute; % is based on the container 01:48 VW | VH: View width & view heights: Always based on screen width (independent of parent). 03:50 em | rem: em is based on the parent (local): rem uses the root size
I don’t know how I jump to ur channel but it’s coool I appreciate ur effort it’s so simple and clear then other channels here keep it up bro ur awesome 👏🏿
I think is important to mention, that vw and vh are relative not to the screen size but to the viewport (the square of the browser that renders the page)
hey man thanks a lot for the explanation, I am working on a project and wasn't sure which units to use, now I can see the difference and when to use it.
Em is even better when using padding for buttons or text inside a box with a colored background, as the padding grows or shrinks with the font-size. e.g. : button{padding:1em 0.5em}
I'm a simple man. I see a new Web Dev Simplified video...I click on it...hit the like button cause I know it's already going to be good...and then start watching.
Your videos are officially my favorite on RUclips. I have to let you know, your videos are high quality, professional and concise. Keep up the good work!
Your videos are like that cheat papers that you are using at the exam. It's so simple to pass the exam(complete a project) with the cheat papers(your videos). Thanks for your work!
One small correction: When using vw and vh, it's actually the percentage of the window size, not the screen size. Great explanation otherwise, as always.
Hi bro, a question for you.. Why percentage is not as wide as vw in the example? is'nt the percentage element parent a complete block element and that said, the child shouldnt take the 50% window screen?
@@abogadosasesorias8848 because in percentage one the content size is less as body has a margin of 8px given by browser so it calculates 50 % of lesser width hence less in width than that of vw which will use 50% of whole screen size and that includes margin 0f 8 px of body overall in simple terms due to the margin of body tag given by browser it is less
Summary: pixels (px): absolute unit, will not change no matter what percentage (%): relational to its parent's container size (height, width) and will change accordingly em (1em = 100%): relational to its parent's font size and will change accordingly rem (1rem = 100%): relational to the root's (the highest-ranking parent, typically the class) font size, it only change if the root is changed, or else it will not change viewport height/width (vh/vw, 1vh/1vw = 1%): relational to the window's size (the whole screen except for the "tabs" section in your PC browser) and will only change if the window size changed, or else it will not change small viewport height/width (svh/svw, 1svh/1svw = 1%): similar to viewport height but takes into account the url UI and the toolbar UI on mobile layout large viewport height/width (lvh/lvw, 1lvh/1lvw = 1%): similar to viewport height but takes into account only the url UI on mobile layouts dynamic viewport height/width (dvh/dvw, 1dvh/1dvw = 1%): the best of both small and large viewport height. When the toolbar is gone (retracted) it becomes large viewport height. When toolbar appears (extracted) it becomes small viewport height
Thanks , this tutorial like always was great ,teach easy and clear , most of the time I was confused about them BUT now ,these are completely clear for me,Thanks.🌸🌸
For me it's Kyle who simplifies every topic he come up with....
That's why I've subscribed him
I used to think CodeDrip was the best programming youtuber, y'all both have way different styles, but man... no one beats you when it comes to your coding tutorials! Keep up the great work!
Thank you so much!
You are seriously one of the best teacher out here. You make everything so simplified and easy to understand. Love your videos.
I saw almost 5/6 videos to understand the use of rem ,em and px. but I did not clear the difference and use case. then I got your lesson ,and now everything is clear.
First of all, great job with the way how you make the videos. I find the explanation simpler than any other programming tutorial channels out there. One small suggestion - when you are making a tutorial about dynamic sizing or spacing, it would be better if you can resize the output window to show how the objects would transform with relevant to the window or parent. Keep up the good work. You just earned a subscriber :)
Thank you for the feedback. That is a good idea and something I really should have done.
I started to learn web development and the tiny tiny important concepts of CSS was very hard to understand and remember. But all your css based videos have made it easier for me! Thank you so much Kyle! Keep growing mate!
Yooooo, this is the first video and and most straight forward tutorial on CSS units I've watched. Whatever you're doing keep it up and improve as go grow. I've always wanted to know how these units work, and this tutorial has done it in one go. Thanks a lot man. God bless you.
Thanks! I am really glad you enjoyed the video.
00:20 px vs %: px is always absolute; % is based on the container
01:48 VW | VH: View width & view heights: Always based on screen width (independent of parent).
03:50 em | rem: em is based on the parent (local): rem uses the root size
This guy is genious. I dont know how he explains everything in such an easy way
The most clearly and simplified explanation ever
3:45 "Don't care about their parents at all" lmao
deep 😂😂😂😂
@@leonkeanu5114 Okaaaaaay...
very well explained. Thank you for breaking things down and making it easier to grasp, specially visually. Keep up the good work.
This is the crispest video on RUclips, that clarifies most of the doubts on font units. Especially, between rem and em units. Thanks a lot!!
I have seen so many tutorials from folks over so many industries and yours truly stands out among them all. Thank your so much for your content!
Well explained.. whenever I searched for any css topic and if I saw video from this channel than my priority is to first click on this channel...
I was getting a bit of a hard time in learning the difference between these units but you explained it very well! Thank you and keep up the good work!
It's Best & Concise video on units in CSS i have ever seen..
Thanks Man !!!
Great subject - very well explained! Thanks a lot!
You're welcome
0 dislikes and 100% likes... you deserve this man......
Thanks. Hopefully it stays that way.
@@WebDevSimplified can you please make a video on making drop down menu in header without using Bootstrap
@@usama57926 This is a good idea. I probably won't make the video specifically for headers only, but a video on how to make a dropdown would be fun.
@@WebDevSimplified ok sir that video also help a lot
I always struggled understanding rem vs em... now I get it! thankssss!
I've now got to the point with your channel where I click "Like" before I click "Play". Not been wrong yet!
Dude, you deserve more recognition for your hard work. Thank you for a quality video everytime
I don’t know how I jump to ur channel but it’s coool I appreciate ur effort it’s so simple and clear then other channels here keep it up bro ur awesome 👏🏿
Thank you so much.
Thanks. Most needed topic. Most tutorials talk about basics, while developers want deeper stuff like this one. Thanks
You're welcome! I'm glad you enjoyed it.
I think is important to mention, that vw and vh are relative not to the screen size but to the viewport (the square of the browser that renders the page)
You've made life very easy for me.
hey man thanks a lot for the explanation, I am working on a project and wasn't sure which units to use, now I can see the difference and when to use it.
Em is even better when using padding for buttons or text inside a box with a colored background, as the padding grows or shrinks with the font-size. e.g. : button{padding:1em 0.5em}
Thanks for this A-ha moment. It's great to see the code and the browser render. So easy to understand.
You are very welcome! I'm glad you enjoyed it.
You are the only person I can understand about html and css very well !!
I forgot to say I am a new subscriber
I'm a simple man. I see a new Web Dev Simplified video...I click on it...hit the like button cause I know it's already going to be good...and then start watching.
Your videos are officially my favorite on RUclips. I have to let you know, your videos are high quality, professional and concise. Keep up the good work!
Your videos are like that cheat papers that you are using at the exam. It's so simple to pass the exam(complete a project) with the cheat papers(your videos).
Thanks for your work!
You are very welcome! I am really glad my videos are helpful for you.
You're one of the best (if not the best) teachers online.
Thanks for explanation. Pure and simple 👌👌
I can't believe your channel name actually describes your actual content. Very easy to keep up with your tutorials, well done!
One small correction: When using vw and vh, it's actually the percentage of the window size, not the screen size. Great explanation otherwise, as always.
yes and you can use vh in with property, that's important too
Hi bro, a question for you.. Why percentage is not as wide as vw in the example? is'nt the percentage element parent a complete block element and that said, the child shouldnt take the 50% window screen?
@@abogadosasesorias8848 because in percentage one the content size is less as body has a margin of 8px given by browser so it calculates 50 % of lesser width hence less in width than that of vw which will use 50% of whole screen size and that includes margin 0f 8 px of body
overall in simple terms due to the margin of body tag given by browser it is less
But on the other hand, screen size is interchangeably window size.
I've watched different videos on size unit but this really simplified it. Great video!
You explained everything in a simple way to everyone! Awesome. Now, I'm gonna be an expert at CSS, hahah
Excellent, clear, and concise. Thanks so much. You are my favorite person for CSS!
Thanks Kyle you just made this easy to understand
Super smooth. Thank you, Kyle!
Amazing as always buddy you're the one who I refer to let me check if Kyle has a video before I check anyone else
clean, concise explanation
Summary:
pixels (px): absolute unit, will not change no matter what
percentage (%): relational to its parent's container size (height, width) and will change accordingly
em (1em = 100%): relational to its parent's font size and will change accordingly
rem (1rem = 100%): relational to the root's (the highest-ranking parent, typically the class) font size, it only change if the root is changed, or else it will not change
viewport height/width (vh/vw, 1vh/1vw = 1%): relational to the window's size (the whole screen except for the "tabs" section in your PC browser) and will only change if the window size changed, or else it will not change
small viewport height/width (svh/svw, 1svh/1svw = 1%): similar to viewport height but takes into account the url UI and the toolbar UI on mobile layout
large viewport height/width (lvh/lvw, 1lvh/1lvw = 1%): similar to viewport height but takes into account only the url UI on mobile layouts
dynamic viewport height/width (dvh/dvw, 1dvh/1dvw = 1%): the best of both small and large viewport height. When the toolbar is gone (retracted) it becomes large viewport height. When toolbar appears (extracted) it becomes small viewport height
THANK YOU , excellent explanation.............
Man your explanation was so cool! Ver y good job!
Once again Kyle provides the best, clearly understandable explanation on an incredibly common topic.
Thank you. I'm really glad you enjoyed my video.
Awesome video, cleared my all doubts
Great Tutorial,
Simple and Great.
Thanks alot, I really liked the way you explane the CSS Units.
Please, Keep going up and best
Wow got my confusion cleared..Thanks!
Thank u bro, I just started learning about css and u made my life whole lot easier :D
Thank you! Awesome explanation in less than 10 minutes!
em is not based on its parent font size, it is based on its self font size but most of time it inherits from it's parent
Yeah this is correct
thanks you help many self learning people
thank you this really helped me understand this topic
Great video! Now I have it clear. Thanks!
A simple explanation. Thanks
Awesome Tutorial.
Thank you very much brother.
awesome teacher, much thanks from Morocco 🙏
Thanks , this tutorial like always was great ,teach easy and clear , most of the time I was confused about them BUT now ,these are completely clear for me,Thanks.🌸🌸
Bro explain vmin and vmax.
U r best u really make it Smiplified
Excellent job. THE best video on this rather confusing topic.
Thank you! I'm really glad you enjoyed it.
Your a gem ❤️💥....My confusion getting clear of this video
Thanks for this easy explanation💖
I love your explanation:)
So easy to understand compared with other teachers in my school
Very clear! thanks for making this
I cant thank you enough, learned so much.
Amazing tutorials man i like every video blindly before watching keep it up !!
nailed it in 8 mins. thanks mate
Thank you now i fully understand why the heck they said that em is still useful.
Your videos are very useful to me, thank you very much!
All your videos are really good. Good job bro
Thanks man for this amazing tutorial🙏🙏🙏
This video was very helpful, thank you
After seeing many videos on css units, finally found a great one 👍
great, simple, and to the point. Just what I needed, thank you. cx
I don't know name, becouse I'm new there, but you've helped me. Thank you man, I appreciate your work :)
Explained perfectly!
im inlove with you and your tutorials
Excellent explanation bro! Good work!
thanks bro your videos really helps me lot.
I am enjoying your videos very much and learning a lot as well. Found your channel when you did that collab video with Kevin Powell.
Nice! I am hoping to do another collab with Kevin in the near future. It was a lot of fun working with him.
Well explained, thanks so much,God bless you
You are an amazing teacher young boss
Thank you this was concise and helpful.
thank you ! very clearly
thanks! very simple explanation!
wow so easy to understand. Thank you!
u deserve more subscribers, man. Love from Kerala, India /\
Thank you Boss... very helpful!
Nicely explained, Thanks
The way you explaining in a more understandable way is very appreciative, I learned so much from you today... thanks Kyle
i love your teaching style
Kyle, you are such an amazing teacher!
Such a good explanation!
Thanks for a succinct explanation!
You really explained it perfectly, thank you so much Kyle
Thanks for clear tutorial
what a fluency man!!!!!!!!1 really good! so easy!thanks budy
You're welcome!