KZhead
Ғылым және технология

Learn CSS BOX MODEL - With Real World Examples

Slaying The Dragon
2023 ж. 21 Қаз.
74 795 Рет қаралды
Жүктеу

🚨🚨🚨 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.

Пікірлер

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

    @pepitoalmonte1238@pepitoalmonte12382 ай бұрын

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

    @niinjablade9369@niinjablade9369Ай бұрын

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

    @ride-time@ride-time4 ай бұрын

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

    @tevfik7@tevfik78 сағат бұрын

  • 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.

    @richardsinclair7661@richardsinclair76613 ай бұрын

  • 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.

    @mattnj8080@mattnj80803 ай бұрын

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

    @badcatdesign@badcatdesign6 ай бұрын

    • 😂 going clockwise works for me

      @olufemiajibade@olufemiajibade5 ай бұрын

    • HAHAHAHA

      @christopherkallas9305@christopherkallas93053 ай бұрын

    • For Me clock is a good reference 😂

      @rajatkatal9311@rajatkatal93113 ай бұрын

  • 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.

    @rb2k197@rb2k1974 ай бұрын

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

    @magnumjade45@magnumjade4515 күн бұрын

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

    @sneaksneak6522@sneaksneak65226 ай бұрын

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

      @jayjaayjaaay94@jayjaayjaaay942 ай бұрын

    • ​@@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

      @sneaksneak6522@sneaksneak65222 ай бұрын

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

    @RancorSweetly@RancorSweetly6 ай бұрын

  • 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.

    @rickyp9803@rickyp98035 ай бұрын

  • You explained it really well. Thank you so much.

    @kmarafatislam8403@kmarafatislam84034 ай бұрын

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

    @PainRemains2024@PainRemains202424 күн бұрын

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

    @DnsError80710102@DnsError80710102Ай бұрын

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

    @Yesterday_i_ate_rat@Yesterday_i_ate_rat6 ай бұрын

  • Never fail to amaze me with your teaching skills.

    @mykelcee@mykelcee5 ай бұрын

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

    @ShawnX1995@ShawnX199510 күн бұрын

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

    @clueless1434@clueless143425 күн бұрын

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

    @dramamania6899@dramamania68995 ай бұрын

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

    @RancorSweetly@RancorSweetly6 ай бұрын

  • greatest explanation of CSS Box Models tysm ily

    @SirenSeph@SirenSeph3 күн бұрын

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

    @rileylavonne8863@rileylavonne88632 ай бұрын

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

    @musicbutlyrical6380@musicbutlyrical63802 ай бұрын

  • 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@johnmellet66105 ай бұрын

    • 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; }

      @johnmellet6610@johnmellet66105 ай бұрын

  • the way you teach is flawless :)

    @flp905@flp905Ай бұрын

  • 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.

    @lunarskyye2680@lunarskyye268028 күн бұрын

  • Best video I have seen about this topic.

    @DeanCohenOfficial@DeanCohenOfficial5 ай бұрын

  • really nice way of explaining CSS. Easy to remember

    @daniajahanzaib5626@daniajahanzaib56265 ай бұрын

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

    @SuperDarmino@SuperDarmino6 ай бұрын

  • you just saved my life. THANK YOU.

    @lexxthetech_@lexxthetech_2 ай бұрын

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

    @00SecretAgent@00SecretAgent3 ай бұрын

  • 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!

    @ramune_flowers@ramune_flowersАй бұрын

  • thanks man, very helpful, very clear.

    @chrisbartkowski375@chrisbartkowski3753 ай бұрын

  • Your video is liquid gold:) Thank you🙏

    @miikoa@miikoa11 күн бұрын

  • i really enjoyed the video thanks man

    @marabdiaziiz961@marabdiaziiz9616 ай бұрын

  • I appreaciate your labor dude

    @fase8729@fase8729Ай бұрын

  • Very informative, thanks! 👍

    @dannygarcia8012@dannygarcia80122 ай бұрын

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

    @Dungeon_Synth_Enjoyer@Dungeon_Synth_Enjoyer6 ай бұрын

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

    @NiceChange@NiceChange5 ай бұрын

  • Great Explanation ❤

    @jha-bhaskar@jha-bhaskar2 ай бұрын

  • Thank you for this explanation

    @charlestoneoyoo@charlestoneoyoo4 ай бұрын

  • Thanks a lot for the class ;).

    @gabrielrinconlopez9241@gabrielrinconlopez92416 ай бұрын

  • This is very descriptive thanks ✌🏼

    @uridevmedia@uridevmedia2 ай бұрын

  • You are creating great content ❤

    @rakeshislammolla7201@rakeshislammolla72013 ай бұрын

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

    @NAFIZALRAKIB@NAFIZALRAKIB6 ай бұрын

  • love from brazil

    @yokk0@yokk06 ай бұрын

  • Wow , Thanks a lot it covered many things which I don't know ❤❤❤

    @rahulrahul6259@rahulrahul62592 ай бұрын

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

    @PraveenKumarJha-xc6ie@PraveenKumarJha-xc6ie4 күн бұрын

  • Thank you so much!

    @FallenAngelMMA@FallenAngelMMA6 ай бұрын

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

    @riyadhossain7854@riyadhossain78546 ай бұрын

  • 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.

    @prasadranjansikdar6127@prasadranjansikdar612715 күн бұрын

  • Extremely nice video!

    @xonic7852@xonic78527 күн бұрын

  • super explanation kudos to you

    @pushyanth1223@pushyanth12232 ай бұрын

  • I am doing css and I love this video

    @sureshkumar3217@sureshkumar32175 ай бұрын

  • i have stumbled upon a gold mine of content

    @Lian-zb5rk@Lian-zb5rk6 ай бұрын

  • Hello sir, thank you so much for this amazing tutorial, looking forward to more such amazing content... Best regards 😃

    @its_mah_way2717@its_mah_way27172 ай бұрын

  • this video is sponsored by... myself! 😀

    @manuelk64@manuelk643 ай бұрын

  • You're a legend❤

    @rejuzaman6365@rejuzaman63655 ай бұрын

  • Clockwise was nice concept

    @rtx__3090@rtx__30906 ай бұрын

  • explained very well

    @rakibul98@rakibul984 ай бұрын

  • bro you are the GOAT

    @undeadqug7732@undeadqug7732Ай бұрын

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

    @Chiaros@Chiaros6 ай бұрын

  • Love youuu from my inner soul❤

    @Sebastian-lc4nh@Sebastian-lc4nh6 ай бұрын

  • Here comes the legend, to slay the dragon CSS

    @varswe@varswe6 ай бұрын

  • thank u so much man

    @KarthikKollur-ky3iw@KarthikKollur-ky3iw5 ай бұрын

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

    @hoagiesupreme@hoagiesupreme21 күн бұрын

  • no one does it better than you my king😊😊

    @taufiq6329@taufiq6329Ай бұрын

  • Thank you brother

    @shangeevanMukunthan@shangeevanMukunthan27 күн бұрын

  • 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.

    @altayeb913@altayeb9135 ай бұрын

  • 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!

    @Macj707@Macj7072 ай бұрын

  • perfection

    @rajbhushan3541@rajbhushan3541Күн бұрын

  • love you from israel and you have a really calm voice

    @menachemlevi@menachemlevi5 ай бұрын

  • learn a lot thanks

    @chenbruce2428@chenbruce24285 күн бұрын

  • شكرا Thanks that was helpful

    @ahmedghallab5342@ahmedghallab53423 ай бұрын

  • just subscribe well explained

    @menachemlevi@menachemlevi5 ай бұрын

  • Everything is smooth now after doing the CSS reset !

    @c28ccd0e@c28ccd0e5 ай бұрын

  • Can you make a video on margin collapse property

    @sharath.m@sharath.m6 ай бұрын

  • 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 ?

    @trocandobytes@trocandobytes2 күн бұрын

  • You're good❤🔥

    @rejoiceokafor5988@rejoiceokafor59882 ай бұрын

  • 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".

    @fatemeetsluck@fatemeetsluck20 күн бұрын

  • the best one eveeeeeeeeeeeeeeeeeer

    @basmalabasmala7176@basmalabasmala71762 ай бұрын

  • I LOVE YOU!!!!!!!!!!!!!!

    25 күн бұрын

  • Thanks!

    @blakeclark8622@blakeclark86226 ай бұрын

    • Thank very much !!

      @slayingthedragon@slayingthedragon6 ай бұрын

  • Thank you🥹

    @dorthychristobel5106@dorthychristobel5106Ай бұрын

  • 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; }

    @SRG-Learn-Code@SRG-Learn-Code6 ай бұрын

  • Bravo sir

    @flashingturtle6505@flashingturtle65052 ай бұрын

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

    @kenanklovitch8117@kenanklovitch81173 ай бұрын

  • Didnt know about the default margin

    @halcyon__r3289@halcyon__r32896 ай бұрын

  • awesome

    @Bingbangbong28@Bingbangbong286 ай бұрын

  • 1st here :) waiting for your content for a while

    @putudharma4352@putudharma43526 ай бұрын

  • You're good

    @user-cj3cl3bu4r@user-cj3cl3bu4r5 ай бұрын

  • fire video 😎

    @thatoneshortkidjordy2144@thatoneshortkidjordy21446 ай бұрын

    • 😎😎

      @slayingthedragon@slayingthedragon6 ай бұрын

  • Post some video myan. Eagerly waiting for

    @BibekGotame@BibekGotame3 ай бұрын

  • Hey man, wasn't sure where to ask this so resorting to this responce section. Would you by any chance know why this 'display: flex; " css code wouldn't work for Microsoft edge browser on a sharepoint page? I've copied your code 100% correct and the tiles in my container stay vertically. If i run the code at home on a firefox browser it works perfectly. So its either the edge browser at work or the fact i am using this type of code inside a sharepoint enviroment. Thx for your help.

    @BigBadBelgium9803@BigBadBelgium98034 ай бұрын

  • 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.

    @PascalHorn@PascalHorn6 ай бұрын

    • This is valid honestly, well said.

      @slayingthedragon@slayingthedragon6 ай бұрын

    • 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.

      @Halonyr@Halonyr6 ай бұрын

  • Great explanation. Learned something new with the box-model and you're right, based on its powerful functionality is should be applied to the entire DOM. What is the compatibility of this? IE7 (I'm showing my age)?

    @dixalex02@dixalex022 ай бұрын

    • Thank you! Here's the browser support, it's overwhelmingly supported, only IE6 and 7 aren't caniuse.com/?search=border-box

      @slayingthedragon@slayingthedragon2 ай бұрын

  • He's good

    @bigisma-il5927@bigisma-il59272 ай бұрын

  • 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

    @AyaKun2040@AyaKun20403 ай бұрын

  • best

    @user-mg8lr6cg1z@user-mg8lr6cg1z5 ай бұрын
KZhead