Class Project 05 – Header design
Alright. It is class project time again. We're going to take our ugly looking heading to look at that. Okay. The background color change. 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 And these are the requirements. So this is what we're making. The text should be white the moment it's black. This thing here is a research project. Ok. 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. Okay. 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 is that they're on the same line. Okay. Whereas I could do CSS Okay, two different tags and they'll b...
e on separate lines and then I could kind of fudge them to get them to line up together but spann tags or spin classes are really helpful for but that's all the help you're getting. I want you to see if you can find it out and implement it. Next thing you're gonna do is stuff we have done before. Okay. The logo should be left and the navigation over here on the right hand side, so left and right. What else we're gonna do. I want you to center these two center in the header. Okay. Not along the top vertically. Okay, centered nicely. Okay, 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 eight tags, there are workable. Okay. I've got to hover above them. I can click on them and they have a liner on the outside. I want you to do that and the last one is to set the entire background to this color here. Okay. And it's just a kind of a you see the difference before wait, this one just kind of like great to separate these things out. Alright, when you've done it, send me a screenshot your proof of I've done it and it's looking okay before you move onto the next video. Okay. 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 little screenshot thumbs up, smiley face or angry face if it's not working. Also send that same image tag me on instagram. Take me on twitter. Use these hashtags. Okay, so hashtag B Y. O. L. That's what I used to kind of separate the different groups of course, is that I'm doing okay 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. Alright. Go and 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 okay and messing around with it and getting lost and finding the way other people that really will find web design. Kind of. It'll stick a lot better when you have to actually go and implement it rather than following me step by step trying to guilt you into doing it. This time I've tried threatening disappointment. I've done my disappointing face, I've touched it 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.