Master The All Important CSS Box Model - Colt's Code Camp

This video covers some of the MOST IMPORTANT CSS properties including margin, padding, border, display, box-sizing, width, height, and background-clip. Find the code and homework assignment here: codepen.io/collection/nrYZYe

[@electrichimp]

Thank you Colt. I can't stop saying it: the quality of your content is beyond amazing, just GOLD.

[@sisalpoudel4041]

Hey Colt you made me believe that I can write code. Took almost all your courses in udemy

[@fufiafro]

Hi Colt! It has only been few months since I started learning how to code after watching your Udemy classes. Now I am teaching my 12 year old niece how to code. Thank you for making us believe that we can do it!!!

[@srikanth6006]

You're a natural teacher colt. you are helping many people like me to write clean and efficient code. More power and love to you 🤗❤️.

[@droidarcade405]

You have an amazing flow while teaching that connects all the dots .....incredible !

[@elow8106]

I always thought it was too late for me to learn the technical systems until I came across your Udemy courses. Seriously learning from scratch and now I have a good (micro and macro) understanding of how HTML, CSS, mySQL (and upcoming JS) works! Thank you for piecing them up so nicely and for being part of my career development! Da best, Colt!

[@krissykins2010]

I feel like I have so many lightbulb moments while watching your videos. Thank you for helping me finally make sense of the CSS box model.

[@qadirgreg]

I really appreciate these lessons/reminders.

[@ariap9697]

you are the best web tutor in youtube without any exageration

[@marymagdalenedas]

jumping with joy here on my first upload on codepen:). also that I figured out the exercise without looking at the solution..dancing the happy dance..yaayaa. Thank you Colt so much for these videos. They are an absolute gem for someone like me with zero web dev knowledge...

[@anusha8085]

Really enjoyed the lesson and the assignment. Thank you so much, Colt!

[@diegosepulveda8691]

Thank Colt for this videos where you explain no only the what, but the why of concepts. I think that is a very good differentiation on a teacher

[@AllezLeVert]

Thanks, Colt, using these to recap the frontend part of web dev bootcamp on Udemy. Your teaching style really works for me. Great job!

[@soumidas4992]

This is such an amazing and elaborate tutorial, one of the best on box model. Thank you so much .

[@nou9225]

Absolutely amazing video! This helped me a lot, and the exercise was super good and reviews all the topics covered in this tutorial! Thanks!!

[@shahadsaleh2180]

Colt , you're the best :) btw, I'm taking your web developer bootcamp course at Udemy , and I'm learning a lot from it . God bless :)

[@Slimboyfat1979]

Just found your channel. Excellent. You are a very very good teacher. Thank you.

[@wafaken]

Thanks for this. Even though I already know some of this, there are still so much I learned from this video.

[@redahammada8605]

Colt just makes CSS cool and easy to learn, thank you buddy .

[@nevyanamomchilova8153]

I absolutely love that video! I learn a lot and I like that you gave us an assignment! Just awesome! Thank you very much for the great content in your channel :)

[@AshishKumar-sl4ul]

one of the best ..content so far, thanks colt :)

[@angelicagabrieli7169]

Colt, thanks to you i understand HTML, CSS AND Javascript. You're awesome and Rusty is adorable :)

[@eukelarTV]

im gonna be honest im about halfway through the javascript course i had already started on udemy and while i do feel im learning if your full web dev bootcamp is anywhere near as simple and easy to understand as this i may just be switching to your course, I learned A TON in this 45 minutes.

[@enriquesneffels3053]

Thank you! amazing tutorial and great exercise! I wasn't into the exercise, but I did enjoyed it!

[@itsalorikatpnw]

I always struggled with the box model. You helped me better understand:) thank you!

[@positivelysweet9075]

Colt, do u know that you're going straight to heaven for this?

[@qayyax]

Thank you so much for this video, this video made me understand the box model. I have been confused with it for a long time

[@Leedah8]

This was sooooo tricky. Lol I did the best I could, but there were small things I was missing. Looked at the solution, and I had all of the right logic, but not the perfect execution. Loved this!

[@RobsonRochaCarvalho]

Keep up the great work! :)

[@Leedah8]

@@RobsonRochaCarvalho Thank you so much! That means a lot.

[@abdalrahmannajjar3545]

Thanks a lot Colt ❤️ I love your videos and your method of teaching ❤️, especially your silly jokes 😂

[@reemalnaji3718]

Your contents are amazing. You explained this topic better than my professor does I am so grateful to find your channel. Thank you

[@blushandrush9584]

Colt, I love listening to you so much!

[@josephnuriev1559]

Can't say how grateful I am thank you

[@voltairinedecleyre]

these are great refresher courses

[@roya2021]

Colt thanks a lot, for this code camp.

[@ead5590]

Ha ha! Now this is one topic that needs a whole video dedicated to it.. But definitely worth investing time in.. In other words, you got no choice but to understand the box model.. 🤣

[@aritralahiri8321]

Very Nice Video Colt

[@iKilledMufasaaaaa]

Thanks Colt!

[@webb-developer]

border, padding, margin ,box-sizing , display ,block , inline , inline-block done , ☑ remaining ==> border clipping , background clip

[@doors1122]

thanks colt youre the man

[@MohamedOmar-ef8nd]

Thanks alot this is extremely helpful.

[@boronxxx]

Nice one!

[@Lowprojects]

This helped me alot. Thanks

[@mobarakjama5570]

19:12 Quarantine getting to Colt 😁👌

