Building the UI: HTML

[00:00:00]
>> So here we're gonna take a bit of a detour. And we're gonna just focus on the HTML, the CSS, and get everything looking nice and available. Again, I wrote a decent amount of the CSS for you, and then we're gonna write some of it together. I wrote all the animations because I'm not a CSS animation person.

[00:00:15]
It took me a while to write these and I'm probably not the best person to teach them to you. But there's great courses on CSS on Frontend Masters, so definitely go check those out. Okay, so let's go back to our editor. And I'm just going to close this.

[00:00:36]
So the first thing is we're gonna over to index.html, and we're just gonna put some more stuff in here. So inside of the head, we need to import our CSS. So the first thing we're gonna put in is a link to a stylesheet. And the first one we'll put in is ./sprites.css.

[00:01:01]
Okay, and you can even look here in as soon as I did that we got a nice little background cuz I set up that for you. And again, I'm assuming that you're doing this with the sprites.css there, the background, and the pet, that should all be in this source directory.

[00:01:20]
If not, you should go grab that now from the repo. Okay, we're also gonna put one in here, href equals and we're gonna make one of our own, which we haven't created yet called style.css. Okay? And then let's go down into the body. So and it will put down there at the bottom.

[00:01:51]
The first thing is we're gonna have div class="container". Let's commute the container for the entire course of the game. So I'm gonna show you a little hack that I do with VS code now. You saw I can type out div class="container" or with VS code has a thing called Emmet built into it.

[00:02:15]
It's what generated our HTML shell for us. If I put .inner, like the CSS selector for that. And I just hit tab, it'll complete it out to full HTML, Which is pretty nice. Emmet is available for other editors as well just search. I think it's emmet.io, E-M-M-E-T.io. Okay?

[00:02:42]
And then we're just gonna put some more divs in here that we can use to style. So we're gonna put .game .day cuz we're gonna start a game in day. We're not gonna put anything in it. We're gonna put .fox .hidden. Not put anything in that. We're gonna put the poop back, that's very important poop-bag and that's gonna be hidden upfront as well.

[00:03:11]
Then we're gonna put the foreground, -rain. So when it rains there's like the the rain that actually comes down. That's what this is. We're put the frame which is gonna the game frame, like the actual plastic part of the game, right? That's what the frame is. And then we're gonna put a modal, M-O-D-A-L, that's the name of the element that like pops over with the text.

[00:03:42]
It's purple in the game. And inside of modal, we're gonna have .modal-inner. And inside of that, we're gonna have Press the middle button to start. Okay, we're getting close here. So outside of modal, One thing I wanna say is if you're trying to follow along with My CSS and using spreads.css, you do need to have the same structure and the same CSS classes as me or My CSS is not gonna work for you.

[00:04:20]
So it's important that you copy this kind of exactly. And if something's not working, just go copy and paste the index.html from any one of the sections from the repo. Yeah, just grab it from the next milestone. That's probably what I will say. So underneath the modal, we're gonna make a div and call it buttons and inside of that, we're gonna put buttons.

[00:04:49]
And then inside of the buttons, we're gonna have three different buttons. So we're gonna do .ptn, and we're gonna make three of them with Emmet. If I put the times 3 there, it'll actually generate three exactly of what I put in. So now I'm gonna have three buttons in here.

[00:05:05]
One of them's gonna be the left button. As you might have guessed, this one is the middle button. And unsurprisingly, the right button. Underneath the buttons, then we're gonna have icons. So here we're gonna put in icons. And inside of that, we're gonna have three icons, so .icon*3.

[00:05:35]
And here we're gonna have highlighted for the first one cuz it's gonna be highlighted at first. The fish icon, the poop icon, and the weather icon. And these are all the different things that they can select, right? Okay, so you should be able to save that. And if we look at our terminal, it's probably gonna be upset.

[00:06:10]
I'm getting some crazy error. The problem that we have right now is we don't have a style.css and we said that there's gonna be. And so Parcel's upset that we're trying to reference a file that doesn't exist, right? So the next thing we're gonna do is we're gonna go make that style.css so that it stops yelling at us that doesn't exist.

[00:06:28]
So make a new file inside of your source directory. So fox-game, here inside of source, we're gonna make a new file called Style.css. Okay, we're not gonna do anything with it right now, it's totally fine that it's empty. An empty CSS file is still valid. And I'm gonna just stop and start my server again.

[00:06:53]
And you can see it's happy now. So if I refresh, we kinda see this, it's just a bunch of stuff on a page. But you can see here's all the stuff I've kinda done for you. Here's the icons, these all have hover states and active states. If I press the button, they go red.

[00:07:12]
But nothing's happening. It's all style with no brains, right? It has no JavaScript associated with it. So it's not gonna do anything. But you should be seeing something akin to this. If you don't, don't worry in just a second there's gonna be another milestone which is css-completed. And you can just grab all that stuff and if anything here fell behind.

[00:07:36]
And the next thing we're gonna do is we're gonna write a bit of CSS to make this all look nice.