Class Project 05 – Header design

All right, it is class project time again. We're going to take our ugly looking Heading to, ah, look at that. The background color changed, we've got a different Heading up here, we just styled it. So the requirements are, like always, in our Exercise Files, in a folder called Class Projects, and open up that Word doc. These are the requirements, so this is what we're making. 

The text should be white, at the moment it's black. This thing here is our research project. So we haven't covered Span Tags or Span Classes before, but I want you to have a look online, see what you can find out about it, and see if you can implement this. So basically at the top here, can you see, part of it is bold and part of it is not bold. And it's going to be really helpful learning Span Tags to do things like this. 

The term Span Tag and Span Class are kind of the same, look at both of those. The big thing is that they're on the same line, whereas I could do CSS, two different tags, and they'll be on separate lines, and then I could kind of fudge them to get them to line up together, but Span Tags or Span Classes are really helpful for this. That's all the help you're getting. I want to see if you can find it out and implement it. 

Next thing you're going to do is stuff we have done before. The logo should be left, and the navigation over here on the right hand side. So left and right. What else we're going to do? I want you to Center these two, center in the Header, not along the top, vertically, centered nicely So do that for both of them. Style the buttons like we did, we've done that a couple of times now, so you can see, these are A-tags that are workable. I've got to hover over them, I can click on them, and they have a line around the outside, I want you to do that. 

The last one is to set the entire background to this color here. It's just a kind of a, you see the difference; before, white. This one just kind of a light gray to separate these things out. When you've done it send me a screenshot, your proof of, "I've done it," and it's looking okay. Before you move on to the next video, remember, you can put them in the Assignment section of this website, depending if it has it or not, or the Comments on this page. Send me a little screenshot, thumbs up, smiley face, or angry face if it's not working. Also send that same image, tag me on Instagram, tag me on Twitter. Use these hashtags, so #byol, that's what I used to kind of separate the different groups of courses that I'm doing, and join the Facebook group. It's an Invite only, so request to be accepted, and you will be accepted, and then post your screenshot. 

Don't do it if you don't want to, we'll do it all together in the next video like we do, but I know the people that bother taking this extra time, and messing around with it, and getting lost and finding their way, are the people that really will find Web Design, kind of, it will stick a lot better when you have to actually go and implement it, rather than following me step by step. 

I'm trying to guilt you into doing it this time, I've tried threatening, disappointment, I've done my disappointing face, I've stuttered a few times. This one, I'm going for straight up guilt. All right, off, do your work, and I will see you in the next video.