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.
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!
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.
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.
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!!
🎯 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
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!
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.
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.
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.
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.
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.
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...
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.
That is by far the best explanation of the box model I've ever seen. Nice work!
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!
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
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.
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.
Thanks!
Thank very much !!
This is the simplest and best guide of the Box Model I've seen yet.
Great job brother!
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'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
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!
no one does it better than you my king😊😊
You are the best CSS tutor available on the youtube. 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.
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
this video is just top notch, you have a natural talent for explaining things in a way people can understand easily
Worth watching the whole thing. Speed it up if you want, but don't skip this one! Thanks!!!!!
This video was incredible, man. You truly made my Christmas better!
Best video I have seen about this topic.
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;
}
this video solved all my questions, keep up with the channel men!
wow! hands down the best tutorial on this topic. thanks! subbed!
such a great teacher. im dumb af but you made me understand box model in 17 min. thank you so much.
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.
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 ❤️
UNIVERSAL STAR SELECTOR 9:50 this is something I actually really needed but had no idea it existed. Thank you! 🙏🏼
One big css concept is cleared after long time thanks bro
Never fail to amaze me with your teaching skills.
I appreaciate your labor dude
🎯 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
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!
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.
the way you teach is flawless :)
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!
Sometimes you just need that perfect video for you to truly understand a concept. This is that video for me.
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.
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.
Really well explained. No confusing. Everything on point. Thanks ♥
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😂😂😂
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.
You are a great teacher bro. You have a new sub. Keep them coming.
Yes "we see" how helpful this explanation was no fluff thank you so much!
I didn't even realize I needed to know this thank you!! Great video start yeah! 🔥
i cant unhear Border-Box in Slay's voice 😭😭
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.
love from brazil
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.
web legend is back with a fire video. 😅 You are awesome brother
@SlayingTheDragon
...
Finally, someone I can hear, understand, and follow all in one box..!
You explained it really well. Thank you so much.
Great video and the details given are clear and concise! Amazing
Every second is worth watching. Thank you.
Damn! I thought I understood "box-sizing: border-box", but I actually didn't.
Now I understand it.
Awesome explanation... Thanks!
You nailed it! Keep up the good work!
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. 🤩🤩
Finally I got it.
Thanks a lot amazing explanation 🔥🔥
This video was excellent! Definitely subscribing!
Glad that i found this video. Thank you so much for such a good content.
really nice way of explaining CSS. Easy to remember
Thanks you save me time I used to test the padding manually to find out the top,bottom,right,left
Excellent tutorial! Clear and straightforward. Thanks!
You really are the best one on this platform....Great Work!!
Your teaching skills is just amazing ❤. I learnt many things from you. Thank you bro ❤
I am doing css and I love this video
Thanks for this video, appreciate your efford.
Well explained!
greatest explanation of CSS Box Models tysm ily
Best explanation ever ! thanks Smaug
very detailed and simple examples. I appreciate you for creating that content.♥♥
i have stumbled upon a gold mine of content
Awesome stuff, explained very well like all the rest of your content.
just bought the course really great content bro 😊😊👍👍
i really enjoyed the video thanks man
I loved the explanation. I understood it so well thanks
Yup...Another great video. nice details. Thanks.
Yep, you are a very good teacher, thanks a lot.
you just saved my life. THANK YOU.
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.
thanks dude been doing coding for a while and never bothered even to know the meaning of box-sizing 🤣till now
Your video is liquid gold:) Thank you🙏
Extraordinary teaching ❤
YOO, Thank you so much!
Thank you so much for this amazing video, ❤ everything is clear now
good job, very useful content , thank you so much
Explains better than any professor 😮
great explanation
Love youuu from my inner soul❤
Got a like and new subscriber. Thank you so much!
Here comes the legend, to slay the dragon CSS
Thank you so much for this one 💖
Here from Odin Project, awesome watch this helped me a lot
You're a legend❤
your videos are so helpful :) thank you!
Adding sections to the video's timeline would be nice, like in older videos.
You are creating great content ❤
Thanks a lot for the class ;).