All right, we're back in the designer saddle and we're going to do some UI work . Okay, so remember we are not working of Figma files, but just of pictures. And I think this is fine. So I've pulled the image here and also have the mobile version and a few other screenshots provided. And as a reminder, this is what our welcome page currently looks like. As I mentioned earlier, I'm not going to try to go for pixel perfection here because we want to move fairly fast, but I still want to do a decent job and we definitely going to

because we want to move fairly fast, but I still want to do a decent job and we definitely going to make our design match the design pretty closely. So the first thing I would look at, I guess, is the maximum width on desktop so that we can have a max width container. So what I'm referring to is the container width from here to there. Obviously, we can't measure with this measuring tool because this is a picture and the width will change depending on how zoomed in I am. But you might

because this is a picture and the width will change depending on how zoomed in I am. But you might remember that in the style guide, we had a mention of the dimension for desktop and it's 1440 pixels. So we're going to use this width as our max width container for the design. Now, if I go to the tailwind docs and look for max width, you will see that there are preset utilities that go all the way to 7 XL , I believe, which is still not enough. But a new feature in Tailwind 4 allows you to pass any number

, I believe, which is still not enough. But a new feature in Tailwind 4 allows you to pass any number here and it's going to automatically create this width for you. So we can use max w 1440 here and that's going to set up our exact maximum width that we want. All right, so let's go in the welcome that blades that PHP template. This is our head tag that we don't really need to care about. And so I think here because there is no bits of design spreading wider than the max width container, I can

I think here because there is no bits of design spreading wider than the max width container, I can put the max width directly on the body, max w 1440. But actually, I just remember that yep, tail wind has that scale of fours. And so our value is four times too big, we need to divide this by four. So 1440 divided by four is 360. So here we're going to go 360. And this should give us a value of 1440 pixels. Of course, you could always have used 1440 pixels as an arbitrary value. And that

1440 pixels. Of course, you could always have used 1440 pixels as an arbitrary value. And that 's also going to work. And it might be simpler for you. But here, let's go back to 360. And let's also center this container with MX photo. And just so that the content doesn't touch the edges, especially on mobile, we're going to go px dash four. So let's take a look. And okay, it looks like the center alignment is not working. But I believe it's because 440 is wider than our current screen

the center alignment is not working. But I believe it's because 440 is wider than our current screen resolution. If I was to zoom out, eventually you would see the container that must be using something like this. So this is working, we just happen to be in a silly zoomed in resolution for screencasting purposes. Okay, we've got a max with container. The next thing I want to do is set the overall layout where we have the product grid on the left, and then the shopping cart

set the overall layout where we have the product grid on the left, and then the shopping cart on the right. These are really the two sections of the design. We have all the desserts here, and then the shopping cart. And remember, on mobile, they stack with the products list first, and the shopping cart below. Now remember, we can't measure dimensions, because this is just a picture, we don't know at what zoom level we are. But what we can work out is the proportion

picture, we don't know at what zoom level we are. But what we can work out is the proportion of the sidebar, as opposed to the main area, I guess. So factoring the gap in the middle here, let's measure from here to the edge sort of roughly 620. Okay. And then if we go the other way, although I'm not exactly in the middle, we have 320. Again, that's rough. So we 're pretty close to 620 and 310 here, which would be two-third, one-third. But that's on desktop. And I don't know if we

620 and 310 here, which would be two-third, one-third. But that's on desktop. And I don't know if we always want to third, one-third. The other school of thought is to set a fixed width for the sidebar, and then let the product area occupy the rest of what's available once the sidebar has taken the space it needs. So 1440 divided by three is 480. So we could have the sidebar to have a constant width of 480, and then give the rest of the space to the grid. Let's try that. That might be a little

width of 480, and then give the rest of the space to the grid. Let's try that. That might be a little bit too big, but there's really no way to figure it out before we try. So let's use that as a starting point, and then we can adjust if we need to, we can again set the grid directly on the body tag. And maybe let's set it from the SM breakpoint. It might need to be MD, but let 's go SM grid, and then SM grid. And here we'll have arbitrary values. So we want one FR, as in whatever's left,

and then SM grid. And here we'll have arbitrary values. So we want one FR, as in whatever's left, after we have given 480 pixels to the second column, which is our sidebar. And whoops, it's got to be grid calls. So you see it's creating grid template columns, one FR for 80 pixels. And so now directly inside of it, we're going to have two sections, the main product list. And let's have an aside, which is going to be the shopping cart. And I'm going to delete

And let's have an aside, which is going to be the shopping cart. And I'm going to delete everything else on the page. So this is our setup. It does feel like the sidebar is going to be way too big. I think I'll try 400 pixels for the sidebar. And you know what, it's kind of hard to tell without the background colors. So maybe real quick, let's give some classes to the aside, BG white, P dash six, and let's give it a height of 80, just so it has some dimensions.

BG white, P dash six, and let's give it a height of 80, just so it has some dimensions. And then I guess we can give the body this background color, it's probably rose 50. But here, let's give it just BG rose 300, just so we can see the white box very clearly. Ah, interesting. Remember how I thought that with the red green primary colors and then the rose scale, we had all the colors we needed to do the UI. Well, I was wrong. It looks like we need white

scale, we had all the colors we needed to do the UI. Well, I was wrong. It looks like we need white as well. And we've wiped out the white with all the other colors when we set the colors to initial. So let's bring back just white in app that CSS, we are going to where the colors are. Also bring dash dash color white and show we can use HSL. You don't have to use HSL, but because all the other colors were set this way, I think it makes sense. Okay, so I think this is still a little bit

