whenever I come to your videos. You send me to learn something else, which will send me to another video. But let's be honest. WEB DEV SIMPLIFIED is just THE BEST. period.
I have a jumbotron that would not work until I made the height = height: calc(1 * calc(.5 * 100vw)); I have never used calc before, but now I think it really is magic! Glad this tutorial was available to help me. Thanks!
calc solved for my problem with keeping footers stuck to the bottom on different viewports. Just add this to Your main content class: .content { min-height: calc(100vh - [footer height]px); }
Yup calc is awesome but what if the footer's height is not fixed how do you subtract it? Here's a better solution for example you want a 3 column layout, a header, content and the footer that sticks to the bottom even if there's little to no content at all. With CSS grid you can set .app{ display: grid; grid-template-rows: 100px 1fr auto; height inherit} provide the body's height is 100% or 100vh
I literally watched the Kevin Powell one he did and told him I was dissapointed he didnt talk about the space on 2:51 that you did lmao I love you guys you two are my favorite to watch online for html css and js :)
Awesome explanation in a very short video . Liked it. Okay, I have a question. If I declare a variable in css with calc() , how can I call the variable in javascript?
Hi Guru, Please make some videos on event loops . How different tasks are executed in loop. How to create new loop etc. your simple ways are really great. Thanks a lot.
You prolly dont care but if you are bored like me during the covid times then you can stream pretty much all of the new movies on instaflixxer. Have been streaming with my gf these days xD
I love your videos buddy..... As a web developer i too more interested and have passion to do videos like you.. May be in future i will make videos which are very inspired to me.
Hey, first of all, amazing videos. You actually make me want to keep on learning this. Anyway, what’s the difference between making a variable in :root {} or anywhere else? Is root like the “base”, where you set the variable’s initial value and then can alter it later on?
Old question, but... CSS custom properties are scoped. Setting/resetting a custom property somewhere makes it available for all descendants. Defined in :root, it will be available everywhere.
Can you include current css properties of elements? For example: left: calc(this.left - 100) px; EDIT: I just read your comment that calc cannot know the current size of an element.
Kyle, is it possible to append units to unitless numbers through calc()? I've read it's possible by multiplying the unitless number by 1 and putting the desired unit next to the 1. It's possible with all units except "%", because calc() would determine the percentage instead of just adding the unit to the number. I know SASS does allow this, but CSS doesn't, which is unfortunate 😥
I'm just learning about css variables and calc and seeing them together is great. I'm having an issue I hope you can help with - I have a div that the user can resize using javascript, and I want the font inside it to grow and shrink to fit into the div. So say div is 200x50 and font-size is 16px can I use css to calculate the new font size using calc() as the user changes the dive to say 400x100. Thanks, great work though!
This is going to be really tough to do since all fonts are different sizes and fonts themselves have different sizes of each character. For example the text lllll will take up less room than OOOOO.
@@WebDevSimplified I thought it might be, I was thinking for the starting size you have a font-size of 14px and then calculate it based on width/height of the div from the stating values. but not sure you can use the current width and height in the calc function...
Interesting, you have a tut website, which is good as you are super clear and concise in your presentations. The pricing seems a little too ambitious tho, given there are some very good courses and tutors who undercut you. Hmmm.
I totally understand. There are a lot of good cheap courses out there, but I feel that my course is concise and well explained enough to justify the higher price, especially considering the amount of free content I have to back it up.
I did a quick youtube search and I found that most type of these vids have the same thumbnail which is understandable but we can all agree that they were not eye appealing (catchy)! I can help you design thumbnails if you want to.
just love these kind of short videos make more such like these.
I have plenty more like this planned.
Wow, I really didn't know about css variables. This is extremely useful!
Css is so underestimated but on the latest years grew so much, is insane what you can do with it
It is incredible. CSS was one of the things that made me really love web development.
Your tutorials always short give the answer I need to and in simplified way, keep it up
whenever I come to your videos. You send me to learn something else, which will send me to another video. But let's be honest. WEB DEV SIMPLIFIED is just THE BEST. period.
I have a jumbotron that would not work until I made the height = height: calc(1 * calc(.5 * 100vw)); I have never used calc before, but now I think it really is magic! Glad this tutorial was available to help me. Thanks!
Your video helps me update my outdated css-html knowledgebase.
calc solved for my problem with keeping footers stuck to the bottom on different viewports. Just add this to Your main content class: .content { min-height: calc(100vh - [footer height]px); }
Yup calc is awesome but what if the footer's height is not fixed how do you subtract it? Here's a better solution for example you want a 3 column layout, a header, content and the footer that sticks to the bottom even if there's little to no content at all. With CSS grid you can set .app{ display: grid; grid-template-rows: 100px 1fr auto; height inherit} provide the body's height is 100% or 100vh
@@paolo-1283 Keeping it absolute and bottom: 0px woudn't be a better approach? Grid template always comes out as troublesome and too verbose for me.
@@ralpholiver2889 the key too solving problems with grid is the align-content center and align-content start
@@paolo-1283 but flex does that too, with less verbosity.
@@ralpholiver2889 yeah i agree, flex is one dimensional, grid is two
I literally watched the Kevin Powell one he did and told him I was dissapointed he didnt talk about the space on 2:51 that you did lmao I love you guys you two are my favorite to watch online for html css and js :)
CSS was always so boring for me, I never tried to learn it in depth. Your videos making me in love with css, thank you
best teacher
Thanks Mr. Cook for "cooking" these videos.
You are very welcome!
Great explanation! I must remember to use calc. The only thing missing was some mention of browser support (or lack thereof).
Good point. Calc is pretty much universally support except in Opera mini and some edge cases in IE.
@@WebDevSimplified CSS variables seem to have slightly less support, i.e. none in IE.
@@bertilow If anyone is still using IE 11 or earlier, then they don't deserve to be on your website :) Question is what about Edge...
You made my day....Thanks love from India.
He deserves many more subscribers...
Very Easy to Understand, Thanks for great video.
Awesome explanation in a very short video . Liked it.
Okay, I have a question. If I declare a variable in css with calc() , how can I call the variable in javascript?
Hi Guru, Please make some videos on event loops . How different tasks are executed in loop. How to create new loop etc. your simple ways are really great. Thanks a lot.
That's a good suggestion. I will add it to my list.
Too right, mate. Very well explained. GJ
Your videos are soooooo easy to understand, thank you a loooooot
Awesome work! ....I always thought I could only use variables in sass :( Thank you!
Me too 😂
Variables are probably my favorite newer feature to CSS.
Man you videos are excellent! And so are you :)
calc function :
1). 2 different unit
2.) CSS variable (--x, root)
bruh I didn't even know that CSS Vars exists :D
They are pretty amazing!
Me too neither!
@@WebDevSimplifiedbut Sass is much more powerful when it comes to using variables, is it not ?
You prolly dont care but if you are bored like me during the covid times then you can stream pretty much all of the new movies on instaflixxer. Have been streaming with my gf these days xD
@Jaxxon Jason Definitely, I've been watching on instaflixxer for months myself =)
Amazing bro, thanks a lot. I learn a lot from you
Brother this is really awesome and easy to understand nice work 👍😊
Thanks, Kyle.
Great video 👍. Thanks 🙏
helped me alot!!! thanks you so much!
Great as usually , thanks !
tnx for the info 6mins vid and really got it man.
Thank you Kyle
Do you have a video of how to calculate the margin paddings values?
Nice simplified technic brother 👍
That was neat.
Thanks for sharing!
I love your videos buddy..... As a web developer i too more interested and have passion to do videos like you.. May be in future i will make videos which are very inspired to me.
Thanks bro, your videos are amzing!
Hey, first of all, amazing videos. You actually make me want to keep on learning this.
Anyway, what’s the difference between making a variable in :root {} or anywhere else? Is root like the “base”, where you set the variable’s initial value and then can alter it later on?
Old question, but... CSS custom properties are scoped. Setting/resetting a custom property somewhere makes it available for all descendants. Defined in :root, it will be available everywhere.
Please show us how to give a card drop-down a position in a view port/scroll-view
Great Work.
Das Video hat mir sehr geholfen. Vielen Dank
Hello,thank You! how can I have something like this: calc( 200px * 1600px / 1500px )?
i swear every question I have he got a video on dat joint
I had no idea before this that calc function also exist in css
Tysm!
Can you include current css properties of elements? For example: left: calc(this.left - 100) px; EDIT: I just read your comment that calc cannot know the current size of an element.
Very useful tutorial
thanks for this video
Hello Kyle can we get your codes from Github
Love these videos!
So good tutorial
Love this video, really easy to understand and straight to the point! :) thanks!
that bluish greenish color is cyan
Kyle, is it possible to append units to unitless numbers through calc()? I've read it's possible by multiplying the unitless number by 1 and putting the desired unit next to the 1. It's possible with all units except "%", because calc() would determine the percentage instead of just adding the unit to the number. I know SASS does allow this, but CSS doesn't, which is unfortunate 😥
Good shit dude!
ty!
amazing thank u so much sir
You're welcome!
I'm just learning about css variables and calc and seeing them together is great. I'm having an issue I hope you can help with - I have a div that the user can resize using javascript, and I want the font inside it to grow and shrink to fit into the div. So say div is 200x50 and font-size is 16px can I use css to calculate the new font size using calc() as the user changes the dive to say 400x100. Thanks, great work though!
This is going to be really tough to do since all fonts are different sizes and fonts themselves have different sizes of each character. For example the text lllll will take up less room than OOOOO.
@@WebDevSimplified I thought it might be, I was thinking for the starting size you have a font-size of 14px and then calculate it based on width/height of the div from the stating values. but not sure you can use the current width and height in the calc function...
@@harag9 You cannot use the current size of something in the calc function. CSS does not know of the current size of objects.
loved it.
Thanks
BTW you explain really good!
you're awesome!
You are great !!
Interesting, you have a tut website, which is good as you are super clear and concise in your presentations. The pricing seems a little too ambitious tho, given there are some very good courses and tutors who undercut you. Hmmm.
I totally understand. There are a lot of good cheap courses out there, but I feel that my course is concise and well explained enough to justify the higher price, especially considering the amount of free content I have to back it up.
i really hate calc coz its kinda hard, can i stick with the other units?
Not tried, but what if -hew in :root is set less than 180?? Don't know if negative values in hue also work
THANK YOU VERY MATCH!
make more front end projects? and stuff
Awesome !
wait, why in 5:17 container have red color?
isn't in 4:41 he delete container css?
Tq
thnx bro
Very good
WOW!! This is great. I see myself using this. (-:
I'm glad you liked it!
This is so cool 😎
Done
More correctly, "That's the first 1/10th of what there is to know about the CSS calc() function."
Please, author, add subtitles if you can
css variables!!!!!! I feel like finding alien life!😂
My guy doesn't blink.
calc(calc(calc(100% * 2) / 10) + 10px) ? not working! why?
First Like Bro👍
good
nice
wt. you the best. period.
Even 2x playback is too slow.
Oh nooo, where my subtitles?
Wow
👍👏
...almost 7 mins :)
Six just sounds so much better though :P
I learnt it in 3 min. Guess how
Double speed
Says 6 minutes
Video lasts 6:41
Clickbait 101 ;P
I hope my gf doesn't see your video.... You are too handsome
If you change your thumbnail you'll get more views.
What do you recommend I change it to. I am pretty terrible at thumbnail design, and people at least know that this type of thumbnail is my style.
I did a quick youtube search and I found that most type of these vids have the same thumbnail which is understandable but we can all agree that they were not eye appealing (catchy)! I can help you design thumbnails if you want to.
@@ko3li668 If you want to help send me an email at the email on the about page of my channel.
2nd comment bro
thanks