Learn CSS BOX MODEL - With Real World Examples

[@niinjablade9369]

This is the holy book of CSS Box models, thank you.

[@pepitoalmonte1238]

Jesus bro, everyone is focusing on making short videos without details, but this 17 min long is worth every second. thanks so much.

[@official_bqpro]

The Odin Project Brought me here. it was very clear and punctual on point.. Much love form 'South Africa'

[@XMusicSickness]

Hot damn, this guy literally made me understand a concept i was having trouble with for a month in just 17 minutes...

[@dragon_buster_10k]

Dude, you don't realize how much trouble I've had with resizing buttons, inputs, and other stuff and their true sizes being inconsistent. Thank you so much man!

[@kopilkaiser8991]

Definitely, you are the best source to learn CSS simple and easy. You have made it absolutely simple to understand the logic of all these technologies

[@AndyMorrisArt]

I appreciate how well you explain the details. I learned more in the last 17 minutes than I have in hours of watching other videos. I knew to use those resets but no-one ever explain exactly how they worked. Thanks.

[@ride-time]

That is by far the best explanation of the box model I've ever seen. Nice work!

[@jonaichi_09]

This is the simplest and best guide of the Box Model I've seen yet. Great job brother!

[@Website_TV_1]

This video is a gem! The explanations of the CSS Box Model are super clear, and the real-world examples make it so much easier to understand. It's great to see a tutorial that breaks down complex concepts in such a simple way. Thank you for taking the time to explain margin, padding, border, and content in detail-this will definitely help me with my web development projects.

[@JimmyCrackorn]

Following your content has made my code the cleanest it's ever been since trying my hand at CSS. I started web development with HTML 23 years ago, and it was far different from how things are now. You give the most complete rundowns, and show a bunch of variations. I learned new things from you I couldn't find on my own because I didn't even know how to describe what I was looking for. Thanks to you, I know how these languages relate to each other.

[@alioe14]

also came here from the Odin Project. You told the box model like explain it like i'm 5 years old. Thank you! You've explained it very clearly!

[@internet_user_]

No other video on this topic clicked with me until now. The way he explains it is just perfect and completely understandable. Other people make it sound like this concept came from another planet.

[@badcatdesign]

I use the mnemonic of “TRouBLe” to remember the order of Top Right Bottom Left. Keeps me out of TRBL 😂 Thanks for the video.

[@olufemiajibade]

😂 going clockwise works for me

[@TheRetiredBatman]

HAHAHAHA

[@rajatkatal9311]

For Me clock is a good reference 😂

[@francescoanastasio2021]

This is actually very useful 😂

[@IShootMeme]

Same here bruhhh😂😂😂

[@taufiq6329]

no one does it better than you my king😊😊

[@rileylavonne8863]

Worth watching the whole thing. Speed it up if you want, but don't skip this one! Thanks!!!!!

[@davisjustis3]

Sometimes you just need that perfect video for you to truly understand a concept. This is that video for me.

[@brooklynsicily9145]

I learned more in this 8 minute video and another of your 2 minute videos then I did in 4 weeks of a online course. Good shit bro

[@Budywieser]

Wow you explained this a lot better, I am doing some online boot camp and i get confused by this margin, padding, and elements and you help me understand it.

[@Dharmendrakewat123]

One big css concept is cleared after long time thanks bro

[@sneaksneak6522]

You're such an incredible teacher, I will buy your course, thank you

[@jayjaayjaaay94]

can you give me the review of the course? I am consider to buying it as backend engineer who dislikes learn css 🥲

[@sneaksneak6522]

​@@jayjaayjaaay94 I really enjoyed it. If you like his teaching style here on youtube, you will enjoy the course. It doesn't teach you absolutely everything, but in my case it took me from not understanding CSS and hacking my way through it, to being confident enough to use it with little effort

[@liliies081]

Thank you! I never understood why the universal * properties thing and the box-sizing but this video made it very clear. I am probably gonna forget it but good thing i can come back to this video anytime and learn it again.

[@imuhammadessa]

I was struggling to learn how box model work in css and why we use box-sizing property. I learned it well today, thank you so much for this ❤️

[@hygieia5672]

Seemed like you covered a lot here. One thing I noticed that was missing though was margin collapsing.

[@ramune_flowers]

Just learned about this in my course and was getting so confused by the explanation. Thanks for keeping it short and concise, it's actually not that hard!

[@shoebpatel4027]

You are the best CSS tutor available on the youtube. Thanks!

[@magnumjade45]

such a great teacher. im dumb af but you made me understand box model in 17 min. thank you so much.

