Class Project 05 – Header design 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

So how did it go? I wonder whether you got stuck, which bits were easy, how you went with your little research project. Yeah, I'll do it together with you now, and you can compare notes. Now my way is not going to be the best way of doing it. It's going to be our way to do it. So let's see, we'll start with the easy one, make the text white. So what I'm going to do is make-- because at the moment that text is white, but that one's white. What I might do is be clever and say, actually instead of trying to tell them all to be white, I'm going to find this guy, get rid of him, now they all go black, and I was going to say, up here, my Body Tag, actually you can all be white, please. Nice, easy one. 

Now we need to get these guys kind of separated out, because they are regular old tags, they sit on top of each other. We want to split them across. Which way did you use? Which way am I going to do, we'll use Flexbox. So it needs to go on the Parent, and the Parent in this case is Header Container. We're going to say, display - lower case - display, and we'll use flex. See how it does, what is it doing? That didn't work, you might have started the same way, let's have a little look. That's why. I put it as a Parent. So I added Flexbox to this guy, Header Container. 

Actually that will affect everything inside of it, or the direct children, and in this case it's the Header. I want these guys attacked, not this fella. So we need to put it on the header, not this outside wrapper. Sorry, buddy, you're the wrong one. It needs to be Header, it needs to be Flex. Let's see how it works. Better, they're side-by-side, now we want the spacing to work, and we'll use the same one as here, Justify Content. You should split everything up, 'justify content : space-between'. Let's have a look, look at that, left and right. 

We'll now get them to center in the middle, so we'll do 'align-items', and we'll do 'center'. See how that goes, nice. We're going to leave the Span tag to the end, mainly because I want to separate it off in its own video, right at the end. So that we can-- for kind of memorable sake. So when you are searching back through this video course on how to do them, they'll be their own separate video. So what we're going to do now is style these. We could have done it before, and if you cheated and went to your old assignment, and grabbed them, I am proud of you. That is efficiency, we're going to do it together though. 

Before we can actually style them we need to separate them out, because at the moment, in the Nav tag here there are just bits of text. So what we'll do is put a few Returns in, clear them away. I want three A-tags. I'll use my little shortcut, 'Command-Option-down arrow' on a Mac, and it is 'Alt-Ctrl-down arrow' on a PC. I'll put in my hash tags. Actually just going to work on these one at a time. I just copy and paste them. You, you, and you. Get my Nav tag back up again, come up here, buddy. Lining up finally, so that's looking nice. Now I can attack them over here. 

So the bottom here, before my Tablet view I'm going to style them. Now I'm not going to style all the A-tags, so I, in my case-- you could do Nav A, so you could say, I want all the A-tags that are inside Nav, and we could do that. So you might have gone that way, it's perfectly fine. You could go up here and say, I'm going to create a Class, because maybe you're going to reuse this button. So you call this one 'My Button'. And you actually do it for all three at the same time. So Class is going to be My Button. We're going to style that over here, either way it doesn't matter.
 
It really depends on if you plan on using these buttons anywhere else, then this particular method might be a bit better. Let's look at them first. What have we got over here? Purple. So I'm going to first of all make the color white. And what I might do is do some kind of, like make all active links color of white, and turn the underline off. You might not have done it this way, you can do it in the Class that we're just working on, but this way means I'd only have to do it once, because I bet you I'll have to do this a few times. So all the A-tags are going to have a color of white, and the text decoration of none, which gets you the underline, there you go. 

You could have done it down here, and it worked. Padding, in this case it doesn't really matter what you guessed. I think I did 10 top and bottom, and 25 left and right. Let's have a look. Search, doesn't really work until you add the border. In this case the Border Style is going to be, sorry, Border Style is going to be solid, and we'll have a border size. Gets me every time, it's border width. And we're going to just have 1 pixel. Let's have a little look. It's pretty much what I want, what it will look like in my mock-up, had a bit more spacing, so I'm just going to put some margin to the left of them all. 

Let's put in some-- margin to the left? Yeah. Margin left, margin left. And how much did I have? Are you at 20 pixels? Let's have a look, save it, yeah, it's looking good. They're all clickable, don't go anywhere at the moment. Anything else in our list? So Span tag, we'll do in a second, logo should be left aligned. They should be centered vertically, and the Header, Nav button should be working. Entire background, let's do that, so that's the color I want it to be. And all we need to do is say, Body, you are a background color of that. Don't forget your semicolons at the end, and hopefully it's that kind of light gray color. Why is it not working? Because I forgot my hash, '#'. There you go. 

All right, is that it? Now it's time for our Span tag. I'll see you in a sec in the next video, where we explain Span tags and its own little tasty video. See you in a sec.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024