CSS Project

[00:00:00]
>> So here is your project. You are gonna do this. You're gonna make a checkout page for our imaginary coffee app called Coffee Masters. Cuz obviously, coffee or Frontend Masters deserve its own coffee shop called Coffee Masters. Here I'm gonna make you do all of the HTML and the CSS yourself.

[00:00:29]
And anything I'm gonna throw at you, this is hard. I intentionally made this hard because I want you to learn a lot about this. Struggle through some things and see if you can figure them out. The logos here for Coffee Masters, you can just download that or you can link directly to it, that's up to you.

[00:00:48]
I didn't talk a lot about making rounded corners, but you can just do that with border radius. There's a link here on the article, how to do all this various different ways of doing border radius. There's so many correct ways to do this. You can do this with grid.

[00:01:12]
You can do this with flex. That's totally up to you. You also don't have to be exactly perfect, that's totally fine as well. I mean, if you look down here at my example of it, This is how I did it. It's not perfect to the exact design, you'll find that happens very frequently when you're working with the designer.

[00:01:38]
They'll give you like a Photoshop document, or a Figma, or something like that. And you'll come back with something that's pretty close and hopefully that's good enough for them. Sometimes they're pixel pushers and they'll make you get it correct, but this is what mine looks like. These are inputs, right?

[00:01:58]
Okay. HTML inputs can be styled with CSS just as you expect. We also didn't talk about box shadows. But there's another thing in here if you wanna add a box shadow to something. So this will get into how to do box shadows, it's one of the least important things.

[00:02:18]
But a box shadow you can see here, particularly for things like that we want something to look like a little raised off the page, skeuomorphic, that's how you would do that. I took about 100 lines of HTML to write all of it, all of this about 150 lines of CSS 200, something like that.

[00:02:42]
Again, my way is not the correct way, it's a way to do this. There's a lot of different correct ways to do this. I ended up using both grid and flex, in several places. So it's up to you of how you wanna lay those out. And you don't have to match the design perfectly If you look at mine here on Coffee Masters, notice this uses a interesting font, this is called Open Sans.

[00:03:12]
It's a really common font created by Google. The way you'll load Open Sans on your project is you can go ahead and just drop this in your head. Make sure you drop it before your style tag. And then you can just add font-Family Open Sans, sans-serif to this little bit right here to your body and that'll make everything on your page be Open Sans.

[00:03:41]
And it looks like I'll fix a link there, but Google fonts has so many different fonts if you wanna load them and they're all free and for open use. And then I wanted to show, so one thing that I thought might be difficult is that I didn't really show you how to do, this name for order right here.

[00:03:59]
How would you do that? I kind of helped you a little bit through that. That I showed you here this is how I would do it or how I literally did it. So what this is, this is actually the label. So in HTML you can have a label for inputs, just tell people what that particular input is supposed to be.

[00:04:23]
So you can see here this has example text, right? And then all I did is, use a CSS property called position to move things around relative to where they're supposed to be. So all I did was just move the text on top of the input here. And then I gave it a white background to nicely kind of eclipse the border in a pleasant way.

[00:04:56]
If I put this to green, you can see that's actually the background there. But if it looks white, it looks like it's supposed to be there, right. So I'm using a little bit of a trick to get it there. And then, all I do is move it left and top.

[00:05:16]
So this is a little counterintuitive. Top is from the top and left is from the left. So if you move something left 25 pixels, it ends up moving to the right, right? But you say start from the left and move to the right this way. By the same token, if you say right, let's just do it so you can see it.

[00:05:35]
Right 25 pixels, it starts from the right and moves it to the left. It can be a little counterintuitive. That's what this position absolute does, is it moves things absolutely. But the key here is the group here, cited the example group that has a position relative on it, which means anything inside of this set tries to move absolutely move relative to me rather than move relatively to my parent.

[00:06:07]
So if I took this off, Notice it's gone. I actually don't even know where it went. Did it go all the way? Yeah, it goes all the way to the top of this particular thing, because this must have positioned relative on it for something else. So make sure you have that line of position relative.

[00:06:28]
And yeah, I feel pretty good about that. Any questions about positioning or trying to achieve the same effect here? One of the least important things about this list, I want you to get the layout correct, that's what I'm most concerned about. Everything else here is kind of a nice to have.

[00:06:48]
You might ask me how did I come up with these values? Just eyeballed it. But like knows I can move it 35, I can move 55, it just moves it over. 15, 5, at that point it's just taste. Same thing was 7 pixels, this could have been 10 but that's too high.

[00:07:10]
If I do it 3 that's too low, 7 just felt kind of right. Padding here with 02 pixels that means the top bottom are gonna have o pixels. Like if I do 10 pixels here for example, notice that it starts covering the text underneath there, you don't want that so, 0.

[00:07:33]
And then I wanted to occlude a little bit of the border here, so I do 2 pixels. If I do 0 pixels here notice the border goes now right up to it. Where if I do like 10 pixels that covers too much of the border. Anyway I'm trying to give you a little bit of creative license here, a lot of knobs to turn it and mess around with.

[00:08:00]
Okay, I'm trying to think if there's anything else in here that might be difficult. Let's take a look one more time at it. I did have to end up using position to move this border, or this logo around a little bit cuz it sits a little low, so I moved it up a little bit using the position relative.

[00:08:22]
If you give it a strong border radius like a border radius of 100 pixels, it's such a strong border radius that will end rounding it, which is what I did here. And then yeah, getting these ones laid out correctly was difficult. I think I ended up using grid here to get this all the way that I wanted it to look.

[00:08:47]
And then I probably used flex inside of that. Okay, so I want you to give this a shot. Again, I gave you some, this is a pretty advanced layout. I can actually see, I imagine most of you could probably see this being like on a tablet where you're checking out your favorite coffee shop, right?

[00:09:12]
This is actually real designs that I got from a real designer, right? It's actually from the same designer that designed this website and he was doing it for something else, right? So this is actually a real design that you might get. So it should be hard. Should take you a good amount of time to do this.

[00:09:32]
And it's okay if you don't fully get there, it's okay if you have to peek at my answer, I left you all the answers here at the bottom, so yeah.