[@habeebabdullahi429]

I love this content a lot, I found this video tutorial from The Odin Project. I'd love to see more of your content on CSS. Much love from Nigeria. 🤩🤩

[@TheGuyCalledCarl]

Damn! I thought I understood "box-sizing: border-box", but I actually didn't. Now I understand it. Awesome explanation... Thanks!

[@BK69XXX]

These vidoes are so addictive that i start having doubt about him adding crack in the concepts so that no one can skip a single video.

[@SuperDarmino]

i cant unhear Border-Box in Slay's voice 😭😭

[@alawi096]

Amazing tutorial, i have watched multiple videos and read multiple documents, but your tutorial is the only one that clicked with me. Thank you !

[@shobuj_pata]

I was fascinated by the explanation of the box-sizing: border-box; part! I really didn't know what the purpose of this element is until now when I saw your explanation! I was having a lot of trouble measuring my text and content inside the div container (box) but nothing was taking action according to my desire, because guess what, all this time my whole style sheet was measured according to the box-sizing: border-box; element. At that time, I really didn't know what its purpose was. Now that I got to learn from your video of the actual purpose of this element, my problem is solved, and I am able to measure my div container (box) as I desire to be.

[@kriegerm.5048]

Explains better than any professor 😮

[@Jazz-u5w]

Really well explained. No confusing. Everything on point. Thanks ♥

[@RancorSweetly]

UNIVERSAL STAR SELECTOR 9:50 this is something I actually really needed but had no idea it existed. Thank you! 🙏🏼

[@FernandaUnB]

this video solved all my questions, keep up with the channel men!

[@ciecjames8571]

Thanks you save me time I used to test the padding manually to find out the top,bottom,right,left

[@prasadranjansikdar6127]

You really explained it so simply.. Thanks for the lessons it really means a lot for the ones similar like me who are struggling to understand and implement.

[@johnmellet6610]

Thank you so much genuinely I am busy building my first survey form and i thought i kind of understood padding and margin but this video has completely changed everything for me with css! I was really struggling picked up html strait away and i can style with css, i have only been learning a week but this has broken it all down and elaborated on all the elements thank you so much!!

[@johnmellet6610]

tell you what here is my current html and css code so you can take a look and when I finish it you can see how much you have helped xD HTML Survey Template Project Template Survey Form [Insert text here] Enter your first name: Enter your last name: Enter your email: Enter your number: Select option: (Please select) Option 1 Option 2 Option 3 Option 4 Please select one (required) Yes! No! What would you like to see improved?(Check all that apply) Selection 1 Selection 2 Selection 3 Selection 4 Selection 5 Selection 6 Selection 7 Additional information Any additional info: Add am image: This page was created by John Mellet If you would like to see more projects of mine click Here © 2023 Example Company. All rights reserved. css body { width: 100%; height: 100vh; } .br { background-image: url('stock.img'); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } h1, p { margin: 1em auto; text-align: center; font-family: Helvetica; } form { width: 60vw; max-width: 1200px; min-width: 300px; margin: 0 auto; font-family: sans-serif; font-size: 16px; color: #e7e1db; background: rgb(0,0,0); background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(5,4,75,1) 16%, rgba(41,11,190,1) 52%, rgba(0,0,0,1) 95%); } fieldset { border: none; padding: 2rem 0; border-bottom: 5px solid; } label { display: block; margin: 0.5rem 0; } footer { color: whitesmoke; font-family: Times New Roman, Times; }

[@lunarskyye2680]

Wow. Now this is a cracking tutorial. I understood everything until the 2nd reset you did with pseudos. Maybe because I haven't looked at before and after yet. Brilliant tutorial.

[@HimanshuGupta-jx4nk]

Thank you!!!! I missed this class and I have a javascript class in few hours. And I hadn't slept in 24 hours, I just needed to get this done and this video did it!

[@DnsError80710102]

Yes "we see" how helpful this explanation was no fluff thank you so much!

[@richardsinclair7661]

Thank you so much. You've been the best that I've found at explaining CSS in a way that is both clear and straightforward.

[@flp905]

the way you teach is flawless :)

[@fase8729]

I appreaciate your labor dude

[@Lian-zb5rk]

i have stumbled upon a gold mine of content

[@fiendgamingyt8938]

Finally I got it. Thanks a lot amazing explanation 🔥🔥

[@sureshkumar3217]

I am doing css and I love this video

[@mykelcee]

Never fail to amaze me with your teaching skills.

[@georgeomondi4791]

