All language subtitles for 127 Building the Footer - Part 1.en_US

Welcome to the very last section

of the Omnifood website.

And in this one,

we're going to build a really professional looking footer

like this one.

So we're going to use this design example from the right

side to build a somewhat similar looking footer.

So in the first column we will also have,

our logo, then some social links, and a copyright notice.

Then in the second column,

we're going to have some contact information,

so of the Omnifood company.

And then in the remaining three columns,

there will be some additional links.

So a bit, again,

like here in this design example on the right side.

Okay.

So five columns,

and a really professional looking footer,

and so let's get to work and build this.

Okay.

And so to mark up this footer in the HTML,

we're going to use the footer element for that.

And we will put it not inside of the main element,

but actually outside of it.

So right here,

because remember that

the main area of the website

is for non repeated content

and the footer, as well as the header,

we might repeat them exactly the same on some other pages

that are parts of the overall website.

And so, yeah,

the main part is really only for the part that is specific

to this particular webpage.

Okay.

So again, the footer and the header,

they might be repeated on other pages in case there were

some, and so they are not the main content of the page.

So giving it the class of footer here,

just like I did in the header.

And then here, we will also want some centered container.

And so for that, we use of course

our container class,

and let's also use a grid,

and I think right now we don't have a grid yet

with five columns.

So let's create that really fast here.

And of course, that's really simple.

We just copy this and change this to five,

and this to five.

And so just like this,

we now created a grid which has five equally sized columns.

Okay.

So this first one here is going to have the logo and the

copyright notice and all that.

So let's call this one here the logo column.

So let's just write that here.

Then the second one is for the address.

So I'm calling that one address column,

and I'm not sure yet if I will even need these,

these class names,

but many times as I write the HTML,

I try to immediately name it.

So let's just take a look at our content here again.

So yeah, so here's that contact information.

So we will write the address, the phone number and email.

So right here into the address column that we just created

and these social links here,

they will go into the first column.

Then finally we have also some additional links right here.

So this huge list here,

and so let's try to separate this into some different,

basically, topics.

So create account, sign in

and these applications,

and so I think that we can say that these links here are all

about the user's account.

So I'm going to basically create a subsection of the

navigation called account.

Then these four here are about the Omnifood company itself.

So basically a page describing what Omnifood is,

then Omnifood for business,

and partners, and careers.

And then finally here are some resources, for example,

where the user can find a directory or some other help.

So here is where we will have now three columns,

one for each of these sub navigations, let's say.

So let's create three more columns here,

and I'm going to call this one here

a nav col.

And actually since this will be basically a navigation,

let's use the nav element here,

and then two more,

so two and three,

so this is just so we can see something

on our page right now,

but before we go check that out,

let's, as always, add some padding here

to that section first.

So copying that once more,

then footer, and here,

footer as well.

So let's see.

And there it is.

So there are five equally sized columns.

So that's now add the actual content here very quick.

So here we want the logo.

And so let's actually get that from the header.

So I'm going to go all the way up,

and I noticed we have together here written over 600 lines

of HTML code.

So that's really a great job,

but anyway,

here is that logo.

But before I copy this, let me actually wrap it into a link.

So into an anchor tag,

which is something that we do all the time

with logos in the header.

And so this will be so that when we click that logo,

we will go back to the top.

And this is something

that we will implement a little bit later.

So for now let's just say

nothing here,

so going nowhere,

and yeah,

let's just check this out

here in the top now.

And you see, it looks exactly the same,

but it is now a link.

And so when we click this,

we go, basically back to the top,

right?

And so now we will want the exact same thing

also in the footer.

So later we will then implement some smooth scrolling

functionality,

which will happen once user clicks this logo.

All right?

Here, let's just give it a class of footer logo,

let's say,

but the rest here of the image can stay the same.

So we are actually reusing this logo class here,

because I think that the size of it

is also good for the footer.

So here, I think this doesn't look too big.

And so we can use that exact same class that we also used in

the header.

So that is basically now reusable.

So while we could move that class

to the general.CSS file,

but let's not do that right now.

So instead what I want to do next here,

is to add a paragraph,

and actually before the paragraph,

so between the logo and the paragraph,

is where I will want to put these icons for social links.

So like Facebook, Instagram, Twitter, and all that.

But I'm going to leave that for a bit later.

So copyright,

let's just write some standard copyright text here.

So copyright and here let's use yet another HTML entity.

So the copy one, in this case,

so as you can see, it will create this copyright sign.

So that looks quite nice, and then let's say 2027.

And hopefully by the time you're watching this video,

this year is not correct,

but we will also fix that later actually using JavaScript.

So I will show you how we can actually very easily

keep that year up to date.

So just all rights reserved,