other colors were set this way, I think it makes sense. Okay, so I think this is still a little bit too white, but we are going to add some gap to the grid. So maybe it's not that bad, actually. Okay, let me set the background to this very pale rose. And we'll also take care of the vertical padding. So instead of BG rose 300, let's go with 50. And then we'll have a generous vertical padding of py 16, I guess. All right, this is looking a bit nicer. Now you might not see this

padding of py 16, I guess. All right, this is looking a bit nicer. Now you might not see this with the screen recording, but I definitely see it. And it's definitely seeming to match the design. So if you don't see it, that's a problem, because you won't see this one either. I want to do one more thing. I want to increase the gutter on the sides on desktop. So for now, I have px4, but we should keep that on mobile. And then I'll do something that you might have seen

I have px4, but we should keep that on mobile. And then I'll do something that you might have seen everywhere in telling you I components, SM px6 and lg px8. This is a very common progressive gutter spacing pattern. And it's engraved in my brain forever. All right, so we have the overall layout in place. Let's see about the collapse to stacked. So obviously here, this is not going to work. This is too small. And then here it switches to a one column grid. But I think we should

to work. This is too small. And then here it switches to a one column grid. But I think we should probably either wait to the MD break point to switch, or maybe make the sidebar a bit smaller until before it reaches the full width. For now, let's switch to a two column grid at the MD break point. And we can adjust the sidebar width later. Okay, since we're working on the overall layout, I want to do one more thing before we wrap up this lesson. And it's

on the overall layout, I want to do one more thing before we wrap up this lesson. And it's to set up the product grid. So we could use grid, but we could also use flexbox . I think I'm going to use grid here. I mean, both would work, but here this is pretty clearly a grid. So obviously on desktop, we have a three column grid. And then we'll have to decide when to make the changes so that it looks the best it can. So let's go inside the main tag here. And first,

the changes so that it looks the best it can. So let's go inside the main tag here. And first, let's have a h1 tag that say desserts. And let's give it some classes very quickly text for Excel, font, medium or bold. And see, I like that we customize the font weight. So we have less choices. Let's try that. All right, that's good enough. And then below that, I'll have an noted list. Well, why don't we bring our for each product as product and for each. But instead of having data

Well, why don't we bring our for each product as product and for each. But instead of having data here, I'll just have a list of L items that have a few classes, BG rose 400. Let's give them an aspect of square and rounded Excel. So that should give us nine squares. Of course, right now, they're stacked on top of each other. So this is really not what we're trying to do. But we can give a class of grid to the UL. And then let's go grid calls three, we'll need to adjust that at

give a class of grid to the UL. And then let's go grid calls three, we'll need to adjust that at different breakpoints. And let's have a gap of four. All right, we're getting somewhere. We still need some spacing from the title. And we also need the gap on the parent grid between the products and the shopping cart. So the gap here looks just about right. But we need to have a bit more between the two. Maybe I'll go with gap eight here for the main grid. So on the body tag,

more between the two. Maybe I'll go with gap eight here for the main grid. So on the body tag, remember, this is where we set the grid here. Let's go gap eight. And you know what, I just realized that while we want to have two columns at the medium breakpoint, we actually want this to be a grid from the start. So it's going to just stack vertically until we introduce the second column. So I think removing the empty class on the grid class sort of makes sense. All right,

column. So I think removing the empty class on the grid class sort of makes sense. All right, that sort of works. I really don't vibe with this rose 400. So let's change the color and add some vertical spacing. I'll probably go with empty 10 here. So on the another list, empty 10. Again, I'm eyeballing everything here. But this is pretty representative of how I design in the browser. I just try things and then nudge it if it needs to. And like I said, let me change the rose to 100.

I just try things and then nudge it if it needs to. And like I said, let me change the rose to 100. So it's a little bit less sad. All right. And look at this, we have something that starts to look like something. We have a grid of desserts, the shopping carts. There's still probably some improvements to be done. For example, this is way too small here. But we're getting somewhere. And here we've reached a point where the shopping cart has gone to the bottom. This is going to be

And here we've reached a point where the shopping cart has gone to the bottom. This is going to be the awkward teenage width that we need to work out what to do with. But let's try to work our way back from mobile. So we will start with one column only. So this is the grid. So let's set LG grid calls three. So now we're going to have one column. And then we are eventually going to reach a point where this is too big for sure. So maybe at the SM break point, let's go grid calls

reach a point where this is too big for sure. So maybe at the SM break point, let's go grid calls two. All right. So now we go from one column, two columns. And eventually at the empty break points, the shopping cart will come. But here, this is again too little because we've introduced the shopping cart. So we need to go back to one column. And it starts to feel like this is something where we should let the container size decide what number of columns we want. But here,

where we should let the container size decide what number of columns we want. But here, let's go with that empty grid calls back to one. We might have to go LG two and then XL three, let's see. So far, it's working. We have one column, then two columns , then back to one column. And then it's going to jump to three, probably yep, too early. If you imagine the text and all that's not going to work. So we will go, let me copy that

If you imagine the text and all that's not going to work. So we will go, let me copy that LG grid calls two, and then on extra large grid calls three. And let's look at the whole sequence one more time. On mobile, we have one column, then eventually we have two columns, then the sidebar shopping cart arrives. So we go back to one column, and then two columns. And eventually, at the extra large break point, we switch, I'm going to have to zoom out to trigger

at the extra large break point, we switch, I'm going to have to zoom out to trigger the extra large breakpoint here. And for the rest of the video, I might be zoom ed out at 90% so that we can see the actual desktop dimensions. My default dimension of 12 AD is actually not wide enough for the extra large breakpoint. All right, we've got our overall layout in place. In the next lesson, we're going to transform these boring squares into an actual product

In the next lesson, we're going to transform these boring squares into an actual product out. See you there!