Speaker explains how the website layout is laid out. Speaker thanks everyone for hanging out and sending them some traveling music. Speaker is going to work.

Speaker explains the basic layout of a car. Speaker explains how to create a website with an aspect ratio of 16 by 9. Speaker explains how the card is laid out. Speaker wants Patty to select the right card. Speaker has to resize it so Patty can see it keeps the thing.

Speaker shows a trick to make sure the child container leaves the parent container. Speaker explains the difference between content box and border box. Speaker explains how the content box works. Speaker explains how the box-sizing has changed. The aspect ratio has changed from 170 to 140. Speaker has the parent and the card.

Speaker explains the importance of the CSS property called aspect ratio. Speaker has found out that they can use aspect ratio instead of padding bottom. Speaker explains to Speaker how to set the preferred aspect ratio of the content box. Speaker explains to Speaker how the CSS box-sizing works. The content box has a width of 100 and a height of 10 pixels with a padding of five pixels around it.

Speaker hasn't done any post radio, show promo stuff yet. He's been doing laundry and thinking a lot. Tomorrow is new their birthday. Speaker will play more of their music on the show. Speaker's show is up and ready to be uploaded to the podcast catching app. they need to do the post-show promo. they used to have issues with where they upload the show, but now it's ready.

• aspect ratio
• auto sizes
• content box dimensions
• image card
• actual outer box
• clamp css

Take it out.

Welcome back that same old place that you like, but the know since you hung around but those dreams everything, and they have turned around.

Spot, welcome back.

Welcome back.

Welcome back.

Welcome back.

Welcome back.

Welcome back.

Welcome back.

Hey, what's going on?

All righty.

How was your work since?

Give it a stretch?

Oh, man.

I started laundry, but I haven't really done much of anything else.

I have just been kind of just, I don't know.

Let my brain just kind of just wander.

And stuff, so hopefully, you are being productive.

At least I am getting laundry done.

I haven't done any post radio, show promo stuff yet.

Yesterday, was a long night.

We actually ran over on the show because we were doing, like I said before, like tomorrow is new Jabez and J dilla's birthday.

So, normally around that time, we kind of like playing a little bit more of their music on the show and kind of talk about it.

So we kind of like went over.

The show's almost is normally two hours.

It was almost Three hours and so any, the longer, the show, the longer, the post-show stuff, because I get it ready to be uploaded to, like I record them.

And so that in podcasts and things like different podcast catching apps.

So people can check out later.

And yeah, it was a long when I was having issues with where I upload it.

Like it took forever.

It was it took forever, but you know, it's up.

It's King, so that's good.

And just got a just have to now do the post promo stuff.

So, all right.

So this one is going to be quick.

It's going to be, I always say that and always go over but I wanted to talk about a thing that actually came in handy.

A couple of weeks ago, and I was like, I was a good thing.

I knew about that.

As one of those things like you had it in the back pocket and when it actually came to be useful, you pull that out and like, oh, I have this thing that I have always had in the back of my brain and I, it's always there.

I kind of never To use it until I saw the need for it recently, and I was like, oh, great.

So what I am talking about is the CSS property called aspect ratio?

I am not sure how long it's been a thing, but let me share my screen here.

Do I don't think I am any audio, but I am not sure it just in case, but so aspect ratio.

I am going to post a link to this, in the That will be next to the recording so you can always check it out for yourself.

All right, so aspect ratio the aspect ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of Auto sizes and some other layout functions.

So the situation that I came into was that someone wanted to embed like a video player into their site, but the thing was It wasn't being responsive like it was just like this, like, tiny Square.

So it wasn't like, filling out the whole section.

And, so I was like, oh, yeah, you can just use aspect ratio.

Because previously you had to do like this CSS hack, where you had to add like padding bottom.

It was like 50 6.25% or some weird thing and like the with was like 100 and the height was like 100 or Autos.

And so, then when the thing when the views Support would go big or small, it would sigh it and you have to have like 50 6.25%, so that the bottom would always kind of like grow.

It was like the weirdest hack.

And so, but now we have aspect ratio where you just say.

Hey, my aspect ratios can be one by one.

So it's like a square.

So the first property is the remember, it's the with, let me see ya.

So it's with / height.

Right, and so it looks like you can set it for auto and so with an intrinsic aspect ratio that use that aspect ratio.