thanks dude been doing coding for a while and never bothered even to know the meaning of box-sizing 🤣till now

[@00SecretAgent]

@SlayingTheDragon ... Finally, someone I can hear, understand, and follow all in one box..!

[@rickyp9803]

Excellent, excellent, excellent, explanation. Thank you very much, you've made clear a whole bunch of things that I as a beginner studying web development, have been trying to figure out and no other video was able to explain it as you do in this one. For example, what does the box and it's sections in the developers tools mean, as well as how to use and understand the box model in the developer tools. You have given me a clear understanding of that tool. Again, muchísimas gracias.

[@DeanCohenOfficial]

Best video I have seen about this topic.

[@hiarafatYT]

You explained it really well. Thank you so much.

[@A.308-12G]

You helped me out so much! Thank you for making quality content.

[@daniajahanzaib5626]

really nice way of explaining CSS. Easy to remember

[@pejovicevaaa]

This video is really !important

[@isurumaldeniya9536]

just bought the course really great content bro 😊😊👍👍

[@fazalmahmud2050]

Every second is worth watching. Thank you.

[@dramamania6899]

Your teaching skills is just amazing ❤. I learnt many things from you. Thank you bro ❤

[@RancorSweetly]

I didn't even realize I needed to know this thank you!! Great video start yeah! 🔥

[@indraxios]

Here comes the legend, to slay the dragon CSS

[@tevfik7]

You are a great teacher bro. You have a new sub. Keep them coming.

[@mattnj8080]

Your videos are great. I love the tips that go beyond just showing how it works. This is the first time I've heard of border-box which helped me a lot as I was always doing math before and layouts were confusing.

[@rtx__3090]

Clockwise was nice concept

[@MuhammadNafizAlRakib]

web legend is back with a fire video. 😅 You are awesome brother

[@Chiaros]

Adding sections to the video's timeline would be nice, like in older videos.

[@JonathanMudgett]

Here from Odin Project, awesome watch this helped me a lot

[@Earthsings]

This video was excellent! Definitely subscribing!

[@Basem71992]

For those who don’t understand the video from the first time of watching it , do rewatch it and practice what is he doing in your workspace. Man , thank you so much , you really helped me to understand this very well .

[@NiceChange]

Yup...Another great video. nice details. Thanks.

[@yokk0]

love from brazil

[@hoagiesupreme]

I hope you get rich one day teaching stuff. You're great at it.

[@musicbutlyrical6380]

You really are the best one on this platform....Great Work!!

[@sammclaren6965]

You nailed it! Keep up the good work!

[@vivekpoojary265]

good job, very useful content , thank you so much

[@edmilsondossantosgaldino8615]

great explanation

[@menachemlevi]

love you from israel and you have a really calm voice

[@jahnisicalderon5600]

I loved the explanation. I understood it so well thanks

[@lexxthetech_]

you just saved my life. THANK YOU.

[@ShawnX1995]

very detailed and simple examples. I appreciate you for creating that content.♥♥

[@riyadhossain7854]

Love your videos bro! Could you make a video about the Git commands you use and why you use them in what situations?

[@Zoyoni]

Thank you for the video simple with lot of information جزاك الله خيرا

[@Macj707]

Great Video... I am going to share it... that is good that you can use * to remove the margin I didnt know that! CHEF CRISP WUZ HERE!

[@Dungeon_Synth_Enjoyer]

Yep, you are a very good teacher, thanks a lot.

[@kenanklovitch8117]

Wow, I am barely above a novice but I understood that (I think). Thank you.

[@Coolbinarystuff]

Awesome stuff, explained very well like all the rest of your content.

[@marabdiaziiz961]

i really enjoyed the video thanks man

[@SirenSeph]

greatest explanation of CSS Box Models tysm ily

[@rouisaek]

Everything is smooth now after doing the CSS reset !

[@ARULVENDHAN-up8fq]

Extraordinary teaching ❤

[@PraveenKumarJha-xc6ie]

nice video sir.i appreciate your efforts to make us understand the best

[@miikoa]

Your video is liquid gold:) Thank you🙏

[@rakibul98]

explained very well

[@Yesterday_i_ate_rat]

Thank you so much for this amazing video, ❤ everything is clear now

[@DevilRider-x5c]

Very useful Information, I understood everything

[@TheRoyalLion]

YOO, Thank you so much!

[@Sebastian-lc4nh]

Love youuu from my inner soul❤

[@altayeb913]

Really really well explained, can the next topic (if and hopefully there will be) be about {border-image, conic gradient} and some not very beginner-ish topics.