Freelancer — 450 | Site build | Homepage: footer

We're moving fairly quickly through the build process and we'll come back to clean up the home page in just a little bit. And the reason we're not stopping and making everything pixel perfect right now is that we're optimizing for speed. Remember? We're tracking our efficiency and taking note of the time we're spending on each client project. Of course, we can tweak the design and iterate over and over and we will eventually but for the build process, it's important we get our content on the page. We want to take our home page we have now and add our footer. So it looks like this that's where we'll be at the end of this video and both the footer and of course, the navbar we created earlier. These are going to be on every page. So give users quick access to site navigation and to the third line in our user story. We know it's this, we want them to be able to pick this interior design firm with confidence. That's why using the navbar and footer to surface critical contact information and site navigation is a really big deal and that's what we'll do when we build the footer we’ll do this in two steps. We'll build a basic grid. That's our footers main structure and we'll make little content holders. This’ll let us spaced out and align the content inside the footer you might be asking what's the reason we're not stopping and making everything pixel perfect right now. Well, we already answered that at the beginning of this video. Now before we add our grid there is one fixed. We might want to make sooner rather than later and that's on the collection list down here and the collection list by default when we added it had two rows. Let's go in edit our grid and delete one of those two rows that we don't have any space showing up your in the designer now we can move on to our grid. This is the primary structure of the footer and to do that. We'll just grab a grid and drag it using the navbar. Let's place it underneath everything else and a few things right off the bat. Let's name this. Let's add a class of footer and give it a few properties first. Let's set a background color. That's not white. It's a very very light gray.

Looks pretty good. And let's add some padding on the top and bottom some breathing room here. Let's do 60 pixels. Let's do 50 pixels top and bottom just holding down option on Mac or alt on PC and we can add some content first things first. Let's add a logo we could just go to add an image here, but we have a logo right here. We can copy it and paste it right inside our grid again, content places itself automatically. It's automatically positioned in the first open cell next we can add more content. Let's add links to the page and to do that. We need to move into Step 2, which is little content holders AKA div blocks and these two blocks are gonna help us organize the content inside our cells now if we try to drag the div block right inside as we know content that's placed inside a grid is automatically placed in the next available cell, the next open cell. We can set this to manual and place it anywhere we want. Let's put that here under the Hayes Valley logo and this is where we can put all of our links, so let's add some links to that div block. Let's go in and add a text link and we're going to do a text link again if we drag in right here, and we try to place it. It's going to place again in that next available cell, which is the second one over hold down command on Mac or control on PC that lets us drop it inside of something that's inside a cell in this case the div block and we'll close that out and we'll call this one home page. We're just building out a lower navigation here in the footer and if we select that link, we can call it footer link so we can set up some styling here and let's copy and paste this a few times doing the same thing. We did with the navbar adding portfolio adding our process. Adding ‘our design team’ and finally our last page ‘contact us’. Now. They all have the same class applied. So if we style one of them it will style all of them. They all have footer link applied. So let's set the display to block these take up the full available width inside this div block and that means it'll knock each of them down to the next line and there are few more things. We can do here one we could if we select our div block control some of the styling here could do that on the footer link itself or on the div block that holds it let's do it on the div block that holds it by setting everything to a line right that affects each of its children, but the other thing is the Hayes Valley logo is now over here so we could, with that Hayes Valley logo selected, simply align it using grid it's a child inside the grid so we can set it to the right side. Now, let's dial this a little bit further. The footer link right now is blue and underlined. It's not bad, but we can make it a lot better set the underlined to none.

What's it a different color? So we have this dim gray color. We could use our pale violet red we could use black dim gray looks pretty good in this context and we can space things out for a little more breathing room at the bottom. Margin. We can come back to this but 5 looks pretty good for now. And each of these later on in the process can be its own link will link these just like will link our nav bar once all our pages are built out will link these to the appropriate page, but that's good for that div block that little content holder. Let's continue by adding more another div block strike it into the fourth sell this time. Let's hold down shift, shift will let us manually place something without having to select the button and let go with shift still being held and now we have a div block on the right side and there we can place some other contact information like the address the address. Let's drag in a paragraph and we'll use the nav bar to place at this time. Let's place it inside that div block. We just added and it's already being styled. It looks pretty good. Like this, but we could add the same class we did before we could add the class of footer link and since we're using this as a non link, we might want to double click and change that be a little more specific footer text. That means we have multiple types of contact information the spacing that margin we had on the bottom will affect not only each of these paragraphs, but it'll affect the footer text to the right. Let's bring that back. We had something like 5 pixels on the bottom before. Okay footer text. Let's paste in the address and space things out knock it down to a new line. So the address is spaced out exactly how we want it and we can also add the phone number 415.555.1200, let's add our hours of operation, Monday through Friday from 9 a.m. To 4:30 p.m. Pacific time.

That looks pretty good. We can also add a button underneath this for a little bit clearer of a call to action and instead of dragging a button and like this we can simply use one of the elements we created before which is let's chat will hold down option or alt on PC and we can just copy it right into that div block and position it instead of on top of the text. Let's position it underneath so we have our call to action down there. Here's the thing about classes if we make a change on this if we affect the styling on this one element, it's going to affect the styling for the others. Let's show what happens when we just padding it affects all of them at once and there's nothing wrong with that but we might want the styling to be different on this button than these buttons. So two ways to do that. We could duplicate the class. We can just click on the right side duplicate and create a new class or we can inherit all those same properties from the first class by creating a combo class. This is button, we’ll call it button smaller, and now button smaller will allow us to create a little bit of a modification. So if we want 25 pixels of padding on both sides and a little less in terms of padding on the top and bottom that can work fine. Now if we make a change to our original button class if we change that color, it still affects the other button at the bottom but changes to that button since they have that combo class of smaller won't affect the original button, lets us use this as a starting point. So that's our footer, there are times in the design and build process where an idea comes out and it's terrible, for instance. What we did here with the button might not be ideal. It could go back to the button. This is 29. Let's round that so it's a nice round number of 30 and then here may be changing this to 25 on both sides didn't help us or just holding down option or alt and clicking to remove these properties and like that. We've built a footer again. We have to link this up, but we have our primary structure here again a grid that serves as our primary folder structure and little content holders are div block and another div block we could name these again to is organized that might be a helpful thing. Let's double-click and call this. ‘Little content holder left’ and this one could be called ‘little content holder right’, but that's a micro detail. But that's it. That's the last major component before we move into tweaking our design for the home page and making it fully responsive not just on desktop, but on tablet and mobile devices.