00:00 All right, it's time to dive into the design implementation. In this exercise, we're going to focus only on the mobile design. So looking at the Figma file, I'm talking about the one on the left here. And before we think about doing responsive adjustment for the breakpoints, we're really going to try and nail down the mobile version of the design. We're going to break things down in three

00:19 segments. We're going to have one segment for what I call the content section, which is the logo, heading, and paragraph. In another segment, we'll look at the list of logo, the logo tiles here. But before we do both of these, we need to think about the structural layout of the page. Now,

00:34 I know I just said to not worry about the other breakpoints, but looking at how the design evolves throughout the breakpoints actually gives us some insights on how we should structure things. It's pretty clear that we have a section on top and bottom all the way to that breakpoint,

00:50 which, if I open the sidebar, is the LG breakpoint. But then at the XL breakpoint, we switch to a side-by-side layout. So to me, this screams that we're going to have some sort of flex or grid container, which is stacking vertically and then horizontally. To be able to

01:06 better study the sort of layout that the designers had in mind, we can turn on dev mode here. And this is going to give us a lot of insights on the different sort of containers and the spacing between them. Like here, you can see there is a 96-pixel gap between the left and right side.

01:22 Let me hide the sidebars so we have more space to work with. Let's go to the first one here, the one we're building. And actually, I'll bring back the left sidebar. So if we look at our mobile breakpoint here, we have that container that seems to be the main wrapper that could be a div that

01:37 wraps the entire UI. Inside of it, we have a layout wrapper, which seems to be the common parent to the content section I was mentioning and then the logo list. So again, this could be probably a div with a class of either flex or grid. And then inside of that, we have the two

01:56 common children, which is the content and logo list. So I feel like inspecting the structure of the layout in Figma, if it's done well, is really helpful to recreate the same approach in code. So we have one outer div and then one inner div, which is a parent wrapper for these two elements.

02:14 This is going to carry through the whole way. And at the Excel breakpoint, this is just going to flip side by side. But once again, we have the container, the layout, which is the common parent for the logo list and the content. All right. So once you work that out, you're going to focus

02:29 solely on the mobile version of the design for now and try to replicate as close as possible the typography here and then the logo list. That's what you're going to do in this exercise. Good luck. Have fun. And I'll see you on the other end.