CodeNewbie Community 🌱

Cover image for [On-Demand Talk] This Box Will Change Your Life

[On-Demand Talk] This Box Will Change Your Life

@whitep4nth3r on September 24, 2021

About This Talk Is the struggle of battling with margins, paddings and layout in front end development all too familiar? Understandi...
Collapse
 
michaeltharrington profile image
Michael Tharrington

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

Collapse
 
callumreid profile image
callumreid

Do you prefer flexbox or grid? Any reason for the answer?

Collapse
 
whitep4nth3r profile image
@whitep4nth3r

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.

Collapse
 
devanshmehra profile image
Devansh Mehra • Edited

Always Declare Everything!!!

Collapse
 
whitep4nth3r profile image
@whitep4nth3r

ALWAYS!!

Collapse
 
lucecarter profile image
Luce Carter

In your journey learning CSS, what would you say has been your biggest lightbulb moment aside from the box model?

Collapse
 
whitep4nth3r profile image
@whitep4nth3r • Edited

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.

Collapse
 
ckn00b profile image
Christian New

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

Collapse
 
whitep4nth3r profile image
@whitep4nth3r

Thank you, Christian!

Collapse
 
towers1209 profile image
Loreto E. Torres

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?

Collapse
 
whitep4nth3r profile image
@whitep4nth3r • Edited

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!

Collapse
 
towers1209 profile image
Loreto E. Torres

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.

Collapse
 
noviicee profile image
Novice

Really informative. Great talk. Thanks Salma!

Collapse
 
whitep4nth3r profile image
@whitep4nth3r

Thank you, Novice!

Collapse
 
noviicee profile image
Novice

:D

Collapse
 
debrakayelliott profile image
Debra-Kaye Elliott

I'll so be re-watching this talk. CSS still confuses me 😩.

Collapse
 
whitep4nth3r profile image
@whitep4nth3r

Keep practising... it's not easy! We're all here with you!

Collapse
 
debrakayelliott profile image
Debra-Kaye Elliott

Thanks for your encouragement! 🙏🏾

Collapse
 
deweyhammers profile image
Richard Dewey Hammers

This is SUPER helpfully. I had no idea there was Box-sizing

Collapse
 
whitep4nth3r profile image
@whitep4nth3r

So happy to help, Richard!

Collapse
 
deweyhammers profile image
Richard Dewey Hammers

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

Thread Thread
 
whitep4nth3r profile image
@whitep4nth3r

Good luck!

Collapse
 
fizzybuzzybeezy profile image
fizzybuzzybeezy

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!

Collapse
 
whitep4nth3r profile image
@whitep4nth3r

Oof, that sounds tricky! Thanks for your kind words!

Collapse
 
sunnynonsense profile image
SunnyNonsense

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?

Collapse
 
whitep4nth3r profile image
@whitep4nth3r

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.

Collapse
 
srivera12 profile image
Sarah Rivera

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!

Collapse
 
whitep4nth3r profile image
@whitep4nth3r

Thank you so much, Sarah!

Collapse
 
alexandrammr profile image
\alexandrammr

Really loved it and the setup for the video was epic ❤️

Collapse
 
whitep4nth3r profile image
@whitep4nth3r

Thank you!

Collapse
 
callumreid profile image
callumreid

Oooh pretty text colors- could you share color scheme?

Collapse
 
whitep4nth3r profile image
@whitep4nth3r • Edited

If you're referring to the code examples, I think I used the Community Material High Contrast Light theme 😊

Collapse
 
callumreid profile image
callumreid

Thank you! That is exactly what I was referring to, I'm looking for a new light theme and it caught me eye

Collapse
 
elleon003 profile image
elleon003

This has really helped me better understand CSS box model - excellent presentation!

Collapse
 
whitep4nth3r profile image
@whitep4nth3r

Thank you! This makes me so happy! 🥳

Collapse
 
serenalin121 profile image
Serena Lin

This is so helpfully! Thank you for sharing.

I want to know more about the difference between CSS Grid and Flexbox.

Collapse
 
whitep4nth3r profile image
@whitep4nth3r

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.

Collapse
 
towers1209 profile image
Loreto E. Torres

Salma, That’s an amazing presentation of what could have been a very tedious topic presentation. 👍🏻

Collapse
 
whitep4nth3r profile image
@whitep4nth3r

Thank you so much, Loreto! I had a great time working on the talk.

Collapse
 
nadreamer profile image
Nad

This was the best explanation of the box model I've ever seen. Thank you!

Collapse
 
whitep4nth3r profile image
@whitep4nth3r

Thank you, Nad! This has made my day!

Collapse
 
niko1402 profile image
Nik Payton

Thank you Salma. You really explained the box system clearly, and it helped clear up some issues I was still having with CSS.

Collapse
 
whitep4nth3r profile image
@whitep4nth3r

Thank you so much, Nik!

Collapse
 
codemekathy profile image
Kathy Lambert

Great talk. Thanks for your all your great shared advice!

Collapse
 
whitep4nth3r profile image
@whitep4nth3r

Thank you, Kathy! So happy to help!

Collapse
 
rizzydc profile image
Ruzel Zakirov

Thanks so much Salma! Very helpful tips, really improved my general understanding. I'm going to follow your advices and encouraged to dive deeper!

Collapse
 
whitep4nth3r profile image
@whitep4nth3r

Good luck in your CSS journey, Rizzy!

Collapse
 
lucecarter profile image
Luce Carter

I need that table on a poster!

Collapse
 
austinxduong profile image
austinxduong

ooooof im dusty on CSS after learning from this talk. This def changed my life, thank you Salma 🥳

Collapse
 
whitep4nth3r profile image
@whitep4nth3r

Happy to hear, Austin!

Collapse
 
xelaflash profile image
AlexG

Probably the simplest but the best box model explication ever seen.
Kudos. Slides and snippets directly to my CSS cheatsheet.

Collapse
 
whitep4nth3r profile image
@whitep4nth3r

Thank you, Alex! Much appreciated!

Collapse
 
towers1209 profile image
Loreto E. Torres

Yes! A very honest remark that CSS is “easy”. Love it!!!!