CSS Project Solution: HTML

[00:00:00]
>> So again, the project we were working on was this, Coffee Masters. Let's just break it down piece by piece how I did it. And again, this is just one approach to it, you don't have to do it my way. You could have done it any way you wanted to.

[00:00:16]
So let's take maybe a look first at my HTML here and how I modeled it. So I had my style sheets here that I declared, I got my Google fonts here. Okay? And we have a nav, let's make this a lot bigger. Have a nav, and that's gonna contain this Coffee Masters top part, right?

[00:00:47]
So has a nav, has a brand and has an image in there and Coffee Masters. And then I have a page here, two pages like basically everything underneath the nav. You might ask why I didn't put the nav inside of the page, cuz I want the nav to go all the way to the sides, right?

[00:01:04]
So there's no padding here kind of on the sides, whereas I wanted this to be kind of indented a little bit on all the sides that's why I kept them separate. Okay, I have this box class that I did which is, this is a box, the items, the name, and the payment cuz they all have the same kind of general style, right?

[00:01:27]
So same background colors, same rounded corners, margins between them, drop shadow. So I kind of did this one a box class and you can see that is shared across the name box and this credit card box. So from there I have the items, that's an h2 and then an unordered a list of the items.

[00:01:53]
And notice I have a nested unordered list, right? So I have the items but in addition all of these options as well I chose to make it unordered list. So you can nest those lists as well, that's totally possible. Okay, and then here I just kinda gave them the name of items, item quantity, item title.

[00:02:15]
So this convention that I have here of item, item dash quality or quantity, item dash title, it's not necessarily any sort of thing that you have to do. I just find it easier for me to read at a glance that like, all right, this belongs to item, can give it some sort of hierarchy there.

[00:02:34]
But again totally up to you. So that's all of this part here on the left, the items. Then here in the payment box, which would be or a sales to the name box first. Yeah, have the name box, that's inside of this sort of payment section. So I made this entire, inspect here to show you this, might even be easier to visualize this way.

[00:03:04]
So order boxes over their, payment boxes over here. I chose to make this payment section include both of the name box and the credit card boss cuz they're kind of in the same column, right? If you look at the original design, you can see these actually aren't even the same height here, right?

[00:03:22]
Might end up being really similar in height, that was purely kinda by accident. I didn't actually intend for that to happen, but it did. Certain looks kind of nice that way anyway. But I put them in the same section because they end up being in the same column and that made it really easy to lay out.

[00:03:38]
You don't have to do it that way. You could totally make a grid where those end up being separate things and that would have been a totally acceptable way of doing that as well. Okay, there's a title in there. And then there's an input group here, where I made the input and the label together inside of this one div that made it really easy for everything to be overlaid correctly.

[00:04:03]
Okay, and then same here with this credit card box. I have two input groups. Which include the labels and the inputs as well as the title. So this name boxes and credit card box end up being really, really similar. Okay, and then down here for the totals, just put that all in one little section here.

[00:04:26]
It's got a table, you don't have to do this with tables but it's kind of tabular data, so it made sense for me to do it with the table but you could have just as easily done this with an unordered list, all sorts of things like that. So yeah, T body, table row and then table definition.

[00:04:47]
And then it just gave this final total rolls an extra class of final totals cuz that way it was made it really easy to make that bolden. And then a button. That's it. So that's the HTML.