This is by far the best CSS property. I remember when I first discovered this I felt like I unlocked CSS God powers, and now I cannot imagine writing any CSS without it.
@IhsanMujdeci
5 жыл бұрын
This plus flexbox
@ne9835
5 жыл бұрын
@@IhsanMujdeci What about CSS Grid?
@IhsanMujdeci
5 жыл бұрын
@@ne9835 I sadly under utilize that property. Do you like it?
@ne9835
5 жыл бұрын
@@IhsanMujdeci Property? CSS Grid isn't a property or are you talking about box sizing?
@komkwam
5 жыл бұрын
@@ne9835 CSS grid is quite new compare to flexbox and therefor it has less browser support.
@patatasfritasviewer
4 жыл бұрын
How to resolve 2 years of CSS frustration. That should be the first property learnt in any CSS lesson
@programming8304
Жыл бұрын
I don't understand your question please 🤔
@ihaverhinitis
5 жыл бұрын
better explained than forums and courses! Thank you. You saved my time!
@beatzoid
3 жыл бұрын
+
@Tussu17
2 жыл бұрын
+
@desidev69
2 жыл бұрын
+
@sjn_
5 жыл бұрын
Coincidentally, I was thinking about searching around for its purpose yesterday while trying to sleep and this video appeared this morning lol. Thanks for posting this, Kevin. You are very helpful.
@chiefplankton8307
2 жыл бұрын
Hey Kev! I am new to web dev and have been taking up the Odin Project for some time now. It' has been challenging to learn all these new concepts from various resources. I read all these things theoretically, understand it a little bit and then I finally come to your videos which makes it SO MUCH BETTER. I get to really understand the concept in suchha subtle way! Defo joining your patreon once I get a job on this path! :) Kudos to you, I hope you're doing good.
@capp1306
2 жыл бұрын
How has been you progress so far? I Just started CSS on the Odin Project.
@chiefplankton8307
2 жыл бұрын
@@capp1306 I finished the foundations and did 25% on the intermediate and then paused it because I wanted to learn front-end first so I switched to react. Now I got an internship at a local company for the backend on Laravel. Odin Project foundations really helped me develop the HTML, CSS, JS skills required to do the basic frontend part of web-portals. It was comparatively easy for me to learn Bootstrap/Tailwind next on advancing on commercial CSS. Well, focus on the course and build things for yourself every week. If you run into any problem ask and search alot. I know you didn't ask for advice but I did it anyway haha. Anyways, if you need help and stuff regarding the course or anything around it you can get me at ergasiamellow@gmail.com. Goodluck :)
@zaid4708
2 жыл бұрын
@@capp1306 im 6 months in, currently doing todo list project, if you have time, do study webpack 5 if you want to early on if you're choosing fullstack JavaScript, since that's one of the most frustrating topic you'll come across in fullstack JavaScript, but anyways odin project is pretty good, i feel confident with my skills
@capp1306
2 жыл бұрын
Is that a practice project? My main goal is security. My plan is to learn just front-end to make money, if I like full-stack I'll try But not now
@nataliadi9
2 жыл бұрын
I'm not sure I would have kept learning CSS if not your explanations that make things so much easier. Thank you for the videos, Kevin!
@alexdoe6524
11 ай бұрын
I had trouble understanding this while reading a lesson about it so I came here and now I'm good. Thanks again for your videos, they are the best!
@smrutiranjan4444
8 ай бұрын
finally found one video where i totally clear my doubt . THANK YOU SIR
@fahanyc3638
4 жыл бұрын
Thanks, Kevin. You have a very pleasant voice and you explain things well! Two thumbs up!
@alexgochenour8740
4 ай бұрын
So very useful, and so concisely presented. Thank you Kevin
@jackmeister9482
Жыл бұрын
Man, there are tons of channels out there for Web development topics, you are by far THE BEST! Keep going Kevin.
@sum_itt20
2 жыл бұрын
So far, the best explanation of this concept... I got the required visualization. Thank u for showing your mercy on us.
@salakosunday
Жыл бұрын
This is most concise video tutorial from kelvin that he did not rant. No wonder Bing search of all, suggest this to me. great one. keep it up.
@damianduran5427
2 жыл бұрын
THANK YOU so much, I saw that property in a lot of vídeos but I never tried it bc i thought I'm never gonna use it but now I see how useful it is, thanks so much!
@BimaAgungSaputra-gt4px
Жыл бұрын
This is literally the cure of all my problem with css right now holy sh*t
@start-media
2 жыл бұрын
This is by far the best (visual) explanation for box-sizing.
@m.smanoj4688
Жыл бұрын
east or west kevin powell is the best for css box sizing actually confuses a lot visited many websites but this video helped me alot.
@secure_the_bags620
4 жыл бұрын
Dude thank you so much. This 5 min video made more sense to me than hours and hours of reading about border-box.I just couldn't understand it for the longest time until now!
@lazzawhite4746
3 жыл бұрын
I have watched about 5 videos trying to understand this concept and I got it right away with your video. Thanks so much.
@denhamk
9 ай бұрын
Thank you! Didn’t realize I had to set the universal selector to box sizing as well.. I only put it in my body and html and was wondering why my divs were still expanding!! Phew. Thanks, Kevin
@javieru5871
Жыл бұрын
Your voice and intonation is so ASMR.
@GLHD-tl2hl
Жыл бұрын
been watching your videos for no reason. Cause love the way you explaining. Cheers!
@martinmohammed4087
2 жыл бұрын
Basically with the default value of box-sizing: (content-box) the box will be expanded across the viewport if padding or border is included. Because those components/ parts will take part in the total width/height of the box. With box-sizing: border-box the total width/height of the box equals the specified width and height. Border and padding are not included in the total width but they reduce the inner width/height of the content. As a result the padding/border look like now they are reversed into the element (text looks shifted).
@mariodlp
2 жыл бұрын
Thanks. Honestly I was feeling like an idiot for not understanding this concept but making a very visible demonstration of this solved it for me.
@esagecantu
7 ай бұрын
Simple and straightforward explanation. Thank you.
@noodlespwn42
3 жыл бұрын
I watched this video with 'Call Me' by 90sFlav in the background and it was such a treat. Thanks for the content!!
@rekan_98
3 жыл бұрын
I was having no idea about the box now I got to understand thanks a lot.
@MP-mh1tu
3 жыл бұрын
Best explanation I've seen so far
@awhitechilliify
3 жыл бұрын
Omg thank you, after watching few videos I came across this one and the penny has finally dropped, thank you so much, your visual example was the best one I saw!
@TheCocoaDaddy
3 жыл бұрын
Awesome! I had never seen the 'box-sizing' property until I started seeing your tutorials. So, this explanation helps a lot! Thanks for posting!
@josegarboza3825
3 жыл бұрын
Thank you so much for this video...this is one of those CSS things I never really got around to learning and you were able to explain it masterfully in 5 min. Kudos to you sir.
@sumitsharma6738
2 жыл бұрын
Box sizing border box NOW CLEAR.... Thanks!!!!
@erykkryszewski5803
5 жыл бұрын
Man I beg you... Please create a tutorial about scroll efects on websites. There is nowhere good explanation of all this. Im talking about showing some objects only when we scroll to this section, any other animations that more and more websites use nowadays. It gives our static website a bit of power and interaction that makes the user feel that this is so professional :) or some kind of scrolling only between sections - when we scroll only once on mouse it still gives us another section etc (we dont have to do it manually). Please keep upvoting this post to allow Kevin see it, maybe he will help us! :) Greatings!
@KevinPowell
5 жыл бұрын
I see 99% of comments (some will slip through for sure), no need to upvote :) - I've got something sort of planned for this already, but it might be awhile.
@erykkryszewski5803
5 жыл бұрын
@@KevinPowell thank you. if i were you i would put a bit more functionality into your movies, to make it useful on real websites. waiting for another projects, greatings!
@programmingplug9536
3 жыл бұрын
You're the true king of CSS, thanks a lot!
@rebelmachine88
5 жыл бұрын
I feel like a great weight has been lifted off my shoulders, thank you Kevin!
@DragonRoyZ
2 жыл бұрын
Thank you. This is simple and easy to understand.
@asmahamdym
4 ай бұрын
I use to hate CSS until I found your channel!
@justinlinn1810
5 жыл бұрын
Have been web dev for two years and feel betrayed no one has informed me of this trade secret
@KevinPowell
5 жыл бұрын
Better late than never!
@TheCodeDealer
4 жыл бұрын
Thanks for explaining this in a much more understandable way
@Platinum989
3 жыл бұрын
This video was such a help. When I am able to I am going to buy some shirts!
@siriusgd4753
5 жыл бұрын
Truely helpful Kevin! I had a situation where I was changing attributes on a box and wasn't understanding why they weren't doing what I expected. Now I know. You are definitely worth the Patreon account. (Edited: For spelling)
@Dawid-lb8fe
3 жыл бұрын
It has actually changed my life today. Thank you for the explanation :)
@MuhammadSaid01
3 жыл бұрын
Oh my god, I was looking for this explanation I was facing a design problem for many days now its sovled ! thank you so much
@adarshpandey2978
4 жыл бұрын
You are really good on picking up topics to discuss. Really helpful discussion. Thanks a lot❤️❤️❤️
@TheImaginativeSachin
2 жыл бұрын
This was very enlighting . Thanks Kevin
@hannah51238
2 жыл бұрын
This has actually just solved a problem I was having with a layout. Thank you sir!
@SumanRoy.official
5 жыл бұрын
Thanks for this one, I always wondered what it was, often confused.
@ralexand56
5 жыл бұрын
Thank you, thank you, thank you! This has been driving me nuts when it came to designing full view layouts because those nasty scrollbars would pop up out of nowhere.
@samhatake
3 жыл бұрын
That one bit about inherit . Super genius
@HostDotPromo
5 жыл бұрын
Border box is a game changer for sure 👍
@x3zlo
2 жыл бұрын
Great explanation in a short video! Thanks so much Kevin :D
@rick5522
Жыл бұрын
Kevin, you are awesome!
@GigMyRig
2 жыл бұрын
Outstanding, clear and concise explanation ✨ Thank you, Kevin.
@louisgamor
4 жыл бұрын
This is awesome Kev.👍 I've always been wondering why you say it makes our lives much easier
@busyrand
5 жыл бұрын
Fantastic explanation of one of my favorite lines of code. I like the advanced practice of adding it to pseudo-elements. Never thought or heard of that practice before. The part about incorporating other code where the rule was different was nice too. I recently ran into this. Very neat presentation.
@DianaTan
3 жыл бұрын
Thanks for the information. Learning CSS.
@crstfrdrnt
4 жыл бұрын
you cleared the doubts codecademy planted in me in 2 minutes! you're awesome!
@MrMinutmen1
Жыл бұрын
you teach very well, thank you so much.
@owlthetyto
Жыл бұрын
Absolutely on point. Awesome.
@chlouis-girardot
5 жыл бұрын
Always clear and helpful. Thanks a lot Kevin!
@pharaoh9483
2 ай бұрын
I was trying to practice what I learned from this video and I was confused as to why this property didn't affect my code. Turns out if you include/use bootstrap, they automatically have this enabled.
@siriusgd4753
5 жыл бұрын
btw... I love your video cover photos... This one with you scratching your temple looking confused... LOL!!!
@KevinPowell
5 жыл бұрын
Glad you liked it :D
@mariopizzaro
2 жыл бұрын
Thanks Kevin, happy to follow your video's, learn a lot !
@briankk8
3 жыл бұрын
Thanks Kevin Powell for the awesome tutorial
@shubhamkohli7719
3 жыл бұрын
Really helpful tutorial
@sagormajomder
2 жыл бұрын
Thank you so much. great explanation
@nelsonR
5 жыл бұрын
Precise explanation, thank you!
@zenithkokkodan7037
3 жыл бұрын
U make amazing video. very much simplified
@sourabhkulkarni1731
3 жыл бұрын
Thank you Kevin.
@beec3694
5 жыл бұрын
Thank you for another great tip Kevin!
@Ken-ke9bi
2 жыл бұрын
Thanks, this was very helpful!
@alulapetros6048
3 жыл бұрын
Best Explanation Ever !
@yutthanayahan7784
5 жыл бұрын
love to see your new video, thank for sharing.
@revvnijaa4177
3 жыл бұрын
Thanks much u r my css guru love from india
@suleman234
2 жыл бұрын
this was very usefull ! thank you so much kevin
@atarixle
5 жыл бұрын
helped me to remove a "calc" statement, thanks!
@2kBofFun
Ай бұрын
This just fixes the stupid default CSS size calculating behaviour to the sane way Microsoft used in IE 6. Now we need a script to repair our "old css" to stay the exact same with this property added.
@yaqubuabdulmalik2869
4 жыл бұрын
Very good explanation
@oleksiipetrenko3824
3 жыл бұрын
Great explanation, thank you, Kevin
@MauriceLacerda0
4 жыл бұрын
The box-sizing: inherit is a nice trick!
@sammas533
4 жыл бұрын
Really, I don't understand. I mean, in the universal selector (*) when you write "box-sizing: border-box", any "box-sizing: content-box" you write after will overwrite the "box-sizing: border-box" of the universal selector (*). That's why I don't understand why to use the inherit trick. Maybe I'm wrong. Can you explain me pls?
@jimhalpert9803
3 жыл бұрын
@@sammas533 because what if you have 10 divs under a container? Instead of giving all those 10 divs content-box , one could simply give their parent container the box-sizing: content-box and all those divs will inherit it. Easily reduce redundancy.
@paulogarcia4371
4 жыл бұрын
Thank you very mush, brother. I don't speak English very well but I can understand it .
@charlesmullen8024
5 жыл бұрын
border box saved my life
@Krenil.
3 жыл бұрын
really helpful thanks for this amazing tutorial. 🔥
@mertefe4345
Жыл бұрын
thank you Kevin.
@mohamedashif7487
2 жыл бұрын
oh great, Made me understand within minutes.😀
@fabrizioalpuche5984
2 жыл бұрын
Gracias, nice and clear explanation
@totitotojatiwijayanto521
3 жыл бұрын
love it. it's helpful my project
@mohamedsafwtattar9838
3 жыл бұрын
Finally! Thank you!
@__jake.m
2 жыл бұрын
Thank you so much! You explained it so well.
@baabla
5 жыл бұрын
Was looking for this. Thank you! Also, make a video regarding footer. How to place it at the bottom of the page when there is not enough content covering the whole viewport height between the navbar and footer.
@crousdioll
5 жыл бұрын
you can use position
@baabla
5 жыл бұрын
@@crousdioll I've tried position fixed which obviously scrolls with the page. I have tried position absolute, but then it doesn't stick below the content. Giving a min-height of 100% to body also didn't seem to help.
@crousdioll
5 жыл бұрын
@@baabla okay see this: stackoverflow.com/questions/39794712/how-to-make-footer-go-to-bottom-when-there-isnt-enough-content-on-page
@baabla
5 жыл бұрын
@@crousdioll alright will check it out. Thanks!
@HowTo-nr7uk
4 жыл бұрын
Thank you kevin for short and simple explanation. subscribed and liked :-)
@elyasoliman3749
5 ай бұрын
thanks for explaining that was easy and simple describe
@Kirsehirli40able
5 жыл бұрын
Wow, thank you very much for this explanation!
@_us.m.an_
3 жыл бұрын
You made it look easy.
@nawendusingh2858
5 жыл бұрын
best explanation on youtube.
@adamfirdaustan6415
2 жыл бұрын
Thank you for this!!
@Ksenseisei
3 жыл бұрын
min 3:05 I didnt quite understand what you mean with the pseudo elements, could you explain please? I actually dont understand the whole action of the like *, *:: .... I know what they mean on their own but not quite what they do together like * ::before {box-sizing...}
Пікірлер: 259