Class Project 02 - Footer 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

Welcome back, how did the homework go? You're either sitting there smug, thinking, "Yeah, I did it, I'm a Web Designer," "I smashed out that Footer, and it looks great," or you're sitting there going, "You're not as good a teacher as you think you are, Dan." "It went badly, and this site doesn't work in my computer profile." Which, either way I'm really happy with, because this is the beginning, you're new. If you skipped it, this is where I'm touching, I'm shaking my finger. 
You can't see it, but I'm touching, shaking my finger. You should have done your homework, but if you haven't, that's all right, we're all here now. Let's go through how I would do it, there's a couple of ways of doing this. Let's do the way I did it, if you got to a good solution, that's perfect, but let's just see. 

Let's head over to VS code. And where do we start? I wonder where you started. I'm going to start with-- I feel like I want to color the background first, for some reason. So let's go to Footer, it's an easy one, get rid of this. We could just type in black, but we could actually just hover above this. Drag it down to this bottom corner. I'm just dragging it past where it needs to go, let him go. Then coming back and just dragging it down. Now I kind of set it at about 80% but, how about that? Save it, preview in the browser. It's kind of see-through, maybe, how dark, that doesn't really matter, but you got the idea, right? 

There is some black, and it's transparent. Let's add the Text Sum outside of here. So let's find the Footer, let's add our P-tag. Let's go and find the text. There it's there. Paste it. Awesome. Save it, let's see what it looks like. That's where we're at. Cool. Let's do a couple of things, let's maybe make it smaller, and center it horizontally because that's the easy one to do. So this is where I wanted to-- you could actually just style a Footer. You could say, I want it to be a font size, here, like, say 10 pixels, whatever you picked, and it would work. 

The reason I kind of suggested doing a Compound Selector, so something like Footer, has a P-tag in it, so that if you've got like an image inside of there as well, or say some links, or lots of different things, you can be really specific about it. You can say, I want the Paragraph Text inside the Footer. It doesn't really matter how you did it as long as it worked. We'll do Font Size, and I did 10 pixels. I'm going to test every single time to make sure it's working. Let's do Text Align, Center. How are you going so far? If you're like, is there like, "Ah" moments, or is it like, "Yep, did that, nailed it." Let's have a look, looks perfect. I made mine slightly darker, it wasn't white. You didn't know that. 

Color, I'm just doing this because I want it to be a slightly different color. Like, he's changing the rules. Want it to be a slightly muted kind of gray. Goes too bright down there. Next thing I want to do is get the spacing right. And how did you do it? Did you leave the bottom, play with the heights, play with the margins? That's what I'm going to do. I'm going to get rid of the height off the Footer. Remember at the beginning we added loads of heights, and we're slowly removing it all, because they were just useful at the beginning, so that while we're learning we can see things, but now, it's fine to leave it like that because I know later on, while I'm building it I can say, do I do it for the P, or to the Footer, you can do it to either. 

I wonder what you did, leave in the comments what you did. If you're like, "Hey I did this other thing, and it still worked", do that because then other people might say, "Yeah, me too. I did this other way, there's a better way, Dan's writing it badly." I'm happy for that. 

So for the moment I'm going to do some padding, off the top. 50 pixels, and same for the bottom. Bottom. 50 pixels. Let's check it. It's kind of where I wanted to get to. Now if you're following my brief, ignore what the map did, spacing above and below. Perfect. Footer, the P-tag, background color. You did it. If yours didn't work I'm going to save this file now, and put it into the Completed Files. Just to recap the Completed Files because they're super handy. Under your Exercise Files there'll be a folder in here called Completed Files. I'm keeping them separate while I'm working in this course, but I'll dump this whole folder in there when I'm finished, and you'll find this one, and you can see, these are all the different videos that we've made. Open them up, and you should see the code that I've got here, and you can compare. All right, that was our Footer project, over. Well done you, let's get on to some new fancy stuff.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024