Learn CSS BOX MODEL - With Real World Examples

Рет қаралды 91,401

8 ай бұрын

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

Пікірлер: 180

@XMusicSickness 23 күн бұрын

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

@pepitoalmonte1238 3 ай бұрын

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

@official_bqpro Ай бұрын

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

@niinjablade9369 3 ай бұрын

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

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

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

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

@brooklynsicily9145 17 күн бұрын

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

@SuperDarmino 8 ай бұрын

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

@rb2k197 5 ай бұрын

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.

@sneaksneak6522 8 ай бұрын

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

@jayjaayjaaay94 3 ай бұрын

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

@sneaksneak6522 3 ай бұрын

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

@BK69XXX 7 күн бұрын

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.

@HimanshuGupta-jx4nk 14 күн бұрын

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!

@imuhammadessa 29 күн бұрын

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

@mattnj8080 5 ай бұрын

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.

@richardsinclair7661 4 ай бұрын

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.

@rickyp9803 6 ай бұрын

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.

@RancorSweetly 8 ай бұрын

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

@RancorSweetly 8 ай бұрын

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

@mykelcee 7 ай бұрын

Never fail to amaze me with your teaching skills.

@badcatdesign 8 ай бұрын

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

😂 going clockwise works for me

@TheRetiredBatman 5 ай бұрын

HAHAHAHA

@rajatkatal9311 4 ай бұрын

For Me clock is a good reference 😂

@francescoanastasio2021 3 күн бұрын

This is actually very useful 😂

@kmarafatislam8403 5 ай бұрын

You explained it really well. Thank you so much.

@DeanCohenOfficial 7 ай бұрын

Best video I have seen about this topic.

@magnumjade45 Ай бұрын

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

@johnmellet6610 6 ай бұрын

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 6 ай бұрын

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 11 күн бұрын

Amazing tutorial, i have watched multiple videos and read multiple documents, but your tutorial is the only one that clicked with me. Thank you !

@SirenSeph Ай бұрын

greatest explanation of CSS Box Models tysm ily

@rileylavonne8863 3 ай бұрын

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

@Cosmolgy24 2 ай бұрын

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

@DnsError80710102 3 ай бұрын

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

@00SecretAgent 5 ай бұрын

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

@flp905 3 ай бұрын

the way you teach is flawless :)

@dramamania6899 7 ай бұрын

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

@jahnisicalderon5600 17 күн бұрын

I loved the explanation. I understood it so well thanks

@tevfik7 Ай бұрын

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

@musicbutlyrical6380 4 ай бұрын

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

@Betterdays1996 20 күн бұрын

Thank you so much for this one 💖

@yokk0 8 ай бұрын

love from brazil

@Yesterday_i_ate_rat 7 ай бұрын

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

@daniajahanzaib5626 7 ай бұрын

really nice way of explaining CSS. Easy to remember

@miikoa Ай бұрын

Your video is liquid gold:) Thank you🙏

@TheGuyCalledCarl 19 күн бұрын

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

@isurumaldeniya9536 18 күн бұрын

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

@lexxthetech_ 3 ай бұрын

you just saved my life. THANK YOU.

@NAFIZALRAKIB 8 ай бұрын

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

@uridevmedia 4 ай бұрын

This is very descriptive thanks ✌🏼

@dannygarcia8012 3 ай бұрын

Very informative, thanks! 👍

@fase8729 3 ай бұрын

I appreaciate your labor dude

@Blackdiamond929_ 9 күн бұрын

your videos are so helpful :) thank you!

@clueless1434 2 ай бұрын

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

@NiceChange 7 ай бұрын

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

@lunarskyye2680 2 ай бұрын

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.

@ARULVENDHAN-up8fq Ай бұрын

Extraordinary teaching ❤

@ShawnX1995 Ай бұрын

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

@marabdiaziiz961 7 ай бұрын

i really enjoyed the video thanks man

@rakeshislammolla7201 4 ай бұрын

You are creating great content ❤

@xonic7852 Ай бұрын

Extremely nice video!

@MrVipulLal 21 күн бұрын

Clear explanation. Thanks

@ramune_flowers 3 ай бұрын

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!

@taufiq6329 2 ай бұрын

no one does it better than you my king😊😊

@Dungeon_Synth_Enjoyer 8 ай бұрын

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

@manuelk64 5 ай бұрын

this video is sponsored by... myself! 😀

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

i have stumbled upon a gold mine of content

@chrisbartkowski375 4 ай бұрын

thanks man, very helpful, very clear.

@undeadqug7732 2 ай бұрын

bro you are the GOAT

@Chiaros 8 ай бұрын

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

@varswe 8 ай бұрын

Here comes the legend, to slay the dragon CSS

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

@gabrielrinconlopez9241 8 ай бұрын

Thanks a lot for the class ;).

@sureshkumar3217 7 ай бұрын

I am doing css and I love this video

@vivekpoojary265 26 күн бұрын

good job, very useful content , thank you so much

@Zoyoni Ай бұрын

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

@rtx__3090 8 ай бұрын

Clockwise was nice concept

@riyadhossain7854 7 ай бұрын

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

@pushyanth1223 3 ай бұрын

super explanation kudos to you

@rahulrahul6259 4 ай бұрын

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

@letsgetstarted.05 17 күн бұрын

your contents are 🔥

@FallenAngelMMA 7 ай бұрын

Thank you so much!

@rejuzaman6365 6 ай бұрын

You're a legend❤

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

Great Explanation ❤

@charlestoneoyoo 5 ай бұрын

Thank you for this explanation

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

Love youuu from my inner soul❤

@PraveenKumarJha-xc6ie Ай бұрын

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

@rakibul98 5 ай бұрын

explained very well

@rouisaek 7 ай бұрын

Everything is smooth now after doing the CSS reset !

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

thank u so much man

@its_mah_way2717 4 ай бұрын

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

@shangeevanMukunthan 2 ай бұрын

Thank you brother

@Macj707 3 ай бұрын

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!

@rajbhushan3541 Ай бұрын

perfection

@chenbruce2428 Ай бұрын

learn a lot thanks

@edmilsondossantosgaldino8615 17 күн бұрын

great explanation

@menachemlevi 6 ай бұрын

just subscribe well explained

@menachemlevi 6 ай бұрын

love you from israel and you have a really calm voice

@altayeb913 6 ай бұрын

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.

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

Can you make a video on margin collapse property

@hoagiesupreme 2 ай бұрын

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

2 ай бұрын

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

@trocandobytes Ай бұрын

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 ?