Class Project 05 – Header design COMPLETE

So how did it go? I wonder whether you got stuck, which bits were easy, how you went with your little research project. Yeah, I'll do it together with you now, and you can compare notes. Now my way is not going to be the best way of doing it. It's going to be our way to do it. So let's see, we'll start with the easy one, make the text white. So what I'm going to do is make-- because at the moment that text is white, but that one's white. What I might do is be clever and say, actually instead of trying to tell them all to be white, I'm going to find this guy, get rid of him, now they all go black, and I was going to say, up here, my Body Tag, actually you can all be white, please. Nice, easy one. 

Now we need to get these guys kind of separated out, because they are regular old tags, they sit on top of each other. We want to split them across. Which way did you use? Which way am I going to do, we'll use Flexbox. So it needs to go on the Parent, and the Parent in this case is Header Container. We're going to say, display - lower case - display, and we'll use flex. See how it does, what is it doing? That didn't work, you might have started the same way, let's have a little look. That's why. I put it as a Parent. So I added Flexbox to this guy, Header Container. 

Actually that will affect everything inside of it, or the direct children, and in this case it's the Header. I want these guys attacked, not this fella. So we need to put it on the header, not this outside wrapper. Sorry, buddy, you're the wrong one. It needs to be Header, it needs to be Flex. Let's see how it works. Better, they're side-by-side, now we want the spacing to work, and we'll use the same one as here, Justify Content. You should split everything up, 'justify content : space-between'. Let's have a look, look at that, left and right. 

We'll now get them to center in the middle, so we'll do 'align-items', and we'll do 'center'. See how that goes, nice. We're going to leave the Span tag to the end, mainly because I want to separate it off in its own video, right at the end. So that we can-- for kind of memorable sake. So when you are searching back through this video course on how to do them, they'll be their own separate video. So what we're going to do now is style these. We could have done it before, and if you cheated and went to your old assignment, and grabbed them, I am proud of you. That is efficiency, we're going to do it together though. 

Before we can actually style them we need to separate them out, because at the moment, in the Nav tag here there are just bits of text. So what we'll do is put a few Returns in, clear them away. I want three A-tags. I'll use my little shortcut, 'Command-Option-down arrow' on a Mac, and it is 'Alt-Ctrl-down arrow' on a PC. I'll put in my hash tags. Actually just going to work on these one at a time. I just copy and paste them. You, you, and you. Get my Nav tag back up again, come up here, buddy. Lining up finally, so that's looking nice. Now I can attack them over here. 

So the bottom here, before my Tablet view I'm going to style them. Now I'm not going to style all the A-tags, so I, in my case-- you could do Nav A, so you could say, I want all the A-tags that are inside Nav, and we could do that. So you might have gone that way, it's perfectly fine. You could go up here and say, I'm going to create a Class, because maybe you're going to reuse this button. So you call this one 'My Button'. And you actually do it for all three at the same time. So Class is going to be My Button. We're going to style that over here, either way it doesn't matter.
 
It really depends on if you plan on using these buttons anywhere else, then this particular method might be a bit better. Let's look at them first. What have we got over here? Purple. So I'm going to first of all make the color white. And what I might do is do some kind of, like make all active links color of white, and turn the underline off. You might not have done it this way, you can do it in the Class that we're just working on, but this way means I'd only have to do it once, because I bet you I'll have to do this a few times. So all the A-tags are going to have a color of white, and the text decoration of none, which gets you the underline, there you go. 

You could have done it down here, and it worked. Padding, in this case it doesn't really matter what you guessed. I think I did 10 top and bottom, and 25 left and right. Let's have a look. Search, doesn't really work until you add the border. In this case the Border Style is going to be, sorry, Border Style is going to be solid, and we'll have a border size. Gets me every time, it's border width. And we're going to just have 1 pixel. Let's have a little look. It's pretty much what I want, what it will look like in my mock-up, had a bit more spacing, so I'm just going to put some margin to the left of them all. 

Let's put in some-- margin to the left? Yeah. Margin left, margin left. And how much did I have? Are you at 20 pixels? Let's have a look, save it, yeah, it's looking good. They're all clickable, don't go anywhere at the moment. Anything else in our list? So Span tag, we'll do in a second, logo should be left aligned. They should be centered vertically, and the Header, Nav button should be working. Entire background, let's do that, so that's the color I want it to be. And all we need to do is say, Body, you are a background color of that. Don't forget your semicolons at the end, and hopefully it's that kind of light gray color. Why is it not working? Because I forgot my hash, '#'. There you go. 

All right, is that it? Now it's time for our Span tag. I'll see you in a sec in the next video, where we explain Span tags and its own little tasty video. See you in a sec.