Oh, so I guess if the stuff inside has a specific aspect ratio, use that otherwise box has no preferred aspect ratio size calculation involving intrinsic aspect ratio always work with the content box dimensions, and we will talk about content box border box because that's a thing.

And then yeah, so ratio, so when you put actually something in there, the Box preferred aspect ratio is a specified ratio of with / height.

So remember it's with then Heights, but then if the height and the presenting / are admitted so The height defaults to 1.

So if you just put one value, I guess this is becomes like the with and then the height is just one.

I think that's what I get from that.

I never really played with always put both and so Yeah, so, okay, so if the is height and preceding / so this one and the slash before it aren't there like as it is here.

Height defaults to 1.

All right, so I guess it just goes by the with So then I guess you put a 2 here.

It'd be like to like with / one.

I am assuming.

So it's like just like math, you know, like if you ever have a one on the bottom.

It's like it's not there.

It's just a thing of the top.

So, all right.

Cool.

Then size calculations involving preferred aspect ratio work with dimensions of the Box specify specified by box-sizing.

Now, if I am not sure if you ever Like at the very top of your CSS stuff like with the star or if you do it on the body or whatever you sit like border, sizing box-sizing.

I always get that mixed up box-sizing.

So that is important because you can see here and then me so this is the Box sizing.

That it was referring to, I'ma put this in the thing here, so it will be next to the actual.

We call it archived video.

All right, so now here, so you see.

Okay, so we have this box.

So this the child container here, right?

So, that's what the CSS is on.

And it's box-sizing, is content box.

And the width is 100, right?

So, you can see within the parent container the, the contents of the child container is fitting 100% the with right.

Cool.

So that makes sense.

But now here what happens, still the same content box, but and the With 100, but let us put a border around it.

Right?

That's 10 pixels and a padding around that of five pixels.

So, let us see how that looks right.

So here we go.

So because yeah, padding is because it goes margin this, so from outside in its margin border padding and then like the content, right?

And then to check that, I will show you a trick that so here.

So now you see how it kind of leaves the parent container.

And that's because what happens is, you're adding the child container plus the border and then the padding Also, so that's why it's kind of pushed over.

Right.

And so now, if you didn't want, if that's not what you were expecting, we can do is border-box.

And so the border-box takes in consideration the padding and the width and the content and that makes that all under the 100 with 100 percent with right.

And so yeah, whereas other one is like, oh, the content box is going to be 100% with that.

Everything is on added on top of that.

Whereas with the Border box is like, all right, so I am going to The actual border and amongst all that in.

So like, yeah.

And then to check to see the same talking about.

Okay, here we go.

So in the inspect element, which is always found interesting.

So like you can see scroll down.

So here you go.

So like margin that so you can see as I highlight.

So there's the margin.

Like we said, it's 32 then we have the border which is 10, and then we have the padding which is 5 so, hopefully you can see that.

But yeah, so I always thought that and here's the content that Cool thing.

So the content and the padding and then it gives you the numbers.

So you can see it's 5.

And so that matches with what's in the code.

And then you see the Border again is 10 and then with the color of like the blue, and then there's a margin which I think is just kind of like is just what it was, like, calculated pretty much and so because I don't see it in here.

And yeah, so if you ever get confused, like what goes where you can kind of just look at it that way, it's in the browser.

So that always helps me out as well.

So, Yeah, cool.

That's it.

So you then you can see.

Again, it's all the same stuff except now that you make sure you get a 100% of the content box.

See right there whereas before.

So I think these chains, so 170, and 60.

Yes, it changed to 140 now because that 100% now applies to everything and not just the content inside.

So, but yeah, neither here nor there.

So, that was what that was talking about the box-sizing.

So when you're doing your aspect ratio it, depending on, whether you choose content box or the Border box.

That's how it's going to be.

So this kind of if it looks weird, check the box sizing, if it doesn't look how you want it to.

And so for the aspect ratio.

It's kind of like to visually see it.

So shout out to the folks over at web dev.

I always check them out for some stuff, and I am going to add a link to this so you can check it out.

So this is just part of the like, it's like a with layout patterns.

And so, it just kind of showing you the different patterns.

And so they talked about aspect ratio and then using it for an image card.

And so it says image.

I mean, it could be also for like a video because that was the use case I used it for.

But so alright, so we have the parent just like we had before as you can see from the box side.

So the parent container, right?

And then we have the card.

Which is the blue part here?

