![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.
Latest comments (53)
Great talk. Thanks for your all your great shared advice!
Thank you, Kathy! So happy to help!
Q: Is there any place in the web where documentation about CSS features — like what you have done with boxes — can be found?
From the look of your slides, I could surmise that there has been a lot of work put into it (to make it look soo easy to comprehend).
Q: How much time did you put in your presentation for your allotted time?
There is a wealth of information on MDN about all of the CSS specification: developer.mozilla.org/en-US/docs/W... — it can be rather wordy. So I would always recommend trying to put what you're reading into context and experiment with HTML and CSS with your own code to understand how it works.
I think I spent almost a week on writing the talk and building the demos and ensuring that the message was clear and not scary!
I’ve seen the mozilla docs and I don’t like ‘em.
To make the mozilla docs really good the way you did would be a “miracle” — i.e., without the proper intention, dedication, and most of all time-and-money budget.
You really did a good job for presenting the importance of that one box property.
Yes! A very honest remark that CSS is “easy”. Love it!!!!
Heyo! If you have any questions for Salma (@whitep4nth3r ) please drop them here! 🙏
We're gathering up these questions for the live speaker discussion coming up later on. 📣
Really informative. Great talk. Thanks Salma!
Thank you, Novice!
:D
Thank you so much for your talk. When looking to create non-orthogonal designs or elements (e.g. diagonals, curves, etc.), is the box model able to achieve this or is there a totally different "model" that is used?
You'll be dealing with transforms and such to achieve those types of results — however — you'll still need to understand the box model and box sizing when working with those types of things in order to understand how margins, paddings, and borders will be affected. Remember — every HTML element rendered in the browser has a box model regardless.
Probably the simplest but the best box model explication ever seen.
Kudos. Slides and snippets directly to my CSS cheatsheet.
Thank you, Alex! Much appreciated!
Thanks so much Salma! Very helpful tips, really improved my general understanding. I'm going to follow your advices and encouraged to dive deeper!
Good luck in your CSS journey, Rizzy!
I'll so be re-watching this talk. CSS still confuses me 😩.
Keep practising... it's not easy! We're all here with you!
Thanks for your encouragement! 🙏🏾
This is so helpfully! Thank you for sharing.
I want to know more about the difference between CSS Grid and Flexbox.
Think of grid as defining a grid to work with. You can achieve grid layouts with flexbox, but with gris there are more possibilities. I use flex inside grid items much of the time.
This was the best explanation of the box model I've ever seen. Thank you!
Thank you, Nad! This has made my day!
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!
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.
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!
ooooof im dusty on CSS after learning from this talk. This def changed my life, thank you Salma 🥳
Happy to hear, Austin!