Class Project 04 - Custom Button COMPLETE

This lesson is exclusive to members

Course contents
SECTION: 4
Project 2: Bike Repair Website 6:12:48
SECTION: 6
Project 4: Bootstrap Yogurt Website 3:35:39

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

128 lessons / 17 hours 5 projects Certificate of achievement

Overview

Hi there, my name is Daniel Scott and together we’re going to learn how to build professional responsive websites. which look good on mobiles, tablets and desktop screens.

We will build 4 sites together...
  • a simple but elegant restaurant website.
  • a bike repair website. 
  • a responsive portfolio website.
  • a Bootstrap website.  

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. We’ll use the world’s most popular (and free) web design tool called Visual Studio Code.

There are exercise files you can download and then work along with me. At the end of each video I have a downloadable version of where we are in the process so that you can compare your project with mine. This will enable you to see easily where you might have a problem.

We will delve into all the good stuff such as how to create your very own mobile burger menu from scratch learning some basic JavaScript and jQuery. 

 You will...
  • Learn how to work with responsive images and icons. and stunning full screen background images and probably one too many gradients. 
  • Learn how to create forms and to choose great fonts for your website. 
  • Learn how to work with Bootstrap 4 to easily add carousels, cards and complex looking menus. 
  • Setup a domain name with hosting so that your website is live on the internet for others to see.  

There are fun class projects for you to work on which will enable you to practice what you learn. By the end of this course you’ll have a great understanding of important web design topics like HTML5, CSS3, Flex box, Responsive design and Bootstrap.   

If that all sounds a little too fancy - don’t worry, this course is aimed at people new to web design and who have never coded before. We’ll start right at the beginning and work our way through step by step. 

Who am I? 

I’m Dan, and I’ve been building websites for about 15 years now. I am award winning instructor, and have won a MAX Master award for the last 2 years in a row at the prestigious Adobe Max conference.

Time to upgrade yourself?
Sign up for the course and let’s learn how to build responsive websites.

Course duration 16 hours 42 mins
Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Downloads & Exercise files

Download Exercise Files Download Completed Files

Transcript

All right, how did it go? Did you do it, first of all, second of all, did it go well? Thumbs up. Did it go badly? Thumbs down, it's okay. We're going to work through how to do it now. Let's have a little look at VS code.
 
So what we're going to do is, we are going to remove My Button from all of these, and apply our own Class. So a cool little shortcut is, I've got my-- it doesn't really matter if you've got it selected, or just your cursor inside of something like a Class, can be inside anything, but if you want something further around down the page, you can hit 'Command D' on a Mac, 'Ctrl D' on a PC, and watch this, come on, D, D, grabs that one. Even if you want one down here again, D. Can you see, it just kind of jumps down to all versions of that, and that could be super handy. 

In our case, because they're stacked on top of each other, you could use multiple cursors, but D, D, D, okay, it's 'Ctrl D' on a PC, 'Command D' on a Mac. So this one's going to be called Nav Button. Nice. Down here I'm going to create our Nav Button. So put a full stop or a period. Nav Button. Curly braces, what do we need to do? Now there's kind of two ways you can do this, depending on how old-school the solution you found. There's like a new way and an old way. They're both perfectly as good as the next. 

So Border-style, and you set it to 'solid'. That's one half of it, and then you say 'border', Border weight, no Border size; is it size? Let's check, no, it is Border width, yeah, Border width. I'm going to set mine to 1 pixel. That should get us close, let's have a little look. It's going to look a bit weird, but here you go, that's the kind of basics in it. Now we need to add Padding to it, and all the rest of it, but let's just talk about the other way. 

So instead of doing that you can actually just type in border, Border, colon, 'border:', and then you can put it in an order. So it goes for the weight around the outside, the style. So I'm just using spaces between them all. I'm going to use white; do I need to write white? Can't remember, but that will do the exact same thing. That's just a shorter syntax than doing them separately, as Border weight, and-- sorry, Border size, Border style, Border color, I think by default it takes the color of the text inside of it, not 100%. 

So that's one way of doing it. We're going to add Padding, we're going to use our fancy Padding. Did you use the fancy Padding, or the Padding top, Padding left, Padding right? Doesn't matter, you get to the same place, but remember, like margins, you start at the top, so I want the top to be 11 pixels, space, then we're going to use the right, and I'm going to do 25 pixels, and if I leave it just as 2, remember, that will end up being top and bottom, there'll be left and right. Save it, let's have a little look; cool. 

I want it to be Playfair, so Font style, no, not size, style, and I want it-- oh, come on, Dan, Font family. I pretend like it's a test. Actually just get to steal it. There you go, you probably did that as well, I bet you did. There you go, because I always forget like, is it two words, is it one word, anyway. Save that, let's have a little look. I think we've done it all, it's an A-tag. Let's have a little look at our list. It is an A-tag, we've created our own class called Nav Button. We've got a white border around the outside, it's Playfair. It's white, there's no underline, and there's no background color. 

Now the text is white and underlined, might depend on how you've implemented your site. Yours was purple and it was underlined, or blue and underlined. It's because-- mine's not because earlier on in the course I took care of it, remember I said, let's just add an A-tag, and all A-tags on our whole website are white, and have no underline. Text Decoration:none, if you haven't done that, you'd have to add it in here, but hopefully that worked for you. And if that still didn't work, and still bl-- I'm just thinking, if it's still underlined and blue, you might, well, you have to do this, you'd have to go an A-tag, that is joined to the Nav Button, and style it to be white, you know, color, white, and I'll do it the whole thing. 

You just go, we've gone this far, Text Decoration, and, what is it? Text Decoration, none. I'm blaming some of my spelling on-- I can't see my keyboard. When you're video-ing these courses, well you're not, I am, there's a big microphone right in front of my face. So you can hear me in my great sound, because if I'm too far away you hear me over here, and it's not as cool. So I got to sit nice and close, which means it's right in front of my keyboard. So I'm either looking around it, like this, or I just can't see what I'm typing, and I'm not a good enough typer to not be able to see, anyway. 

Now I do find that later on in these courses I get, well, I get video bazillion, right? And I feel like we've crossed past the dentist, to be a super professional in the beginning, and we're into the sharing too much. So you can say, sharing too much, Dan, and I'll straighten it up for a little while, at least. And we're talking about families, and my problems with my mic. Let's jump in now and get on to the next video, before I go off on another tangent. Bye now.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024