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.
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!
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.
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.
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.
@@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
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.
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!!
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.
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.
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!
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!
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.
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.
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.
🎯 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
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.
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?
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.
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.
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.
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; }
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 .
Jesus bro, everyone is focusing on making short videos without details, but this 17 min long is worth every second.
thanks so much.
This is the holy book of CSS Box models, thank you.
The Odin Project Brought me here. it was very clear and punctual on point.. Much love form 'South Africa'
Hot damn, this guy literally made me understand a concept i was having trouble with for a month in just 17 minutes...
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.
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!
Thanks!
Thank very much !!
That is by far the best explanation of the box model I've ever seen. Nice work!
This is the simplest and best guide of the Box Model I've seen yet.
Great job brother!
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.
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
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.
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.
You are the best CSS tutor available on the youtube. Thanks!
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!
You're such an incredible teacher, I will buy your course, thank you
can you give me the review of the course? I am consider to buying it as backend engineer who dislikes learn css 🥲
@@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
Worth watching the whole thing. Speed it up if you want, but don't skip this one! Thanks!!!!!
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.
Best video I have seen about this topic.
This video was incredible, man. You truly made my Christmas better!
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
I use the mnemonic of “TRouBLe” to remember the order of Top Right Bottom Left. Keeps me out of TRBL 😂 Thanks for the video.
😂 going clockwise works for me
HAHAHAHA
For Me clock is a good reference 😂
This is actually very useful 😂
Same here bruhhh😂😂😂
Amazing tutorial, i have watched multiple videos and read multiple documents, but your tutorial is the only one that clicked with me. Thank you !
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!!
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;
}
Sometimes you just need that perfect video for you to truly understand a concept. This is that video for me.
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.
UNIVERSAL STAR SELECTOR 9:50 this is something I actually really needed but had no idea it existed. Thank you! 🙏🏼
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 ❤️
such a great teacher. im dumb af but you made me understand box model in 17 min. thank you so much.
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.
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.
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.
@SlayingTheDragon
...
Finally, someone I can hear, understand, and follow all in one box..!
this video solved all my questions, keep up with the channel men!
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!
Really well explained. No confusing. Everything on point. Thanks ♥
no one does it better than you my king😊😊
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!
Yes "we see" how helpful this explanation was no fluff thank you so much!
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.
Never fail to amaze me with your teaching skills.
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.
i cant unhear Border-Box in Slay's voice 😭😭
the way you teach is flawless :)
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.
I didn't even realize I needed to know this thank you!! Great video start yeah! 🔥
One big css concept is cleared after long time thanks bro
You explained it really well. Thank you so much.
🎯 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
love from brazil
You are a great teacher bro. You have a new sub. Keep them coming.
I appreaciate your labor dude
Every second is worth watching. Thank you.
i have stumbled upon a gold mine of content
web legend is back with a fire video. 😅 You are awesome brother
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.
I am doing css and I love this video
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. 🤩🤩
You nailed it! Keep up the good work!
Your teaching skills is just amazing ❤. I learnt many things from you. Thank you bro ❤
Here comes the legend, to slay the dragon CSS
greatest explanation of CSS Box Models tysm ily
Great video and the details given are clear and concise! Amazing
Finally I got it.
Thanks a lot amazing explanation 🔥🔥
You really are the best one on this platform....Great Work!!
Thanks you save me time I used to test the padding manually to find out the top,bottom,right,left
Damn! I thought I understood "box-sizing: border-box", but I actually didn't.
Now I understand it.
Awesome explanation... Thanks!
Excellent tutorial! Clear and straightforward. Thanks!
very detailed and simple examples. I appreciate you for creating that content.♥♥
Thank you for the video simple with lot of information جزاك الله خيرا
Thanks for this video, appreciate your efford.
Well explained!
Glad that i found this video. Thank you so much for such a good content.
really nice way of explaining CSS. Easy to remember
This video was excellent! Definitely subscribing!
Thank you so much for this amazing video, ❤ everything is clear now
you just saved my life. THANK YOU.
Best explanation ever ! thanks Smaug
just bought the course really great content bro 😊😊👍👍
Awesome stuff, explained very well like all the rest of your content.
Adding sections to the video's timeline would be nice, like in older videos.
Love your videos bro! Could you make a video about the Git commands you use and why you use them in what situations?
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?
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.
@@slayingthedragon Thank you for replying to all the questions! It means the world to us ♥️
I loved the explanation. I understood it so well thanks
Yep, you are a very good teacher, thanks a lot.
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.
This is valid honestly, well said.
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.
Explains better than any professor 😮
Yup...Another great video. nice details. Thanks.
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;
}
Your video is liquid gold:) Thank you🙏
i really enjoyed the video thanks man
YOO, Thank you so much!
Love youuu from my inner soul❤
thanks dude been doing coding for a while and never bothered even to know the meaning of box-sizing 🤣till now
Extraordinary teaching ❤
Clockwise was nice concept
Seemed like you covered a lot here. One thing I noticed that was missing though was margin collapsing.
bro you are the GOAT
Thank you so much for this one 💖
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 .
You're a legend❤