NOTE This file was generated by Descript 1 00:00:00,500 --> 00:00:02,000 Hi guys and welcome back in. 2 00:00:02,000 --> 00:00:05,270 This video, let's work on the footer for our microblog. 3 00:00:05,420 --> 00:00:06,440 So let's get started. 4 00:00:06,956 --> 00:00:10,496 We've got almost everything that we need to begin styling our page, 5 00:00:10,526 --> 00:00:12,236 but we're just missing the footer. 6 00:00:12,266 --> 00:00:15,656 And the footnote is actually a more complicated part in terms of 7 00:00:15,656 --> 00:00:19,796 the HTML elements that go into it, because we do need some elements 8 00:00:19,796 --> 00:00:23,606 to separate the multiple columns that we've got in our footer. 9 00:00:23,936 --> 00:00:26,956 We're going to start off with the footer and I'm going to give it a class="footer". 10 00:00:26,976 --> 00:00:29,566 We can start with giving class names at this stage as well. 11 00:00:29,926 --> 00:00:35,446 And then we're going to have a div element that is going to have a class, if I can 12 00:00:35,446 --> 00:00:41,816 write it here, of footer__content . The reason why we have a footer and a div 13 00:00:41,846 --> 00:00:47,326 inside it is because the footer itself, as you remember, the design has a full width. 14 00:00:47,596 --> 00:00:50,686 You can see the footer there takes up the entire width of the page. 15 00:00:50,961 --> 00:00:54,171 But the actual content of the footer does not, its width should 16 00:00:54,171 --> 00:00:56,031 be the same as the heading. 17 00:00:56,211 --> 00:01:00,911 So that's why we have the div internally here and the footer externally there. 18 00:01:01,481 --> 00:01:04,661 So inside the div we are then going to have two sections. 19 00:01:04,691 --> 00:01:07,811 The left section, which is going to have a class="left". 20 00:01:08,246 --> 00:01:11,096 And then we're going to have a right section, which is 21 00:01:11,096 --> 00:01:12,796 going to have a class="right". 22 00:01:13,169 --> 00:01:18,059 I'm not using BEM for these two sections because these are not really 23 00:01:18,059 --> 00:01:20,519 related to the footer in any way. 24 00:01:20,847 --> 00:01:24,447 So they don't really belong as footer left and footer right. 25 00:01:24,627 --> 00:01:26,307 Although you could do that if you really wanted to do. 26 00:01:26,647 --> 00:01:29,887 Because really all they're doing is signaling that this section is 27 00:01:29,887 --> 00:01:32,827 going to be on the left side of something and this one is going to 28 00:01:32,827 --> 00:01:34,452 be on the right side of something. 29 00:01:34,452 --> 00:01:37,692 So it's not really dependent on being in the footer. 30 00:01:38,192 --> 00:01:42,262 You can see that the left section is comprised of these two elements there. 31 00:01:42,532 --> 00:01:44,992 And the right section actually has two columns. 32 00:01:45,052 --> 00:01:49,222 So we're going to have to create a div for each column and 33 00:01:49,252 --> 00:01:51,592 then items inside all of them. 34 00:01:51,622 --> 00:01:52,552 So let's do that. 35 00:01:53,052 --> 00:01:58,582 Inside the left section, we're going to have elements which are footer__item. 36 00:01:58,722 --> 00:02:01,792 And these are just going to be the actual footer items. 37 00:02:01,812 --> 00:02:05,472 The links in the left like made by me. 38 00:02:05,472 --> 00:02:07,692 You can put your name in there if you're copying the code. 39 00:02:08,382 --> 00:02:12,992 And another one which is going to be check out my other projects. 40 00:02:13,172 --> 00:02:15,842 And of course you should link this and we're going to put 41 00:02:15,842 --> 00:02:17,402 some hrefs in that later on. 42 00:02:17,612 --> 00:02:19,412 You should link this to your portfolio. 43 00:02:19,929 --> 00:02:22,659 Then in the right hand side, we have two columns. 44 00:02:22,809 --> 00:02:28,179 So I'm actually going to create a div with a class of footer__column. 45 00:02:28,629 --> 00:02:31,509 And in here, I'm going to put my two elements. 46 00:02:31,509 --> 00:02:32,529 So I'm just going to copy them. 47 00:02:32,679 --> 00:02:33,819 So it's a little bit easier. 48 00:02:34,149 --> 00:02:37,749 And then here, we're going to have recent and calendar. 49 00:02:38,749 --> 00:02:42,649 And then we're going to have another column, which is going to have 50 00:02:42,709 --> 00:02:45,549 the about and how this was made. 51 00:02:46,049 --> 00:02:50,329 This is going to link away to your personal page or my personal page. 52 00:02:50,749 --> 00:02:52,729 This one is going to link away to your portfolio. 53 00:02:52,909 --> 00:02:54,859 These are the in-page navigation. 54 00:02:54,859 --> 00:02:57,589 They are also in the footer so the users can find them a bit more easily. 55 00:02:57,716 --> 00:03:00,296 And then we've got the about page, which is going to tell you a little bit 56 00:03:00,506 --> 00:03:04,316 about the project or maybe the people that made it or anything else you want. 57 00:03:04,631 --> 00:03:08,351 And this is going to be a link to your portfolio page that describes 58 00:03:08,351 --> 00:03:10,151 how you made this project. 59 00:03:10,414 --> 00:03:11,974 So all of these links are in there. 60 00:03:12,214 --> 00:03:14,554 And of course, when we see this and refresh the page. 61 00:03:14,674 --> 00:03:17,374 It looks terrible because we need CSS in order to separate 62 00:03:17,374 --> 00:03:18,424 these things into columns. 63 00:03:18,424 --> 00:03:23,224 Give them spacing and, you know, center them in the page, et cetera, et cetera. 64 00:03:24,169 --> 00:03:26,129 Alright, thank you guys for joining me in this video. 65 00:03:26,159 --> 00:03:28,109 We've got the structure of the footer. 66 00:03:28,289 --> 00:03:31,619 Now we're going to continue in the next video with CSS. 67 00:03:31,649 --> 00:03:32,759 So I'll see you there.