This lesson is exclusive to members

Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

Class Project 04 - Custom Button

Daniel Walter Scott

Download Exercise Files Download Completed Files



I recommend hosting your new website with Bluehost, you can get a big discount by signing up with this link:

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up
All right, you can tell by the name. You're like, "Oh no," it's another class project. Don't worry, this is fun. Me saying it doesn't make it true, but it's learning, we're going to learn. 

So Class Project4, if you're looking for the notes for this, it's in your Class Projects folder. There's a Word doc in there. Now couple of things you want to do. The main thing is, make it look like that. Currently it looks like this, with these buttons that were used. I want you to make it look like this. There's a line around the outside, there's no fill, using Playfair in the middle there, white text, there's no underlines, just make it look like that. Keep this one down here, so leave my button alone. And you create a new one. I've suggested one called Nav Button, you can call it what you want, but those are the things. 

Now one of the big things is that, you don't know how to do borders yet, we haven't done it. I purposely left it off for the moment, because I want you to-- teaching you how to fish, that thing. where, either just Google it, or look for Stack Overflow, and a way to kind of put a line around the outside. I'm avoiding the language that actually gets found, because I want you to be able to find it, and implement it yourself. 

There's a couple of ways of doing it. We'll export all those in the next one. Anything else that needs to go in? They're all going to be A-tags, which they already are. We're going to create Button Nav, put a white border, Playfair. Text is white, no underline. Background. No background color. When you are finished, before you move on to the next video, I want you to take a screenshot of it, and just share it with on social media, to say, "Yep, did it." If it goes horribly wrong, you can share that picture too. I guess I just want you to be held accountable. 

We got no way really to assign it, you're not just taking a photo of that, It's just a way of us all kind of, you know, it's a bit virtual, this video stuff, but you can kind of connect by social media. Just remember to use the hashtag byolweb, bringyourownlaptop web. And the Facebook group here, don't forget about this, I'll mention it again because it's all handy, it's grown very well, and there's lots of people replying. 

I love that latest project from Steven Butler, he's one of the moderators. He turned his kid's drawing, or I think it's his nephew's drawing into that. Look how cool it is. Anyway, his video stuff, you can see here, that is some of the UX stuff from XD. There is all sorts of cool stuff in here, but I want some more Web things on here, at the moment it's very graphic, for our other courses. 

So check it out, it's bringyourownlaptoponline. It's a group, you have to ask to join. Yeah, post your little screenshot there. All right, I will see you in the next video.