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.

[@XMusicSickness]

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

[@official_bqpro]

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

[@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!

[@ride-time]

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

[@blakeclark8622]

Thanks!

[@slayingthedragon]

Thank very much !!

[@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.

[@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.

[@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.

[@jonaichi_09]

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

[@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.

[@taufiq6329]

no one does it better than you my king😊😊

[@shoebpatel4027]

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

[@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!

[@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

[@DeanCohenOfficial]

Best video I have seen about this topic.

[@stefanfrunza8992]

This video was incredible, man. You truly made my Christmas better!

[@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.

[@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😂😂😂

[@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

[@user-11Il10I1]

wow! hands down the best tutorial on this topic. thanks! subbed!

[@rileylavonne8863]

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

[@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; }

[@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 !

[@Jazz-u5w]

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

[@SuperDarmino]

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

[@FernandaUnB]

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

[@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.

[@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.

[@kieran2347]

Great video and the details given are clear and concise! Amazing

[@RancorSweetly]

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

[@fiendgamingyt8938]

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

[@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 ❤️

[@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.

[@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!

[@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.

[@mykelcee]

Never fail to amaze me with your teaching skills.

[@magnumjade45]

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

[@Dharmendrakewat123]

One big css concept is cleared after long time thanks bro

[@davisjustis3]

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

[@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.

[@poggers69-o3s]

the way you teach is flawless :)

[@sammclaren6965]

You nailed it! Keep up the good work!

[@isurumaldeniya9536]

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

[@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. 🤩🤩

[@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.

[@Earthsings]

This video was excellent! Definitely subscribing!

[@alexanderv805]

Excellent tutorial! Clear and straightforward. Thanks!

[@RancorSweetly]

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

[@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.

[@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!

[@Lucas-q7r8y]

Thanks for this video, appreciate your efford. Well explained!

[@hiarafatYT]

You explained it really well. Thank you so much.

[@krishnaalisetty4505]

Glad that i found this video. Thank you so much for such a good content.

[@DnsError80710102]

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

[@MuhammadNafizAlRakib]

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

[@fazalmahmud2050]

Every second is worth watching. Thank you.

[@ShawnX1995]

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

[@00SecretAgent]

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

[@yokk0]

love from brazil

[@tevfik7]

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

[@Coolbinarystuff]

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

[@dramamania6899]

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

[@musicbutlyrical6380]

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

[@rupertodiaz8673]

Best explanation ever ! thanks Smaug

[@David-cz9ej]

Thank you very much for the Video :D One question: At 17:02 why not move the margin: 0; and the padding: 0; to the upper *, *::before, *:after selector? Why have you left a separate * selector?

[@slayingthedragon]

It is perfectly fine to do so, however there is no margin nor padding to be reset within the contexts of a before or after pseudo-element, whereas there is a box-sizing to be reset. Having both resets separated is somewhat more semantic, because like I said, within the contexts of a before or after pseudo-element, there is no margin and padding.

[@David-cz9ej]

@@slayingthedragon Thank you for replying to all the questions! It means the world to us ♥️

[@miikoa]

Your video is liquid gold:) Thank you🙏

[@ciecjames8571]

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

[@Lian-zb5rk]

i have stumbled upon a gold mine of content

[@fase8729]

I appreaciate your labor dude

[@SirenSeph]

greatest explanation of CSS Box Models tysm ily

[@kriegerm.5048]

Explains better than any professor 😮

[@nitkarshchourasia2406]

🎯 Key Takeaways for quick navigation: 00:00 📦 *CSS Box Model Overview* - Understanding the CSS Box Model. - Components of the Box Model: content, padding, border, and margin. - Importance of each component in defining the layout and spacing of elements. 02:35 🛠️ *Implementing Box Model in CSS* - Practical demonstration of applying Box Model properties in CSS. - Using classes to style elements and manipulate their content, padding, border, and margin. - Live coding example with explanations of each step. 08:25 🔄 *CSS Box Sizing: Content Box vs. Border Box* - Explaining the difference between content box and border box sizing. - Understanding how box sizing affects the calculation of element dimensions. - Advantages of using border box sizing for consistent and predictable layout behavior. 12:44 📐 *Practical Application and Best Practices* - Applying border box sizing to ensure consistent element dimensions. - Best practices for setting box sizing in CSS, including using universal selectors. - Importance of box sizing reset for maintaining layout consistency across different elements. Made with HARPA AI

[@jahnisicalderon5600]

I loved the explanation. I understood it so well thanks

[@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.

[@daniajahanzaib5626]

really nice way of explaining CSS. Easy to remember

[@NiceChange]

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

[@ARULVENDHAN-up8fq]

Extraordinary teaching ❤

[@indraxios]

Here comes the legend, to slay the dragon CSS

[@DevALWaleed]

Got a like and new subscriber. Thank you so much!

[@Betterdays1996]

Thank you so much for this one 💖

[@TheGuyCalledCarl]

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

[@sureshkumar3217]

I am doing css and I love this video

[@Yesterday_i_ate_rat]

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

[@TheRoyalLion]

YOO, Thank you so much!

[@SRG-Learn-Code]

In your webpage, the javascript course overflows the element within the 1024px media query. Seems like the grid is forced too much . @media (min-width: 1024px) .Courses_item2__LS7ps { grid-area: 1/5/3/-1; }

[@Blackdiamond929_]

your videos are so helpful :) thank you!

[@riyadhossain7854]

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

[@Chiaros]

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

[@lexxthetech_]

you just saved my life. THANK YOU.

[@marabdiaziiz961]

i really enjoyed the video thanks man

[@georgeomondi4791]

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

[@PascalHorn]

I can see a star selector to reset padding and margin, but I have my doubts about resetting box-sizing to all elements. The problem occurs, when you insert widgets or other code from a third party, that uses padding without specifying a border-box. It can break their intended box model for their widgets. An at least not uncommon occurrence I have to fix from time to time. I’d use it with caution.

[@slayingthedragon]

This is valid honestly, well said.

[@MurkyTy]

For situations like this, you can simply see if it breaks, and then override the border-box with your content-box instead. These resets save you time 95% of the time, and I think is a reasonable reset to keep for all projects.

[@hygieia5672]

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

[@Zoyoni]

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

[@rakeshislammolla7201]

You are creating great content ❤

[@Dungeon_Synth_Enjoyer]

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

[@MrVipulLal]

Clear explanation. Thanks