No video

The CSS Units You Should Use: em, rem, % , vh, vw, and more - Colt's Code Camp

  Рет қаралды 27,087

Colt Steele

Colt Steele

Күн бұрын

Пікірлер: 93
@rajeevkumar2506
@rajeevkumar2506 4 жыл бұрын
You are my favorite teacher :) I have bought so many udemy courses of yours such as python3 Bootcamp, web development, javascript course, and even your Bootstrap4 course ;) and leanred so many things by watching your videos and i love doing the homework given by you... You are the best
@tawsifhaque9360
@tawsifhaque9360 2 жыл бұрын
I agree, Colt is a godsend!
@highrollerph
@highrollerph Жыл бұрын
I am one of your students in Web development bootcamp in Udemy. Thanks to your lessons I finally landed a wordpress jobs.
@warrenc2875
@warrenc2875 4 жыл бұрын
13:15 in awe at the size of this em. absolute unit
@ToriKo_
@ToriKo_ 4 жыл бұрын
Lmao
@haythamkenway8343
@haythamkenway8343 4 жыл бұрын
You deserve a sliver play button 👌
@evan_sarantis
@evan_sarantis 4 жыл бұрын
Your video editing style with the minimalistic yet descriptive slides is 🔥
@AyushKumar-yk9fw
@AyushKumar-yk9fw 4 жыл бұрын
I really like your courses, the main reason I choose your course is that your courses aren't boring!
@suyashrahatekar4964
@suyashrahatekar4964 3 жыл бұрын
Best video explaining relative units.
@plumbooom
@plumbooom 4 жыл бұрын
Such an awesome video! Thank you so much, Colt, you're truly amazing teacher. Your lessons are always so well structured, so beautifully designed. It's pleasure to study with them. Already looking forward to the next one!
@irinabobina
@irinabobina 4 жыл бұрын
Your voice IS soothing! But definitely not boring. These videos are such a great resource, thank you for doing so much for the community!
@ToriKo_
@ToriKo_ 4 жыл бұрын
“What units should I use?” 26:55
@damilolamichael1024
@damilolamichael1024 Жыл бұрын
‘If you fell asleep I hope you had a nice nap’ 😂. Very informative video. Thanks Colt
@0MaXxXiMuS0
@0MaXxXiMuS0 4 жыл бұрын
You're an absolute unit of a teacher :)
@Mufti199
@Mufti199 4 жыл бұрын
My friend, you are amazing. Just found your channel yestersday and have been binge watching your videos and applying everything I'm learning on my projects. Keep it up and I'm sure you're gonna hit 1 million real fast.
@canersanli
@canersanli 4 жыл бұрын
Hi Colt, I love you so much, man. I bought your HTML, CSS and JS course on Udemy and it really helped me a lot. The way you explain things is so calm and understandable. Thank you for sharing these videos as well, they're like a recap for me and I'm sure the people who just started to learn, will learn a lot from you.
@sharsports4249
@sharsports4249 4 жыл бұрын
It is so nice to learn something fun online during this boring time. I am so glad I came across your channel. I started from the beginning and am working on a website and am enjoying it lot. Thank you so much for your video courses. Keep it up. You rock!
@electrichimp
@electrichimp 4 жыл бұрын
You're the best programming teacher period man. Thank you for such amazing content, congrats on 100k... You deserve 10 million, but that's just how growing a youtube channel works I guess. Best of wishes from Peru
@Classick
@Classick 4 жыл бұрын
I've taken courses, watched tutorials everywhere, and am even finishing a boot camp at the moment; I have yet to find an instructor that comes close to your teaching abilities. You started me on my journey to be a Software Engineer when I started your Web Dev Bootcamp on Udemy, and now hopefully I'm on the verge of landing that salary I've always dreamed of. Thank you.
@hahabobblehead2059
@hahabobblehead2059 4 жыл бұрын
how did it go? have you got your dream job?
@BittaJam
@BittaJam 4 жыл бұрын
Your voice surely is soothing! There is something about it that makes me relax and feel good! I guess it was the reason I started taking your Udemy courses (which turned out to be extremely helpful!). Usually when I hear about units, I turn berserk, as nobody wants to listen to logic, and people just use whatever they get used to, and there are too many options. Your logic is very clear and very similar to my own, so it makes me feel even better :) Thank you!
@Jean-yk9eo
@Jean-yk9eo 4 жыл бұрын
OMG I haven't seen this video, but I was wondering when to use these units since they are so many of them. Then, Boom! here we are!
@robbysingh8557
@robbysingh8557 4 жыл бұрын
Incredible section on fonts. They are crystal clear to me now. Thanks a ton.
@Chris2phaBrown
@Chris2phaBrown 2 жыл бұрын
When you hear that the units (specifically pica and points) were used in "print", "print" is referring to the way things were done before the use of computer printers, ie. the pre press stage of the printing process before it went to the printing press. I did a pre press apprenticeship in the late 90s so was probably among the last to learn the old process. Most of my time was spent cutting up negatives and exposing printing plates. A fun fact.. mask layers use to be red in Photoshop because in the older printing process, when exposing negatives, you would use a red layer ( called ruby) as a mask as it would filter the UV light.
@Rishit.Chaudhary
@Rishit.Chaudhary 4 жыл бұрын
Really great video to understand how exactly to use the right units, to make things work well and still look good across screen sizes!
@tkv559
@tkv559 4 жыл бұрын
This is a very high quality content. So much knowledge in just a short video. Thank you very much.
@JJDirtBiker
@JJDirtBiker 4 жыл бұрын
Locked down in quarantine and hoping to build skills to change industries, your courses have been an absolute godsend. Finding that I genuinely enjoy the process so far, and your teaching skills are just so effective. Thank you Colt! ....also....any chance of a link for that wonderful desktop wallpaper? THANKS SO MUCH!!
@ShujathHussain0
@ShujathHussain0 4 жыл бұрын
Congratulations on 100k subscribers to one of the best teacher we have
@eminm6383
@eminm6383 4 жыл бұрын
Amazing, crystal clear explanation. I also bought your JS course in udemy, it is excellent, reccommend to everyone.
@codeandcurious
@codeandcurious 4 жыл бұрын
Thank you colt , you have been a life changer for me , thanks for making the amazing course on web development
@pause9071
@pause9071 2 жыл бұрын
I really appreciated your video, you are a really good teacher man keep on it
@anikafp
@anikafp 4 жыл бұрын
You are an amazing teacher! Finally I can understand stuff!
@achtube85
@achtube85 3 жыл бұрын
This was SO clear. Straight to the point. As always, THANKS Colt! I always enjoy your vids and Udemy Courses (currently doing the JS one!)
@AMIRBENDABI
@AMIRBENDABI 4 жыл бұрын
Congrats with your 100k Subs!! You deserve a million.
@gurrapushivasai9518
@gurrapushivasai9518 4 жыл бұрын
No words on ur teaching skills...>5
@Dynamicsimpson
@Dynamicsimpson 3 жыл бұрын
Thank you, you're a great teacher and I 'overstand' the relevant units for web development now.
@anna-mariia_stadnyk
@anna-mariia_stadnyk 2 жыл бұрын
This video is super amazing both in its content and in its power to give you a nap :)
@nabanitamaity6334
@nabanitamaity6334 4 жыл бұрын
You are best programming teacher...
@wafaken
@wafaken 4 жыл бұрын
Great explanation. Your videos are always informative. Thank you Colt.
@krissykins2010
@krissykins2010 4 жыл бұрын
Thanks for this video! I have really had trouble with understanding units, so this was very helpful. I do have to admit that I giggled every time you said absolute units because I kept thinking of the /r/absoluteunits subreddit, haha. PS: Your voice is very soothing. 😄
@ColtSteeleCode
@ColtSteeleCode 4 жыл бұрын
Hahah I originally had a photo of my rather large cat in there with the caption "ANOTHER ABSOLUTE UNIT" but I ended up cutting that part of the video :(
@krissykins2010
@krissykins2010 4 жыл бұрын
Haha amazing! I'm sad that it didn't make the final cut for this video, but I'm sure you can find a way to sneak it into another one. 😜
@shahreazneeloy2119
@shahreazneeloy2119 4 жыл бұрын
100K coming soon...........Love you Boss
@tim_t
@tim_t 4 жыл бұрын
This tutorial is packed with absolute units.
@nvmffs
@nvmffs 3 жыл бұрын
So...is there any other point to using "rem" other than the browser setting some users might change? It seems equivalent to "px" in the sense that you (as a programmer) don't normally change the root element font-size so to me it seems more of an absolute value than a relative one.
@RVAraghav
@RVAraghav 4 жыл бұрын
Hi Colt, When is the Javascript topic coming as a part of this series? Waiting for it for so long. Love you!
@grainfrizz
@grainfrizz 4 жыл бұрын
Can't wait for flexbox.
@user-lm5ju8nc2t
@user-lm5ju8nc2t 3 жыл бұрын
Good explanation that covers different use cases! Thx.
@joelivengood4895
@joelivengood4895 Жыл бұрын
I would love to see you compete with Kyle (Web Dev simplify) or Kevin Powell, that would be fun to watch.
@heysourin
@heysourin 2 жыл бұрын
Amazing lecture. 👏 Thank you.
@hanntongfong1226
@hanntongfong1226 3 жыл бұрын
very well explain Colt
@angelicagabrieli7169
@angelicagabrieli7169 2 жыл бұрын
Thank you Colt!
@eminemko1
@eminemko1 4 жыл бұрын
I tried to do the image section gallery, but something is making my images to collapse. like a hidden margin, padding between them. Anyone with the same problem ?
@marble_wraith
@marble_wraith 4 жыл бұрын
Nice one. There is also some interesting things you can do with calc in css, for font scalar schemes.
@rozneg
@rozneg 4 жыл бұрын
Thanks Colt, I always learn some good practices with you :)
@ravitejab8181
@ravitejab8181 4 жыл бұрын
Thanks for doing this Colt.
@Installator1
@Installator1 3 жыл бұрын
That was soooo well explained, kudos to you. 🙏🏼
@rowanmayer
@rowanmayer 3 жыл бұрын
how can i not like your content
@heymiiki12
@heymiiki12 4 жыл бұрын
is anyone else having issues with the width? i followed along with everything but when i adjusted the widths, img (width: 50%;) and #nested1 and #nested2 (width: 50% and 20% / 80%) are not one the same row. i've set margin and padding to 0 and it still doesnt work. however, it does work when the total width is less than 100%. am i missing something?
@Damanj23
@Damanj23 4 жыл бұрын
the nested's are basically considered text when inline-block is used. so it is kind of like adding a space between words. Set font-size: 0 on #3 and you should be good. You can also put the nested div's right next to each other to simulate no spaces between them like colt did, but if your code editor automatically puts them on separate lines, that won't work until you turn off automatic formatting in your code editor.
@MrDoodleDandy
@MrDoodleDandy 2 жыл бұрын
Do you think turn() is a unit that people should know? It's semi-relative and absolute, and falls inbetween degrees and percentages by using turns as a metaphor.
@anjanakhurana4876
@anjanakhurana4876 4 жыл бұрын
I know u are a great teacher but I want u to please post a video daily of this colt'scodecamp
@Ankushbhai7
@Ankushbhai7 3 жыл бұрын
why the width 50% does not work, and the images are collapsed below each other. only fits/works if we reduce the width of one of the image element to 49%. Any reason ? or did you use float:left for the images
@AbderrahimHouady
@AbderrahimHouady Жыл бұрын
great teacher
@jcmorraz9246
@jcmorraz9246 2 жыл бұрын
what are some good practices when it comes to units in CSS? when to use % and px?
@gurrapushivasai9518
@gurrapushivasai9518 4 жыл бұрын
Just awesome
@Tony.Nguyen137
@Tony.Nguyen137 2 жыл бұрын
The line-height: 100% is equal to font-size: 96px right? But you see clearly that the box is bigger than the font.
@proteus1
@proteus1 3 жыл бұрын
so are em's best for border radius? or what about padding for px or for responsive design?
@learnAndfun101
@learnAndfun101 4 жыл бұрын
Hey colt u r doing great as ever. And I know it's a bit unrelated but I strongly ask u if u could make a video on how to make a payment checkout in an app like web dev yeilpcamp using stripe . Since its api has changed and it's rare to find in 2020
@VulcaNx9
@VulcaNx9 3 жыл бұрын
U sir are amazing 🙏🙏🙏
@grainfrizz
@grainfrizz 4 жыл бұрын
How do you know what the root element is?
@JENNIEKIM-rj5eq
@JENNIEKIM-rj5eq 4 жыл бұрын
love you colt
@carlmarks2199
@carlmarks2199 2 жыл бұрын
good info.
@CharmingThePrince1
@CharmingThePrince1 4 жыл бұрын
learning time !
@BrainAboze
@BrainAboze 3 жыл бұрын
Thanks alot
@raghumehra4949
@raghumehra4949 2 жыл бұрын
「もっと多くの人が必要なので、このビデオをもっと
@shahadsaleh2180
@shahadsaleh2180 4 жыл бұрын
love you Colt :)
@dipayanmajumdar5993
@dipayanmajumdar5993 4 жыл бұрын
Sir plz help me i couldn't open your given resources in your web dev. Course. What should I do
@alexmaruta5421
@alexmaruta5421 4 жыл бұрын
Hooray, finally another episode! Thanks for doing this Colt, i wanted for a while now to refresh my front-end dev skills. In the absence of a new episode I started today also with a short intro into javascript. I made amaruta-app1.herokuapp.com to get some hands-on experience. Can't wait for you to start the javascript episodes.
@pastuh
@pastuh 4 жыл бұрын
html.. font-size: 62.5% other fonts..: 1.6rem
@nvmffs
@nvmffs 3 жыл бұрын
62.5% of what?
@pastuh
@pastuh 3 жыл бұрын
Default font size is 16px (62.5/100)*16 is transformed to 10px So you can easy change page layout.
@ys1197
@ys1197 4 жыл бұрын
Hey Colt, how is the "Coding Challenge #1 - Submit Your Code!" submissions doing ?
@ColtSteeleCode
@ColtSteeleCode 4 жыл бұрын
Hi YO SC, I've reviewed about 25 of the submissions so far. I ended up hiring someone to help review the rest so that we can find some common patterns and issues that I could talk about in a video rather than just focusing on a handful of specific submissions (which I will do too). I'm hoping to wrap up all the CSS stuff for Colt's Code Camp this week and then release React stuff, the Coding Challenge #1 follow up video, and the next coding challenge #2 next week.
@ys1197
@ys1197 4 жыл бұрын
@@ColtSteeleCode Nice, good luck with the process 👍🏻 Also, stay safe 😷
@sobeyyy
@sobeyyy 4 жыл бұрын
Thank you :)
@hackereports1128
@hackereports1128 4 жыл бұрын
Thx again
@AshishKumar-sl4ul
@AshishKumar-sl4ul 4 жыл бұрын
keep going it.. colt :)
@philrusselantiporda7096
@philrusselantiporda7096 4 жыл бұрын
3:05 Eminem is shaking.
@anjanakhurana4876
@anjanakhurana4876 4 жыл бұрын
Why aren't you posting videos regularly???
@adharshgraju482
@adharshgraju482 4 жыл бұрын
100k🥳
@ayush.kumar.13907
@ayush.kumar.13907 4 жыл бұрын
man, you forgot metres, kilometres and miles
The Ultimate CSS3 Flexbox Tutorial - Colt's Code Camp
59:15
Colt Steele
Рет қаралды 98 М.
Just Give me my Money!
00:18
GL Show Russian
Рет қаралды 585 М.
Meet the one boy from the Ronaldo edit in India
00:30
Younes Zarou
Рет қаралды 19 МЛН
If Barbie came to life! 💝
00:37
Meow-some! Reacts
Рет қаралды 78 МЛН
Master The All Important CSS Box Model - Colt's Code Camp
42:43
Colt Steele
Рет қаралды 42 М.
Are you using the right CSS units?
6:30
Kevin Powell
Рет қаралды 452 М.
CSS Color Systems HSL, RGB, HEX - Colt's Code Camp
26:57
Colt Steele
Рет қаралды 13 М.
A Full Guide to CSS UNITS!
13:38
developedbyed
Рет қаралды 15 М.
Using & Optimizing Google Fonts - Colt's Code Camp
20:00
Colt Steele
Рет қаралды 11 М.
Flexbox design patterns you can use in your projects
15:33
Kevin Powell
Рет қаралды 440 М.
GPT-4 API Crash Course - Get Coding In 10 Minutes
11:49
Colt Steele
Рет қаралды 40 М.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 945 М.