![Cover image for [On-Demand Talk] This Box Will Change Your Life](https://community.codenewbie.org/images/9jX3vQqKUkFtM8i0Bb16H8lDMtjecI8e8pk0YGSX5sc/rs:fill:1000:420/g:sm/mb:500000/ar:1/aHR0cHM6Ly9jb21t/dW5pdHkuY29kZW5l/d2JpZS5vcmcvcmVt/b3RlaW1hZ2VzL3Vw/bG9hZHMvYXJ0aWNs/ZXMvYmI2OGh0aXlm/eTdheTRvaWE4eGwu/cG5n)
About This Talk
Is the struggle of battling with margins, paddings and layout in front end development all too familiar? Understanding the CSS box model will change your life. By exploring this powerful and fundamental concept through a series of code examples and real-world struggles, you'll feel empowered to tackle your next project with confidence. CSS doesn't have to be scary. This box will change your life.
Takeaways
- The CSS Box Model
- Box Sizing
- Different types of boxes
Resources
Slides
>> Click here to download slides
🌈 Comment below and ask me questions — I might just answer them during my live speaker discussion!
About Salma Alam-Naylor
Salma — or whitep4nth3r — helps developers build stuff, learn things and love what they do. With a background in music, teaching and comedy, and after a career as a front end developer and lead engineer, Salma is now a Developer Advocate at Contentful.
Salma is a Microsoft MVP for Developer Technologies, Twitch partner and live coding streamer, speaker, tech content creator, and relentless advocate for building a truly accessible web. Founder of unbreak.tech and womenwhostream.tech, her projects revolve around activism for social change and equality in the technology industry, and her expertise is the Jamstack and related front end web technologies.
Connect With Me
- Twitter - @whitep4nth3r
- Twitch - whitep4nth3r
- YouTube - whitep4nth3r
- GitHub - whitep4nth3r
- Polywork - whitep4nth3r
- Website
This on-demand talk is part of CodeLand 2021 — a virtual conference brought to you by CodeNewbie & DEV on September 23 & 24, 2021.
Oldest comments (53)
Oooh pretty text colors- could you share color scheme?
If you're referring to the code examples, I think I used the Community Material High Contrast Light theme 😊
Thank you! That is exactly what I was referring to, I'm looking for a new light theme and it caught me eye
In your journey learning CSS, what would you say has been your biggest lightbulb moment aside from the box model?
CSS grid has changed the game. I recently discovered grid template areas — and gone are the days of sorting your HTML into rows and columns to mock grid layouts in your markup — just define your grid-areas on your individual elements and kind of visually construct your grid with some lines of CSS. It’s SO powerful and I don’t think people are talking about it enough. No more adding random inner containers to sort things and change the order of things throughout your CSS. Just define the layout of your grid in words in a line of CSS.
This is SUPER helpfully. I had no idea there was Box-sizing
So happy to help, Richard!
I'm using MUI to style my React project and I'm going to try to tricks you talked about to help with some of the funny things the css from MUI is pulling with the ui
Good luck!
This has really helped me better understand CSS box model - excellent presentation!
Thank you! This makes me so happy! 🥳
I need that table on a poster!
Always Declare Everything!!!
ALWAYS!!
Thanks for the deep info on the box model Salma!
aside:
I used to have to tell Opera 12 (long, long ago) to disguise itself to use the user agent for Internet Explorer because sites were written to the IE standard. At least I think I did, lol. It sounds familiar.
Great insight and tips. This should save some time and help with our layouts!
Oof, that sounds tricky! Thanks for your kind words!
Do you prefer flexbox or grid? Any reason for the answer?
I use both flexbox and grid — both for different purposes! I always try to use grid for grid layouts (as the name suggests!) and I use flex on elements within the grid to lay things out nicely, vertically center things, and so on.
On a team full of engineers that focus on functionality and using tools like bootstrap themes, there's one senior dev that specializes in front-end and then there's me that's been helping out. So many overlapping styles and confusion. Great tips and tricks @whitep4nth3r
Thank you, Christian!
Really loved it and the setup for the video was epic ❤️
Thank you!
ooooof im dusty on CSS after learning from this talk. This def changed my life, thank you Salma 🥳
Happy to hear, Austin!
This was truly fantastic. I've spent far to long in my (fairly short so far) coding journey struggling with CSS and this was an incredibly helpful mindset-shift Thank you so much for your talk, and the resources you've shared!
Thank you so much, Sarah!
Salma, That’s an amazing presentation of what could have been a very tedious topic presentation. 👍🏻
Thank you so much, Loreto! I had a great time working on the talk.
Thank you Salma. You really explained the box system clearly, and it helped clear up some issues I was still having with CSS.
Thank you so much, Nik!
This was the best explanation of the box model I've ever seen. Thank you!
Thank you, Nad! This has made my day!