It gives us some terminology that we can work with. All right, let's get going. Now keep in mind, I'm going to set up a Laravel project, even though I don't think we'll have a back end in this series. Maybe eventually, I will set up the ability to track your scores and have reporting, but that will not make it into this series. So I'm mostly doing this just to have a basic app structure and build process up and ready to go. But yeah, if you don't use Laravel at all, don't worry. It won't interfere.

But yeah, if you don't use Laravel at all, don't worry. It won't interfere. All right? Let's open this in my editor. All right, so let's begin by going to my webpack.mix file, and you'll see by default it compiles down your JavaScript and your CSS, and that's fine. So if we have a look here, by default, this pulls in a bootstrap file, but we don't need that. So I will delete it, and then the CSS file should be blank. Okay.

So I will delete it, and then the CSS file should be blank. Okay. Next, Laravel loads this welcome page that's bound to the home page or the home route. So let's use that, but I will replace it with this, and I'm going to call our application try cat. A little weird, but it's because whenever I would create those paper wordles for my daughter, her first guess was always cat. She'd say, try cat. So that's what we're going to call the app, and we'll say, try cat, and let's view this in the browser.

Let's go ahead and add that. So I will add our script, our style sheet. And then while we're here, let's also reference the compiled JavaScript file that we'll have. That'll reformat, clean up a little bit. Yeah. Cool. So, yeah, let's go ahead, install my dependencies. All right. So that installs Laravel Mix. I can go ahead and compile that down.

So that installs Laravel Mix. I can go ahead and compile that down. Cool. So now, yeah, if we take a look in the public directory, we should have those files that we need. Okay. But yeah, I'm going to boot up our watcher so that I don't have to worry about that again. So first step, HTML and body. We're not using Tailwind in this series. We'll have a height of 100%.

We could use Flexbox. We could even use CSS Grid. For example, if I set a display of grid, let's see, grid-template-columns. And we want, what, three that are the same size? Yeah. And that will give us, if I select here, that will give us a three by three grid. Okay. Let's add that. Now, how big should each tile be? Maybe we give it a width of 50 pixels and a height of 50 pixels?