Learn CSS BOX MODEL - With Real World Examples
HTML-код
- Опубликовано: 21 окт 2023
- 🚨🚨🚨 COURSES - slayingthedragon.io 🚨🚨🚨
Join the discord - / discord
On the web, everything is a box, literally everything. All the elements, the images, the videos, the paragraphs, the headings, entire sections, everything! And with everything being a box, everything has this box-model applied to it. We see, the box model consists of the content, the padding, the border, and the margin. 
Наука
Hot damn, this guy literally made me understand a concept i was having trouble with for a month in just 17 minutes...
Jesus bro, everyone is focusing on making short videos without details, but this 17 min long is worth every second.
thanks so much.
Damn! I thought I understood "box-sizing: border-box", but I actually didn't.
Now I understand it.
Awesome explanation... Thanks!
The Odin Project Brought me here. it was very clear and punctual on point.. Much love form 'South Africa'
This is the holy book of CSS Box models, thank you.
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 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 ❤️
That is by far the best explanation of the box model I've ever seen. Nice work!
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
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.
such a great teacher. im dumb af but you made me understand box model in 17 min. thank you so much.
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 😂
i cant unhear Border-Box in Slay's voice 😭😭
I didn't even realize I needed to know this thank you!! Great video start yeah! 🔥
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.
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 so much. You've been the best that I've found at explaining CSS in a way that is both clear and straightforward.
Worth watching the whole thing. Speed it up if you want, but don't skip this one! Thanks!!!!!
Never fail to amaze me with your teaching skills.
Adding sections to the video's timeline would be nice, like in older videos.
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;
}
You explained it really well. Thank you so much.
UNIVERSAL STAR SELECTOR 9:50 this is something I actually really needed but had no idea it existed. Thank you! 🙏🏼
You are a great teacher bro. You have a new sub. Keep them coming.
You helped me out so much! Thank you for making quality content.
Your teaching skills is just amazing ❤. I learnt many things from you. Thank you bro ❤
Best video I have seen about this topic.
the way you teach is flawless :)
Thank you so much for this amazing video, ❤ everything is clear now
Yes "we see" how helpful this explanation was no fluff thank you so much!
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 are the best one on this platform....Great Work!!
really nice way of explaining CSS. Easy to remember
@SlayingTheDragon
...
Finally, someone I can hear, understand, and follow all in one box..!
Awesome stuff, explained very well like all the rest of your content.
very detailed and simple examples. I appreciate you for creating that content.♥♥
greatest explanation of CSS Box Models tysm ily
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
web legend is back with a fire video. 😅 You are awesome brother
i really enjoyed the video thanks man
Yup...Another great video. nice details. Thanks.
Yep, you are a very good teacher, thanks a lot.
you just saved my life. THANK YOU.
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.
Love your videos bro! Could you make a video about the Git commands you use and why you use them in what situations?
Your video is liquid gold:) Thank you🙏
Thank you so much for this one 💖
I am doing css and I love this video
I appreaciate your labor dude
Can you make a video on margin collapse property
i have stumbled upon a gold mine of content
thanks man, very helpful, very clear.
Thanks a lot for the class ;).
This is very descriptive thanks ✌🏼
You are creating great content ❤
Extraordinary teaching ❤
Everything is smooth now after doing the CSS reset !
Very informative, thanks! 👍
Extremely nice video!
Wow , Thanks a lot it covered many things which I don't know ❤❤❤
Great Explanation ❤
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.
Clockwise was nice concept
no one does it better than you my king😊😊
Clear explanation. Thanks
You're a legend❤
Thank you so much!
good job, very useful content , thank you so much
Here comes the legend, to slay the dragon CSS
Thank you for the video simple with lot of information جزاك الله خيرا
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!
this video is sponsored by... myself! 😀
Love youuu from my inner soul❤
bro you are the GOAT
Thank you for this explanation
explained very well
nice video sir.i appreciate your efforts to make us understand the best
Hello sir, thank you so much for this amazing tutorial, looking forward to more such amazing content... Best regards 😃
Your videos are very concise and helpful ! I was wondering if you could make tutorials on how to make complete website layouts, with different templates covering the most used ones. You could make use of flex or grid to make they adapt nicely on any divice, depending of the layout, and using the correct semantics. Could you ?
thank u so much man
love you from israel and you have a really calm voice
super explanation kudos to you
Didnt know about the default margin
I hope you get rich one day teaching stuff. You're great at it.
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.
just subscribe well explained
perfection
Thank you brother
learn a lot 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;
}
Thanks!
Thank very much !!
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 .
Wow, I am barely above a novice but I understood that (I think). Thank you.
This was extremely helpful. I'm trying to make a sort of Bible study note HTML app sort of thing that can display the text on one side and the annotations on the right, all without using deprecated HTML elements such as "frame".
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 LOVE YOU!!!!!!!!!!!!!!
programmers could use what 3d modelers use when they do the videos, a box that shows what keys they are pressing, help us with shortcuts
1st here :) waiting for your content for a while
fire video 😎
😎😎