All right, it is time to start a new Laravel project and start scaffolding our application. So I am going to do my favorite thing, which is Laravel new. And we are going to create an app. Let's call it desserts. And here we are not going to select a starter kit. We 're going to start from scratch. We don't need users. We don't need React or live wire of view. So let 's select none and keep going. We can keep past for the tests. And when the next question about a database comes

and keep going. We can keep past for the tests. And when the next question about a database comes will select SQLite. Once this is done, we are going to yes, run npm install and build. All right, so everything is done. So let's open our project in a code editor. And so here we are in a brand new Laravel application. And if I run composer dev, it's going to kick off all the things and we'll be able to open our app. And here it is a beautiful Laravel 12 splash page.

things and we'll be able to open our app. And here it is a beautiful Laravel 12 splash page. Okay, this is our basic Laravel setup. Let's now bring over the files from the challenge and see what we can do with them. We won't use all of them, but let's go and create a new folder on our project. And I'll call that challenge files. And then we can bring all the files that we 've looked at in the previous lesson and put them inside that directory. Okay, I see a few interesting things here that

previous lesson and put them inside that directory. Okay, I see a few interesting things here that we'll definitely want to use. For example, the images, we are going to want to bring that in our app. Well, it is in our app, but we want to place it in the right place, I guess. The fonts, we might use Google font for that. And the data, which contains all the data we're going to import, we want to probably collocate with the database cedars. So maybe let's do that first. So I will

we want to probably collocate with the database cedars. So maybe let's do that first. So I will locate the database and then cedars folder. And then I will drag the data that Jason inside that folder. Like so the next thing I want to do is to move the images in the resources directory. So again, let's grab the images. I don't think I want the fonts. And I'm going to drop the images in resources like so. Here it is. Okay, next, I remember there was an HTML file . Here it is part

in resources like so. Here it is. Okay, next, I remember there was an HTML file . Here it is part of the challenge. And that's a starting point. So let's look at what's there. Okay, there's a little bit of styles. Okay, that's just text. We are not going to use this, we will use the database data instead. And I guess the styles were here to cover, yes, the attribution here. So there's really nothing special about this file. So I think we can skip it. We might steal the title here.

nothing special about this file. So I think we can skip it. We might steal the title here. But what I'm going to do instead is use the welcome that played that PHP starting point, which is the larval default view that one. And here we're going to get out a whole lot of things and use that as a starting point. All right, so let's replace the title. Although we should go in the dot n file and have the app name, but here I'll paste it like this. We are not going to use

in the dot n file and have the app name, but here I'll paste it like this. We are not going to use this font. And then we'll simplify a whole lot of things. Okay, let me collapse this elves block here. And I think instead of having all the tailwind styles in line, we will just have the vid directive here. So we are loading the app that CSS and app.js files. And then we're going to completely override the whole body tag with a fresh new one. And let's have each one tag that says

completely override the whole body tag with a fresh new one. And let's have each one tag that says front end mentor challenge with larval. And let's go take a look at our beautiful work. Pretty nice. That's it challenge done. Let's ship it. Now I'm kidding. So what should we do next? I have a few things in mind here. But why don't we take a look at the actual readme file that tells us what we should be doing with this challenge. So if I go to challenge files,

tells us what we should be doing with this challenge. So if I go to challenge files, and then look for the readme.md, let's quickly go over these together. The challenge is to build the product list that include functional cards and get it looking as close as possible. Okay, use any tool that you like to help you complete. So I haven't even specified, but we are going to use Terwin CSS for the styling. And then we have larval with blades templates. And that should be

use Terwin CSS for the styling. And then we have larval with blades templates. And that should be all that we need to complete the project. So a user should be able to add items increase. We are going to cover all of this later. But since we are in the setup stage here, I want to make sure that we codify things like the colors and the font family, which is different. So yeah, we're going to look at this style guide here and try to codify this into our project

So yeah, we're going to look at this style guide here and try to codify this into our project before we move on. I realize I haven't really showed you any of the images or the design that we're actually going to build. So let's take a quick look at the images provided in the project files. And then we look at the style guide and see how we can bring that along in our project. So in the challenge files, we have a design directory. And then here's one of the images,

So in the challenge files, we have a design directory. And then here's one of the images, hopefully that's big enough. So we basically have a three column grid of desserts or products, and then the shopping cart on the right. And this one, nothing is selected. But then there is an image where some of the products are selected. So you can see that the add to cart button turns into a plus minus increment decrement UI. And any element that has been selected is added to the

into a plus minus increment decrement UI. And any element that has been selected is added to the shopping cart with the quantity. So we have four vanilla bean creme brulee, yum . And then we have one tiramisu. Just saying how fitting that there was one French pronunciation and one Greek pronunciation. I am Swiss. I grew up speaking French and my dad is Greek. All right, so fairly basic design. And then there is an order whenever you click confirm order. This is going to have this

design. And then there is an order whenever you click confirm order. This is going to have this little model. So before you start thinking, Oh my God, we need JavaScript. We need the component library for the model. No, we don't. We can use the HTML pop over attributes to turn any element like a div into a really nicely styled pop over model. And we can use that without any JavaScript. All right. And beyond that, we have a few more mockups. This is basically the same things,

All right. And beyond that, we have a few more mockups. This is basically the same things, but for mobile. So we can make sure I think is responsive. And it looks like the cart is stacking below the list of products. And the last image we have is these active states, which I guess shows the hover states like the plus minus the hover state on the button. This is really nicely done. You can see the color change here. I like when you have this little,

This is really nicely done. You can see the color change here. I like when you have this little, I can place it on an exact same spot. I like when you have the little mouse icon that kind of shows the intent of, Hey, I'm hovering. And this is what it should look like. All right. And if you have an astute, I, you will notice that the font is not the typical default sensory font. This is a custom font. Now we have a fonts folder here, which probably contains the font files. And yes,

custom font. Now we have a fonts folder here, which probably contains the font files. And yes, it does. It's called Red Hat text. But from my glimpse into the style guard just before, I have noticed something interesting. And that is that the font is available. Whoops, wrong file. This is the style guard. What I have noticed is that the font is available as a Google font here. Ta-da. And so what I'm going to do here is use the font from Google font instead of loading the

Ta-da. And so what I'm going to do here is use the font from Google font instead of loading the static font. If you want to, if you follow along and you want to download the files and load the fonts locally, by all means, please go ahead. But here I am going to use Google fonts. And so back to the style guard, this is our next step. What we want to do here is bring these colors here into our design system or our tailwind theme, I should say. And then we want to bring the custom

into our design system or our tailwind theme, I should say. And then we want to bring the custom font, which is Red Hat text. This is what we're going to do in the next lesson. You best believe I'll see you there.