00:00 Before we put our designer hat on and start building this application, we need to do a bit of setup to make sure we start off the right foot. Let's take a look at the Figma design file and I'll show you what I mean. This is the file that we've got given and we're tasked to convert to a Tailwind website. As you can see, there are multiple screen sizes, five of them here,

00:18 which represents different breakpoints. Then it looks like the designers also provided information about colors, typography, and also some interaction states. In this first exercise, we're going to do two things. We're going to make sure that we can support these colors and typographies that are presented in the Figma file. But even before this,

00:37 we want to be thinking about the HTML structure of the element. To me, this is an H1 headline, for example, that is clearly a list of items, so maybe an unordered list. That's why in this first exercise, we're going to spend a little bit of time thinking of

00:52 the HTML semantics for this project before we start implementing the design. I hope you have fun with this and I'll see you on the other side of this first exercise.