00:00 I'm going to scroll down to the unordered list section where we're going to do our work. We've been flip-flopping between grid and Flexbox up to this point, but in that case, I think that we need to use Flexbox, and let me tell you why. This element here, the last one, is sitting in between the two columns here.

00:17 So if we had a grid, that would be really, really hard to achieve. We would have to have extra grid and make elements use multiple grids. So this one can use grid 3 to 5 or whatever chaos would happen. So when you need elements to spread, also worth noting, there is 3 and then 4 and then 5 and then 6.

00:37 It looks like we want the element to spread to the right, based on whatever available space there is. And that's what I meant before, when you want things to use the space available, this is a really good use case for Flexbox, and it's much more adaptable and powerful than grid in that regard.

00:53 So we're going to use Flex and then make the Flex container wrap to achieve that effect. So I will add some classes to my UL and I'm going to set it as a Flex. And let me show you what happens if you just set Flex. Flexbox is going to try to put every element on one single row, based on the available space,

01:12 and then scrunch, squeeze, or actual shrink is the right word, each element. Here, we don't want our elements to shrink. Instead, we're going to tell the Flex container to wrap with flex-wrap. And now the elements will keep the same size, and when there's no more available space for one, it'll wrap to the next row.

01:30 But look at this, as there is more space, elements fill up the horizontal container first before wrapping. This is very powerful and this does not happen at all in CSS grid land. So here, Flex is clearly a better choice, whereas before for the layout containers, I think grid made a little bit more sense.

01:49 On the design, we have clearly the last elements aligning in the center. So we want to center align our wrapping rows, and we can do that with justify-content. So I'll add here justify-center to center it. So you can see now it's centered and the last elements come to the middle.

02:07 I've turned on the Flex visual dev tools. I don't know if it's useful or not, but that shows us that there is no gap between elements. They're all snug together. So the next thing we can do is, according to the mobile design, have a gap of eight, which is level two.

02:23 Here, I will add a class of gap two to create this two pixel gap between each tile. Beautiful. As of now, the elements will spread out for the whole width, no matter how wide our container is. We do not want that.

02:38 Instead, we want to clamp the growth of this to, let's see here, this container. This is the logo list. You can see a width of 768 pixels. So let's see if we can find a max width container that matches that 768 pixels.

02:57 Like we did for the content section, we'll go max width. And so empty was 448 and it looks like bingo, bingo. 3XL is perfectly what we're looking for. So if I add this, now we will stop the growing nonsense after a certain width.

03:17 And this is looking fabulous. Nice. So that takes care of our actual UL container. And now we can go and style the individual elements. I don't want to style the LI items themselves. Really, the LI element here is here mostly for semantic and correct HTML reason.

03:37 We are in an unordered list and the first child item in ULs needs to be an LI. But we really want the entire surface of the anchor tag clickable. So we're going to apply the styles on the A tag directly. That includes the padding, the background color. And this is going to make it easier to make the whole thing a link.

03:55 So if I look at the mobile design, each tile looks like it has a padding of 16 before the image inside of it. It has rounded corners as well. You can see here the value is 16. So border radius of 16, padding of 16.

04:12 And so that the image doesn't go crazy big, we are going to have a fixed width. It looks pretty intentional here of 80 pixels by 80 pixels. You can see that if I go to the bigger sizes, this changes to 96 pixels later. The gap changes and a few other things change.

04:30 But it's quite clear that the tiles have a set width and height. Sorry. So we're going to go back here and set it to 80 by 80. So we need to do the size, the background color, the gap, and the rounded corners.

04:46 And for the background color, you can see we're using this 7% opacity highlight color. I think that's all we need. Let's go and do that. So I will add some class names to our anchor tag. Let's start with the size. So we want 80 by 80. So I can go size 20, just like we did for the logo.

05:06 And now that we're doing this, we should probably remove this placeholder class that we had on the images. Remember, we set the width to 16 so it didn't grow crazy big. But we can remove that for now. And it looks like we're doing something wrong. Oh yes, I know what's going on.

05:21 Because the anchor tag by default is an inline element, it's not going to respect the width and height. If I set it to block, this would fix the problem. Like so. We're going to end up changing this to a grid container later. But let's go with that for now. So now we have our size. Let's maybe add the padding.

05:39 So remember the padding is 16 pixels, so level 4. So p-4 will do the trick. And I think next we can add the background color to add a bit of splash. So bg highlight. But if I go with just highlight, it will be the full opacity highlight color. What we want is the 7% opacity.

05:57 So Tailwind has nice inline opacity modifiers for colors. So I can go where the bg highlight is and go slash. And you can see I have 5%, 10% suggestions. 10% would look pretty close. But we're trying to go for 7% here. And we want to go pixel perfect.

06:12 So because 7% doesn't exist in the default values, I will pass an arbitrary value here of 7%. And this will generate a background color which is 7% alpha transparent. The last thing we're missing is the border radius. And we can do this with rounded. And we wanted 16 pixels, remember?

06:32 So it looks like 2xl is the one we're looking for. And it's looking really good. The last thing that is not correct is the images are not always vertically centered. I mentioned I was going to change block to grid. And that's exactly why. If I change this to display grid, I can then easily center the image vertically and horizontally

06:52 with a good friend place items center like so. And I think that we are all good to go with that. So let me remove the overlay of the dev tools. So we have our actual clean design. And if I grow the width, you can see the elements readjust.

07:12 But they will eventually stop growing at a specific width which is very, very, very cool. And you know what? I know of a pretty brutally honest way to verify how close we are to the design. We're going to do the dreaded screenshot overlay test.

07:28 For that, I'm going to make sure that my UI is zoomed at 100% level which is like that. And I will do the same with option 0 in Figma to set it to 100% zoom level. I also need to remember because I zoomed in the actual UI of Figma to make it easier to read.

07:44 So I want to make sure that the interface scale is reset to default. And now we are at the actual 100% scale. So let me hover on one of the elements like this. So we have clear proof that this is the Figma UI. And I will take a screenshot of all of this.

08:04 And so to be precise, we need to know the width of this container here. And it looks like it's 320 pixels precisely. So with my screenshot in the clipboard, what I'm going to do is make that bigger. Open the dev tools in the same window on the right.

08:22 And now look at this, I have a browser extension here called perfect pixel which matches the workshop name pretty nicely. Hang on, this is a bit confusing. So I'm going to make that bigger again. This is a previous image that I've used. So what I'm going to do is now upload the image that I just took. I have it right there.

08:41 So I'm going to drag it here. And so that image here, let me set the opacity to 100% is the image we just took in Figma together a second ago. So what I'm going to do is try to overlay it over the UI at 320 pixels precisely.

08:58 Let me move that to the bottom left here. While I set up, I can minify that. I'm going to set up my width back to 320 pixels. All right, now we should be good to go. So I'm going to take that image here and see how precisely it stacks over. Moment of truth, ready.

09:21 Whoa, what do you think? That's looking pretty close to me. I will play with the opacity of it. And the only thing that changes slightly is if you look at the SVG elements here, they're exported slightly differently. But we've done a pretty bang on design job.

09:47 Uh, the stuff is looking exactly the same. Let me put the opacity bigger again. Um, this falls in what I called pixel perfect territory. You can see if I place it right on, it is literally pixel perfect. Woohoo.

10:07 All right, I am going to give us two thumbs up on the screenshot overlay test. This is looking really good.