[@TheMolaomar66]

block -inlineblock - inline i spend years with weard behavior with css . thank you man.

[@brainjohn9170]

Thanks Colt

[@Moses4694]

So far I love the way you teach ? You seem like a really humble guy and i reall like that? Also do you have a video on CSS Positioning?

[@ahmedhabibahmed99]

Thanks Teacher

[@user-sf9pn1dn1w]

This is the best so far for me i did wat u did but with different approach and we got the same answer

[@seunopeyemi8120]

This comes in quite Handy...Do you have more exercises?

[@memenetwork7708]

from where should we practice apart from your assignment ??

[@chinmay6144]

Dude thanks a lot.

[@Winterstorm858]

Really usefull, thanks

[@hackereports1128]

Ty

[@ukoni8667]

Really nice. I though the content in the box with the letter inside was the content.

[@chienle1492]

I'd buy a complete CSS bootcamp course from you if you ever release one.

[@binayachauhan52]

hey man what do you use for slides

[@vadosic]

thank you, sir

[@ssigitas69]

I watched already second your video, I think it is the best videos about CSS, what I watched before. Very clear, very understandably and in detail explained. THANK YOU SO MUCH ! I need to find all your courses about HTML, CSS and Python (if you have). I have one question about margin and padding. Many tutorials about creating web pages, teaching on the beginning put *{ margin: 0; padding: 0; } or html, body { margin: 0; padding: 0;} .Ok, when I add margin:0; I can see difference on web page, but when I add padding: 0; nothing changes. Why need padding: 0; ??? Can you show how it is makes changes?

[@RafaelJaureguiCaball]

What software are you using to code? Is nice to see the changes live instead of switching between note++ and explorer

[@f00kwhiteblackracismwarsh07]

Hey Man, Can You please also do the most comprehensive Flutter (dart) Programming Course sometime this Year on Udemy. I really like the way you teach. The best teacher on Udemy ever!

[@HexaKafa]

thanks

[@JamesHalpert8555]

Can you site some use cases for box-sizing and background-clip properties?? Confused where can I apply them :(

[@nawanitsharma8353]

Colt please teach to write media queries at the end of css part please.

[@thesmartest1919]

thank u

[@farhan_aftab]

Please add bootstrap videos with project

[@kenhilliard5845]

I understood that an img tag is an inline element, and that you cannot add top and bottom margins (or padding) to an inline element. In your example you gave the "tiger" image a top margin. Did you declare them "inline-block" in css? Could you clarify this point for me?

[@jovanxin9714]

Hey Colt, I am in your modern javascript bootcamp. Stephan said someting about a discord server earlier, can you please make one and put a announcement about it? Thank you, it is appreciated.

[@donaldnorman7012]

Colt, At 30:30 of this lesson - CSS Box Model - talking about gradient text background. You say pretty cool, but not with this font. Why is that or how do you decide what font is good for something?

[@reviewex9226]

image is also an inline element.so how we are able to set height and width to it.

[@mansasusa3757]

hello colt, how did you get the double border color to be two.

[@hamyou7710]

Hi bro do you have full html and css courses that I can buy ? you explain very clearly.

[@grainfrizz]

GOAT

[@sakshamchhatkuli271]

you are awsome

[@chukwuemekaorji9331]

Thank you so much How can I reach out to you ?

[@kumimochi]

You’re my fave

[@reviewex9226]

god level

[@eusebiumorar962]

I tried to put margin on the body but it works slightly different.Why?

[@Rycountry95]

:( Code-pen link does not work it takes me to your home page and says i cant see your projects without upgrading to pro.

[@romikonlinepotapenko3475]

works for me. Maybe it is because you have an account. Just log out and try again

[@bicyclingmartian1873]

Colt, you should try out codesandbox.io

[@Moses4694]

Can you tell me the link of your courses on Udemy?

[@D0F4M1N3]

30:05 nab move... just use width: fit-content;

[@PIRAKAS666]

How come this video on box model (and other topics) is more in depth and longer that the one you got in udemy course? lol

[@dywa_varaprasad]

I bought Udemy course Will I skip this or watch entire playlist

[@binayachauhan52]

forgot about auto and inhherint

[@prajwalpatil8500]

Hey Colt, did your parents love revolvers?

[@yashchauhan5852]

Skip to 1:14

[@yaakovmoskowitz329]

I love this, but I wish these would be available for Windows as well . I don't know why, but most design & development tutorials are done with Mac-OS, even though the overwhelming majority of people (including myself )use Windows.

[@jl_woodworks]

There is nothing on this tutorial that's platform specific. The browser is universal. You just need a text editor and a modern browser to learn and apply this. That's the very reason web apps dominate over native applications.

[@akshatbhutra7278]

Sir pls explain position: absolute and relative in your style

[@ayosnry1710]

21:08 24:24

[@marble_wraith]

You didn't address one of the most important things. Assuming a border is not required, when should padding be used vs margin? A new dev will look at both of them as being 2 equivalent ways to apply "negative space". The answer being, they're not equivalent. Margin has the potential to auto-collapse, padding does not. developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

[@Danachew]

I remember it as padding goes "inside" the box, margin goes "outside" the box. So for example, say I want to add space between two elements? Then I go with margins. Now let's say I want a small buffer space between the content and the edge of the window browser when we're getting smaller on mobile devices. Then I go with either padding on the body element or the overall container element.

[@ToriKo_]

Danielle thanks that’s pretty helpful