even though this doesn't mean a lot legally,

but it always looks nice, I think.

Okay.

So again,

we're leaving the social links for later and now let's take

care of the address here.

All right.

So let me grab that here.

And so of course we will not just paste it here and leave it

like this,

but instead we need to wrap it into some elements.

But before we do that,

let's actually also add some kind of header here to this

column.

But once more for that,

we will actually not use an H element,

but simply a P element like this.

So this is not really a new section,

so it doesn't deserve basically its own actual heading

element.

So that would semantically not be really correct.

So contact us,

and then below that we can wrap this entire information here

into a special HTML element called address.

So this element is basically for contact information of the

page,

so it's exactly what we are looking for here.

So contacts,

and so now let's wrap each of these here into a paragraph.

Now,

of course we will not literally write address here because,

while this is pretty obvious that it is an address,

we could use maybe some icon,

but even that is not necessary.

Okay.

Now this phone here is for the next one

which we also don't need.

Okay.

So let's create one paragraph for each of them.

And now here

let me show you something cool,

because here we can now basically make this phone number

also a link.

So let me grab that here.

And then we can create a special kind of link

so we can write tel,

and then colon,

and then here the phone number,

and the same for the email,

and I will then show you soon what this actually does.

So here instead of tel,

because it's not a telephone number, we can write mail too.

So this is now the H ref, and it's also the text that we

want to show up on the page.

All right.

So let's check that.

And while, if we click this now,

then since we're on a browser, nothing should happen.

Or let me see, oh, actually it's trying to FaceTime it now,

which is basically a way of making a phone call.

And if I were to click here on this email,

then it's probably going to open up my email program,

and you see that it did,

and it is trying to write an email to hello@omnifood.com.

All right.

So that's exactly the H ref that we defined there,

right?

So it opened the email program because of this mail too here

and it opened the phone application basically because of the

tel.

And so this is not really that helpful, maybe on a computer,

but on a phone,

when you tap a link that is formatted like this,

it will then very easily make a phone call to this number.

Now you noticed these two links here are side-by-side.

So let's add a line break there,

and I'm actually not sure if we have done that before,

but anyway,

the way we manually add a line break

is by using the BR element.

So that's stands simply for break.

And so now they will be in two different lines here.

Okay.

So that looks perfect.

And so let's move on to the next column here.

So let's grab these four here.

Yeah. So right here.

So let's add here another

footer heading

and this one here,

remember we said was about the account

and now let's create the actual navigation.

And do you remember how we did that in the header?

So we did not simply add a bunch of links one after another.

Right?

But instead what we did was to structure them nicely

using the unordered list.

And so let's call this one here the footer navigation,

and then in there, of course, a bunch of list elements,

and let's put these here.

And of course now inside of these is where we will put the

actual links.

So again,

exactly like we did also in the main navigation

that's on top of the page.

So this one is for create account.

And then let's simply duplicate this a couple of times,

then here is the iOS app

and it's even easier to write it then to copy it,

and the Android app.

So let's see if that looks correct.

And it does indeed.

So now we have a nice and structured navigation list right

here,

and so let's do the same for the other two.

So in fact,

I will simply copy this entire nav,

and then replace these two.

All right, let's get the next four.

So that's the first,

then here is for business,

and finally careers.

Oh and here, we also want to change the title to company.

All right?

Oh, actually, this is what we wanted in this one.

So let's grab all of this and move it up there.

So I just cut it and paste it here.

And now let's get the last three from here,

help center,

and of course the privacy and terms,

which are very important on basically most websites

out there.

And I didn't cut it here,

and let's just call this section here the resources.

All right, let's go back down

and here we go.

So that looks nice, except of course for all the formatting,

but the content is already here.

So all the content,

except for those social icons that I mentioned before,

and so let's now add them here between the logo

and that text.

So let's do that now.

And once more,

we can consider that a list of links.

And so once again,

we will use the unordered list for that.

So calling it the social links

and since they are links,

let's create, again, an anchor element.

And now we just need some content in this link.

So what is that content going to be?

Well,

we're going to use some icons here for each

of the social links.

So one for Instagram, I think.

Yeah. So Instagram, Facebook and Twitter.

So let's actually get that here from ionicons,

because these usually have all the social links included.

So Instagram, and there we go.

So let's click to copy.

And so that should now be there and indeed it is.

So let's just do the same two more times.

So Facebook and probably the next one we can already guess.

So here, actually,

we can just replace Instagram with Facebook,

and here with Twitter,

that should work.

And yeah, those are the three we were looking for.

And so with this, we finished the content part.

So the HTML is written here for our footer,

but of course it doesn't look anything like professional

yet.

And so let's take care of writing the CSS

in the next and final lecture of this section.