Now, as you may have guessed, we're going to follow the same pattern we've been following for this entire course, where we add all of the HTML code that we need and build the structure. After that, we will go and we'll add the styles.

Right here, we can see that we have an image, and then we have a phone number, a set of hours, our nav-links, some social media sharing icons, and then a little copyright symbol down at the bottom.

Now, I'm going to ask you to do something, and it's completely up to you if you want to do it or not.
By now, we have covered all of the skills that you will need in order to implement what I'm showing you right here.

So, what my recommendation would be, if you're taking this course because you want to learn HTML and CSS, and it's really your goal to be able to build any kind of website that you're ever asked to build, then I would recommend that you pause the video right now.

Maybe take a screenshot of what we have here, and then go and try and build it yourself. Now, if you do not feel ready for it, that's perfectly fine, but even if you feel like you're about halfway ready, then I'd recommend trying to do it.

It's been my experience that I really learned the most not by watching someone else implementing it, but I learn by following a model and then going and implementing that myself. I discover that there are many concepts that I maybe thought I understood until I started writing the code. That is what I'd recommend for you to do.

Now, I'm going to go, and I am going to implement this. I'm going to start in this video, I'm just going to do the HTML, and then, later on, we'll add the CSS. We know we need a logo, a phone. Okay, let me actually, just to make life a little bit easier on us.

This is what I would do in a real-life project. I would come down here. I would shrink this so that I don't have to keep switching back and forth, so I'm going to move this all the way to the side, and then I'll shrink the code here so that we can be looking at this.

That'll make it a little bit easier for us. Let's go to index.html. We have our map here. This is going to go below the map, and I'm going to create a class called footer. Now, all of these elements are going to go inside of it.

We know that we have a logo for the foot, and inside of here, we're going to need that image tag. So, I'll say img and the source is going to be images/logos/decamp-fantastic-fries-logo-white.png. Let's also add an alt-tag, so here we'll just say Logo, and that's all we need for the Logo footer.

Below that, you can see that we need to have the phone number and then the hours. I'm going to create a new class here, and I'm just going to call that footer-phone-hours, and inside of here, we're going to place both of those elements.

We'll place the phone number 555-555-5555. Just in case you are wondering, no, that is not my real phone number, so don't try calling it. Now, if I come here, I'm going to wrap this up in a class called phone and close it off.

Now, I want to show you something that I'm going to do here that's a little bit different, and it's a topic that we've not talked about yet. I am going to, instead of using a div here, I'm going to use what is called a span.

Now, a span is very similar to a div. The only key difference here is that a span if you put it on the same line as other text, so if we put two spans together like we're about to, it's not going to give the same type of line break that we usually would get with a div.

Because we want to have these two elements sitting right next to each other, a span is a good option. So, for the hours, I'm going to say span. Now just say hours, and now, inside of here, we can put those hours. I'm going to say 10 a.m., give us space in between here. 10 a.m and then to midnight, just like that.

Now, moving on to the navigation links, you may have noticed that I have the identical links here as we had in the top. Well, there is no reason to re-type all of that or to create custom classes when you want the identical behavior.

If you also remember back to when I was talking about how we wanted to make sure our links-wrapper was scalable so we could use it in different parts of the application, this is part of why I wanted to do that.

What we can actually do is come here and highlight all of the content for links- wrapper, and we can just copy all of it.

Then I'm going to put it inside. I'm going to have our links-wrapper, and then we need to fix the indentation just like that. That's all we need to do, and now we have all of our links-wrapper.

Now, moving down, we have our social media icons. Let's create a div. We'll call it social-media-icons-wrapper. Inside of here, we're going to have a few links. We'll have one link, and this first one's going to go to Instagram.

I'm not going to actually put the links in here because this restaurant doesn't have an Instagram page, but we've already walked through how to do that. You could wrap that up and put all of your Instagram code in there.

I'm just going to put a #. This is kind of the convention that you will see whenever you want to create a link but you don't want to point it anywhere. Just put a # in there, that way, you're not going to get an error if a user clicks on it. It's just going to put a hash up in the URL bar and not do anything else.

Now that we have that, we're going to want an icon here, so let's switch over into the browser. Let's open up a new window, just so we don't have to move our browser from where it's at. Then we'll go to Font Awesome and will grab the icons that we need.

We want to grab Instagram, Twitter, and Facebook. Let's say Instagram. There we go, and now you can just copy this link right here and then paste it in. Here, we're going to do the same thing for the other links, and one more.

Now we have all three links, but they're all pointing to Instagram. Let's grab the Twitter one next, and then we want this first one. This one is just fa-twitter. Technically, you can just come here and edit that name.

I'm guessing this one's going to be facebook, but it may be fb. Let's just verify, just to make sure. So, type in Facebook. You have a few different options, and they went with Facebook, and then just a -f. I'm glad that we looked at that, so facebook-f. Just like that.

Then we want, at the very bottom, below social-media-icons-wrapper, we want one more. This is going to be our copyright-wrapper. Inside of here, I'm going to show you how to implement something this is called an HTML entity.

If you ever wonder how you could have special characters, like a copyright symbol, what you can do is use the HTML entity property. The one for a copyright is kind of, I want to say it's easier to remember, but it's probably only because I've been doing it for a while.

It is going to start with an ampersand(&) followed by the word copy. Then you do get some nice autocomplete here. Finish that off with a semicolon, and that's going to give you the copyright symbol. From there, you can say whatever year you want and then the name, and then, I want to go with a pipe character.

Now, the pipe character, I did have to put in my notes because I do not remember this one. It is going to be the ampersand(&) followed by #124, and then from there, we can say, All rights reserved.

What an HTML entity is is whenever you have a special character, these are the types of characters that maybe aren't directly on a keyboard. HTML needs to know how to process those properly, and the best approach is usually to use an HTML entity.

You can look those up, just in case you're wondering how you will know how to put them in your own application, if you just type HTML entities into Google, you will have a full list of all of them. It has some of the more popular ones here, and you can see here is the copyright one.

You have some of the financial symbols, you have ampersands, greater than symbols. They have the entity name, and the entity number, and you can use either one of these. Then, they have some other options. That's what you can do to look that up.

With all of that in-place, I believe that is everything we are going to need, so let's close off Font Awesome. Let's spread this back out. Now, if we come to our own site, hit refresh, and come down, you'll see, right now, if you remember our image, our logo is gigantic, so it's actually here.

It's taking up all of that space, so I'm not going to worry about that. We do have our little nav-icons here or nav-links and those are working. We're going to have to create a wrapper with our styles to do that.

You can see that we have each one of our social media icons. Our HTML entities are working, so we have the copyright symbol, the little pipe in the middle.

So, we have all of the content that we need for our footer. In the next guide, we're going to start styling it.

Updates

<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-instagram"></i>