All language subtitles for 1. Section 4 Intro materai l

We've done a spectacular job on the header and really polishing up and adding a bunch of functionality

that you would expect it to commonly find in Web sites another fundamental common feature of Web sites

is having a footer the footer stays at the bottom of the screen instead of the header which stays at

the top but it also contains a navigation structure which usually has links to every page on the site.

If you don't remember exactly what our footer was supposed to look like.

Well I've included a little screenshot of it right here and you can see that it's got a couple of different

elements starting at the left.

We have the black slash which is going to match the style of the logo in the header and the little copyright

text down there is built into the image so we won't even have to worry about placing that ourselves

to the right of the little black slash.

We have all of the footer links that I was just describing.

You can see here we have it arranged in a column layout displaying all of the different routes and finally

the last part of the header on the very far right is these social media icons there which will set up

to make sure that they'll appropriately open the app if they're on a mobile device.

It shouldn't be too difficult for us to get set up but we will start learning some new material UI functionality

so we'll begin by setting up the footer and just implementing the basic h t AML footer element that

we need to get started and then we'll go ahead and style all of that and add that little black slash

that we saw after we have the basic footer looking good.

Then we will start learning about the grid system and the material UI grid component the footer is a

perfect example to start learning the grid with because it's about as simple as an implementation of

the grid can be that should really just help you get to learn the actual concepts of how it's working

and hopefully not get lost in any of the details so we'll be using the grid to setup all of those links

and make sure that they are aligned in that nice column layout and once that's finished then we'll go

ahead and set up the social media icons with the grid system as well and then we'll go and make our

footer responsive in the same way that we did our header just like we don't want to have all of our

tabs displayed across the screen on the header for mobile devices for our footer on mobile devices we

also don't want to have all of those links just displayed in the bottom so we're actually just going

to hide and get rid of the links and just leave our social media icons for our mobile footer and you'll

see how we'll do that with a another material UI responsive components which is the hidden component

that is going to help us hide our footer links on mobile devices and it should be all we need to finish

up the footer so you can see that it shouldn't be too much this time I know that there was a law in

the header to get done but we really just had to get the ball rolling but now we should be able to move

a lot more quickly throughout the next videos.