Class Project 02 - Footer COMPLETE

Welcome back, how did the homework go? You're either sitting there smug, thinking, "Yeah, I did it, I'm a Web Designer," "I smashed out that Footer, and it looks great," or you're sitting there going, "You're not as good a teacher as you think you are, Dan." "It went badly, and this site doesn't work in my computer profile." Which, either way I'm really happy with, because this is the beginning, you're new. If you skipped it, this is where I'm touching, I'm shaking my finger. 
You can't see it, but I'm touching, shaking my finger. You should have done your homework, but if you haven't, that's all right, we're all here now. Let's go through how I would do it, there's a couple of ways of doing this. Let's do the way I did it, if you got to a good solution, that's perfect, but let's just see. 

Let's head over to VS code. And where do we start? I wonder where you started. I'm going to start with-- I feel like I want to color the background first, for some reason. So let's go to Footer, it's an easy one, get rid of this. We could just type in black, but we could actually just hover above this. Drag it down to this bottom corner. I'm just dragging it past where it needs to go, let him go. Then coming back and just dragging it down. Now I kind of set it at about 80% but, how about that? Save it, preview in the browser. It's kind of see-through, maybe, how dark, that doesn't really matter, but you got the idea, right? 

There is some black, and it's transparent. Let's add the Text Sum outside of here. So let's find the Footer, let's add our P-tag. Let's go and find the text. There it's there. Paste it. Awesome. Save it, let's see what it looks like. That's where we're at. Cool. Let's do a couple of things, let's maybe make it smaller, and center it horizontally because that's the easy one to do. So this is where I wanted to-- you could actually just style a Footer. You could say, I want it to be a font size, here, like, say 10 pixels, whatever you picked, and it would work. 

The reason I kind of suggested doing a Compound Selector, so something like Footer, has a P-tag in it, so that if you've got like an image inside of there as well, or say some links, or lots of different things, you can be really specific about it. You can say, I want the Paragraph Text inside the Footer. It doesn't really matter how you did it as long as it worked. We'll do Font Size, and I did 10 pixels. I'm going to test every single time to make sure it's working. Let's do Text Align, Center. How are you going so far? If you're like, is there like, "Ah" moments, or is it like, "Yep, did that, nailed it." Let's have a look, looks perfect. I made mine slightly darker, it wasn't white. You didn't know that. 

Color, I'm just doing this because I want it to be a slightly different color. Like, he's changing the rules. Want it to be a slightly muted kind of gray. Goes too bright down there. Next thing I want to do is get the spacing right. And how did you do it? Did you leave the bottom, play with the heights, play with the margins? That's what I'm going to do. I'm going to get rid of the height off the Footer. Remember at the beginning we added loads of heights, and we're slowly removing it all, because they were just useful at the beginning, so that while we're learning we can see things, but now, it's fine to leave it like that because I know later on, while I'm building it I can say, do I do it for the P, or to the Footer, you can do it to either. 

I wonder what you did, leave in the comments what you did. If you're like, "Hey I did this other thing, and it still worked", do that because then other people might say, "Yeah, me too. I did this other way, there's a better way, Dan's writing it badly." I'm happy for that. 

So for the moment I'm going to do some padding, off the top. 50 pixels, and same for the bottom. Bottom. 50 pixels. Let's check it. It's kind of where I wanted to get to. Now if you're following my brief, ignore what the map did, spacing above and below. Perfect. Footer, the P-tag, background color. You did it. If yours didn't work I'm going to save this file now, and put it into the Completed Files. Just to recap the Completed Files because they're super handy. Under your Exercise Files there'll be a folder in here called Completed Files. I'm keeping them separate while I'm working in this course, but I'll dump this whole folder in there when I'm finished, and you'll find this one, and you can see, these are all the different videos that we've made. Open them up, and you should see the code that I've got here, and you can compare. All right, that was our Footer project, over. Well done you, let's get on to some new fancy stuff.