So the parent container is outside here, the white part, then we have the card which is the blue part here.

And you see we have the H1, the video title right there, video title.

And then we have this thing here, the visual div with the class visual.

So that's the green part here.

That's what this is.

This is the green part and then you see.

It says we have a paragraph tag with this trip.

Descriptive text goes, Here which is there.

So it's kind of like a basic layout of a car that you would have on a website.

Right?

So now you want let us say this is like a still shot like a screenshot from the video and the video is 16 by 9 and you don't want it to be all smushed and like, you know, smushed and so, and not, you know, portion it because sometimes you see some, some websites will have the picture and it will look good on like a bigger thing, but when it gets smaller, it gets all smushed, right?

So, take a look at the CSS.

So with that, we have the parent and it's display grid, Place item Center.

So that's entering the card in within the parent.

So it's entering it in here and individual.

Remember that was the green part, the class.

And so the saying the X, but X aspect ratio of 16, with by nine Heights.

And so a lot of videos are shot in Sixteen by nine.

Some are 4 by 3.

So you can also put 4 by 3 here.

If You wanted or whatever.

And so that way, it would also be proportionate.

So, you know, like what the video or what the image is already that you can set the aspect ratio so that it keeps that depending on the regardless of the size.

And then you see the card, the width of the card is 50% of the actual outer box thing here, and then display flex, and then you do column so that they align up and down.

I don't know if you needed to do.

It works because there are kind of already up and down.

But neither here nor there, and then they have a padding around the card.

So that's where you get.

That one REM around there.

Yeah, I do I right.

Yes, padding.

Yes.

Because here's the border, and they know their margin out there.

Yes Patty.

Again.

We can always check out the Spectre tools when in doubt, check out the inspector tools that didn't show up when in Nashua.

Inspect.

So yeah, so here we go.

Select the right one card.

Here you go.

So card.

So it has a border like a little slight border.

And then there's the padding, which was like, the one REM, REM is like whatever the default font size is.

So that's why it's 16, and then we have the inside.

So there is the padding.

From the one realm.

So, yeah, so that's why we have the little spacing between their cool.

All right.

Um, oh, yeah, so I wanted to resize it so you can see that it keeps the thing here.

Hook up.

No, come on.

So you see how it is there?

And then woopsie.

It keeps the same aspect ratio regardless of how small it is.

Or how large it gets?

So yeah, so I just don't want to talk about that because it came, it came.

I came across it like in the real world.

And so I had those a need for it.

And so, yeah, so that's pretty much it and I just wanted to talk about that.

I thought it was cool.

And so yeah, so they have a bunch of other stuff here as well.

So like clamping a card.

I think I spoke about the clamp CSS.

Before that thing is super cool and it's kind of like it does.

Like it's like a function and people say, CSS is not like a programming language.

I get like this is the men that Could be, this is the max that it could be an in.

This is what it's going to be in between and that's this just super cool.

Yeah, yeah.

Min max and actual size for the card and so it's not this little warning thing means that it's using a container query thing.

And that's not really big tin to the browser yet.

So, what else?

Oh, yeah, and then you have the different things here.

And what's cool is you can like resize them.

So you saw that switched, and they give you like the CSS for that.

No JavaScript needed or anything like that is just pretty cool.

So yeah.

So if you ever want this sort of, you know, a layout for your sites and things, they kind of show you how to do it.

It's called a deconstructed pancake and the Holy Grail.

One is pretty much like almost every website is laid out.

So, you know, the header and the footer am over time now, so I am definitely gonna have to stop.

So you see how the center section gets bigger.

That's really how it goes and then you get small.

So normally it would all go on top of each other when they have that.

All right, neither under there.

I am blabbing on.

So again, the internet is super powerful, and it's super dope.

So, all right, get your ass back to work.

So again, thanks for hanging out and stop screen sharing with send you all with some traveling music.

And I am going to go and actually do some actuals like work.

So, all right, here we go.

So this song is Anthony Cruz, AKA butter.

The track is called.

Thank you.

And I want to thank you all again for hanging out.

So see you 15 minutes after the hour.

All right, enjoy.

Hopefully that helped with the aspect ratio, so maybe now, you know about you have in your back pocket, and you can see that used for it and I go I know about this thing.

So, all right, cool.

Thanks again.

Talk to you later, Anthony Cruz.

AKA butter.

Thank you.