This lesson is exclusive to members

Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

Class Project 02 – Footer

Daniel Walter Scott

Download Exercise Files Download Completed Files

Contents

Introduction

I recommend hosting your new website with Bluehost, you can get a big discount by signing up with this link: https://www.bluehost.com/track/byol/byol_webess_28

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up
Surprise, it's homework time. You've got all the skills now to recreate this Footer. At the moment it looks like this in the browser, this green thing. Don't worry about this big map in the middle. We're going to do that in a little bit, but I want you to focus on, from the map down. So you're going to be focusing on kind of this part. 

So what I want you to do is I'd like you to make it look like that. There's a padding, there's a margin, how do we get it in the center? How do I make the font smaller? I want you to wrap it in a P tag, and I want the background to be black, but transparent, but not as transparent as that. So that's a bit darker. Those are the rules. 

Let me check your-- remember, in your Exercise Files, way back at the beginning of the Exercise Files, there's one called Class Projects, and there's a Word doc in here. That's it here. This is Class Project2, so run through this. There's the mock up I just explained. It doesn't have to be pixel perfect. Anything else? Ignore the map. The spacing up above and below the footer. There's the text for it. Just make sure it's in a P-tag, you could skip that, but this be proper. 

Let's put it in a Paragraph tag and then style that. A little hint, you're probably going to need a Compound Selector. It's kind of what I'm trying to hint and get you to do in this one. Background colors transparent, and that's it. Once you've done it, take a screenshot, and share it with me on these, so in the Assignments Panel, just take a screenshot, stick it in there. If you've-- yeah, depending on where you're watching this, in the Comments, in the Assignments, and send it to me on Instagram, keep you honest. 

Send it to me and say, "Look I got this far, and I did it without cheating." What I mean by cheating is, opening the completed files, or watching the next video where I go through it, and show you how to do it. Prove to yourself you can do it, and share it with me. Make sure you use this hashtag, #byolweb 
And that is it. Go do your homework, and I'll see you in the next video.