1 00:00:00,240 --> 00:00:05,730 Welcome back to part two of styling your application and this one we're going to wrap up what we started 2 00:00:05,730 --> 00:00:07,320 in the last video. 3 00:00:07,320 --> 00:00:11,280 Now the first thing I want to style is what lives on the about page. 4 00:00:11,280 --> 00:00:12,550 That is our image. 5 00:00:12,600 --> 00:00:15,710 We previously had a style in place that targeted that. 6 00:00:15,960 --> 00:00:22,430 And if you remember it looked a little bit like this image then we set up our curly braces and all I 7 00:00:22,430 --> 00:00:25,360 did was set a width with equals 250. 8 00:00:25,370 --> 00:00:30,950 When we do this it's also going to adjust the height proportionally so the image doesn't look sort of 9 00:00:30,950 --> 00:00:31,880 skewed. 10 00:00:31,880 --> 00:00:34,760 And if I refresh the page things look fine. 11 00:00:34,760 --> 00:00:39,820 Now this is going to change all images on the page which might not be what we want. 12 00:00:39,830 --> 00:00:45,920 Imagine we have a large background image or we have an image that takes up the entire width of the content. 13 00:00:45,920 --> 00:00:48,630 That's going to need a different set of styles. 14 00:00:48,680 --> 00:00:55,790 So instead of targeting every single image we're going to use the class selector that allows us to target 15 00:00:55,820 --> 00:00:57,890 a specific set of elements. 16 00:00:57,890 --> 00:01:03,350 And right here we start off with DOT followed by a name for this class. 17 00:01:03,350 --> 00:01:08,790 And since this is a portrait image I could call the class something like portrait. 18 00:01:08,990 --> 00:01:11,890 So it's dot followed by the class name. 19 00:01:11,930 --> 00:01:17,600 Now at no point anywhere in our code have we ever typed a portrait which means that the style is never 20 00:01:17,600 --> 00:01:18,740 gonna get applied. 21 00:01:18,740 --> 00:01:25,520 If I refresh the page we're back to that really big image to actually have this style used. 22 00:01:25,520 --> 00:01:33,290 We set up a class attribute on our HDL elements where we want these styles to be applied in this case 23 00:01:33,560 --> 00:01:37,610 that would be for the about page and it would be this image right here. 24 00:01:37,610 --> 00:01:43,160 So as I just mentioned that is class equals inside of quotes. 25 00:01:43,160 --> 00:01:50,600 We can provide as many classes as we want in this case just one portrait if I wanted another it would 26 00:01:50,600 --> 00:01:54,560 be space followed by whatever the other class name is. 27 00:01:54,560 --> 00:02:00,740 So by listing out the class I'm essentially saying I want this element to take on these styles applied 28 00:02:00,770 --> 00:02:05,870 to that class which in this case is just the one we've set up here. 29 00:02:05,900 --> 00:02:10,160 So this is just a different way to target elements on your page. 30 00:02:10,160 --> 00:02:16,070 Now if I refresh things we have our portrait image showing up as expected and we could choose to have 31 00:02:16,100 --> 00:02:20,080 other images that have a completely different set of styles. 32 00:02:20,150 --> 00:02:25,640 So now that we have this in place what I want to focus on is that footer as I navigate between the pages 33 00:02:25,640 --> 00:02:30,310 you'll notice that the footer is just as high as it can possibly be. 34 00:02:30,360 --> 00:02:35,180 Ideally it would be sticking to the bottom of the page and that's what we're going to focus on setting 35 00:02:35,240 --> 00:02:36,650 up now to do that. 36 00:02:36,650 --> 00:02:39,080 We're gonna have to adjust a few things. 37 00:02:39,080 --> 00:02:44,820 So let's go ahead and get started by closing down a header as we're no longer going to need that. 38 00:02:44,960 --> 00:02:53,990 I want to crack open about index for 0 4 and help so our four views and we can start with the home page 39 00:02:54,050 --> 00:02:59,740 so I'll drag index to the front of the list and the goal here is to get that sticky footer in place. 40 00:02:59,750 --> 00:03:04,060 I don't want it up top I want it pushed to the bottom of the browser. 41 00:03:04,250 --> 00:03:11,150 Now to do that we're going to use a simple version of a slightly advanced CSX technique known as flex 42 00:03:11,150 --> 00:03:11,900 box. 43 00:03:11,990 --> 00:03:15,820 If you take a course on CSX flex box will be covered. 44 00:03:15,830 --> 00:03:19,830 We're going to use just the very basics here to achieve a sticky footer. 45 00:03:19,850 --> 00:03:25,900 The first thing we need to do is create another element in order to wrap our content as needed. 46 00:03:25,910 --> 00:03:30,520 So what we're gonna do is use the div element like we've done before. 47 00:03:30,690 --> 00:03:36,120 I'm going to put one right here inside of body and what needs to go inside of there is everything but 48 00:03:36,120 --> 00:03:42,750 the footer that's going to include the header partial but it's also going to include any page content. 49 00:03:42,750 --> 00:03:51,300 So for the moment let's add a paragraph to demonstrate that I could say Use this site to get your weather 50 00:03:53,460 --> 00:03:54,030 perfect. 51 00:03:54,330 --> 00:04:00,090 So we want all of our page content the header and anything else we're going to show inside of this div 52 00:04:00,330 --> 00:04:04,500 and the footer is going to sit outside of it using flex box. 53 00:04:04,500 --> 00:04:10,440 We're gonna have this take up all of the space available except what the footer needs that's going to 54 00:04:10,440 --> 00:04:15,500 give us these sticky footer look where the footer is pushed to the bottom of the page. 55 00:04:15,690 --> 00:04:21,510 Now we are going to target this div with a set of styles since div is a very generic element. 56 00:04:21,510 --> 00:04:25,500 It's best to apply a class to it and use that class. 57 00:04:25,500 --> 00:04:28,180 I can go ahead and pick whatever name I like for this. 58 00:04:28,290 --> 00:04:32,220 I'm gonna use main hyphen content as the name. 59 00:04:32,220 --> 00:04:39,360 Now we can correctly style our application getting that sticky footer look over inside of styles dot 60 00:04:39,360 --> 00:04:40,330 CSX. 61 00:04:40,470 --> 00:04:42,710 We have to write a few lines of code. 62 00:04:42,780 --> 00:04:45,350 First we have to enable flex box. 63 00:04:45,360 --> 00:04:48,070 This is a different way to lay out your items. 64 00:04:48,180 --> 00:04:54,390 And we use that by setting display equal to flex for the moment. 65 00:04:54,400 --> 00:05:00,070 I'm just going to use this space to break up our other styles with our Flex box styles which will be 66 00:05:00,070 --> 00:05:01,150 down here. 67 00:05:01,150 --> 00:05:05,260 Now if we do that it's going to give us some undesired results. 68 00:05:05,260 --> 00:05:11,860 If I refresh the page I can see that my footer is now on the right and the rest of my content is now 69 00:05:11,860 --> 00:05:12,970 on the left. 70 00:05:12,970 --> 00:05:17,180 Now that's not what we want and flex box gives us a way to adjust that. 71 00:05:17,200 --> 00:05:24,640 There is a flex hyphen direction property the default value is row which means everything goes from 72 00:05:24,640 --> 00:05:25,840 left to right. 73 00:05:25,900 --> 00:05:31,720 We can optionally change that to column and this is gonna have everything go from top to bottom and 74 00:05:31,720 --> 00:05:32,680 that's what we want. 75 00:05:32,680 --> 00:05:38,020 So right here I refresh the page and now we're basically back to what we had before. 76 00:05:38,080 --> 00:05:40,740 But with Flex box enabled. 77 00:05:40,990 --> 00:05:47,350 Now the other thing we need to do is to set the height for the body to take up the entire browser height. 78 00:05:47,350 --> 00:05:53,020 Currently it stops right about here and that's a problem because I want to push the footer all the way 79 00:05:53,020 --> 00:05:57,340 to the bottom of the browser window to get that done. 80 00:05:57,460 --> 00:06:05,570 Oh we're going to do is set the minimum height equal to the browser's height which is one hundred V 81 00:06:05,720 --> 00:06:09,390 H V H stands for the viewport height. 82 00:06:09,410 --> 00:06:16,100 So in this case we have 100 percent of the viewport height the viewport being this box where your content 83 00:06:16,190 --> 00:06:17,420 shows up. 84 00:06:17,600 --> 00:06:23,600 If we didn't want one hundred we could use another value like 50 which would be 50 percent of that viewport 85 00:06:23,630 --> 00:06:23,920 height. 86 00:06:24,380 --> 00:06:28,870 But in this case we do indeed want one hundred now that we have this in place. 87 00:06:28,880 --> 00:06:30,620 We are done styling the body. 88 00:06:30,620 --> 00:06:34,950 We don't have the look we want yet but we are very close to getting it. 89 00:06:35,000 --> 00:06:39,020 The only other thing we need to do is target that class we created. 90 00:06:39,020 --> 00:06:45,860 So dot followed by the class name I called it main hyphen content. 91 00:06:45,870 --> 00:06:49,830 And we're going to apply one more flex box style. 92 00:06:49,830 --> 00:06:53,060 This one is called flex hyphen grow. 93 00:06:53,130 --> 00:06:57,610 This allows a given element to grow to take up as much space as it needs. 94 00:06:57,630 --> 00:07:03,840 We're going to set this to one which tells the Flex box that the main content should take up all leftover 95 00:07:03,870 --> 00:07:04,920 space. 96 00:07:04,920 --> 00:07:07,260 Now if we refresh things what do we see. 97 00:07:07,260 --> 00:07:12,750 I can see my footer is pushed to the bottom of the page and as I navigate between the pages I can see 98 00:07:12,900 --> 00:07:18,600 that only the home page is working and that is because we made some changes to the structure adding 99 00:07:18,600 --> 00:07:24,480 that div into place will have to make these same changes to the other page but right here we are indeed 100 00:07:24,540 --> 00:07:26,990 getting the look we were hoping for. 101 00:07:27,000 --> 00:07:32,250 So once again if you want to learn more about flex box I recommend checking it out by taking a Udemy 102 00:07:32,250 --> 00:07:36,310 CSX course or checking it out on a free service like YouTube. 103 00:07:36,570 --> 00:07:41,960 It's a great tool and it's definitely something worth adding to your CSX skillset. 104 00:07:42,210 --> 00:07:42,630 All right. 105 00:07:42,690 --> 00:07:46,790 So from here we're going to focus on our individual template files. 106 00:07:46,800 --> 00:07:51,020 The first thing we need to do is make some adjustments to the other pages. 107 00:07:51,210 --> 00:07:57,720 I am going to set up a div just by typing the element name and hitting tab to auto generate the tag 108 00:07:58,230 --> 00:08:04,400 and then I'll use class of main content here on this page and I'll bring all the main content inside. 109 00:08:04,800 --> 00:08:08,580 That's going to make sure that things work well for our forum for page. 110 00:08:08,580 --> 00:08:09,330 There we go. 111 00:08:09,330 --> 00:08:14,100 Now everything is going to work great and we can test things by pulling up the site. 112 00:08:14,100 --> 00:08:17,950 I'm going to go to local host three thousand forward slash me. 113 00:08:17,970 --> 00:08:22,680 I get my 4 0 4 page and it looks great with that sticky footer in place. 114 00:08:22,860 --> 00:08:24,270 Just two more pages left. 115 00:08:24,270 --> 00:08:31,350 We have help dot HB Yes here I'm going to use div dot main hyphen content. 116 00:08:31,350 --> 00:08:36,690 This is a shorthand for setting up a div element with the class of main content. 117 00:08:36,690 --> 00:08:39,510 And if I hit tab that is exactly what happens. 118 00:08:39,570 --> 00:08:45,300 There are all sorts of great short hands out there and we're going to do is take the content and paste 119 00:08:45,300 --> 00:08:46,550 it right inside. 120 00:08:46,560 --> 00:08:47,610 Perfect. 121 00:08:47,640 --> 00:08:49,270 Now we can save the file. 122 00:08:49,440 --> 00:08:53,860 We can navigate over to the help page and we're getting our sticky footer there as well. 123 00:08:53,910 --> 00:08:58,440 The last page is the about page which currently does not have that structure in place. 124 00:08:58,440 --> 00:09:01,240 Let's go ahead and fix that about that. 125 00:09:01,280 --> 00:09:02,680 HB Yes. 126 00:09:02,730 --> 00:09:11,290 I'm going to generate that div once again div dot main hyphen content then inside of there we put everything 127 00:09:11,320 --> 00:09:14,060 that's on the page except for the footer. 128 00:09:14,110 --> 00:09:17,290 I'm going to paste all of that in indented correctly. 129 00:09:17,290 --> 00:09:18,700 Remove the extra space. 130 00:09:18,730 --> 00:09:20,450 And now we're done. 131 00:09:20,470 --> 00:09:23,150 I can refresh the browser and write here. 132 00:09:23,170 --> 00:09:29,080 I now have all of my pages styled in a way that's uniform as you switch between them it feels like the 133 00:09:29,080 --> 00:09:32,360 same site which is exactly what we were going for. 134 00:09:32,410 --> 00:09:36,010 Now from here there are a couple small changes I would like to make. 135 00:09:36,010 --> 00:09:41,940 One is to customize the title in the tab as well as the icon that's showing up. 136 00:09:41,930 --> 00:09:45,370 So right here we do that inside of head. 137 00:09:45,480 --> 00:09:50,640 I'm gonna start by setting up the title by opening and closing the title tag and right inside. 138 00:09:50,640 --> 00:09:56,730 We put the title so far about I could use about that's going to show up in the tab and now we can do 139 00:09:56,730 --> 00:10:00,300 the same thing for the other pages for help. 140 00:10:00,300 --> 00:10:06,030 Inside of head I will set up title and I will say help for 4 0 4. 141 00:10:06,030 --> 00:10:10,520 We're also going to set up that title and I will use for 0 4. 142 00:10:10,650 --> 00:10:16,110 And then finally for the home page we will set up the title and I can go ahead and use something like 143 00:10:16,170 --> 00:10:17,220 weather. 144 00:10:17,250 --> 00:10:21,870 Now as we navigate between the pages in the browser we'll see those showing up. 145 00:10:21,870 --> 00:10:27,510 I'll refresh the home page I get whether I then have about for the about page and help for the help 146 00:10:27,510 --> 00:10:28,560 page. 147 00:10:28,560 --> 00:10:34,140 The last thing we're going to do is customize the icon that shows up in the tab. 148 00:10:34,140 --> 00:10:39,590 This also requires us to add a little code to the header but first we need the image. 149 00:10:39,630 --> 00:10:47,250 Now I've already picked one out for you that you can use that is links dot Meade dot I O forward slash 150 00:10:47,310 --> 00:10:54,720 pic 3 pic 3 contains a very small icon of a cloud in front of a sun. 151 00:10:54,720 --> 00:11:01,290 We're gonna go ahead and right click that save image as and we're going to put this in our project image 152 00:11:01,290 --> 00:11:02,290 directory. 153 00:11:02,290 --> 00:11:04,910 So on the desktop that's where I have mine. 154 00:11:05,160 --> 00:11:11,220 I have the web server folder in there we have public image that's where I want to put the content. 155 00:11:11,370 --> 00:11:13,240 I'm gonna save it inside of there. 156 00:11:13,290 --> 00:11:20,580 Close the browser tab and make sure it's actually showing up so inside a visual studio code I have my 157 00:11:20,580 --> 00:11:24,730 images directory and in there I have weather dot PMG. 158 00:11:24,780 --> 00:11:30,750 Let's go ahead and actually use it and to do this we use LINQ similar to how we linked in a style sheet 159 00:11:31,030 --> 00:11:33,260 though in this case we're linking in an icon. 160 00:11:33,630 --> 00:11:35,980 So I'll setup link. 161 00:11:36,220 --> 00:11:41,260 We're going to set up rail as well as h ref. 162 00:11:41,320 --> 00:11:46,150 Now the relationship between the document and what we're about to link in is not a style sheet. 163 00:11:46,150 --> 00:11:47,520 It is an icon. 164 00:11:47,650 --> 00:11:53,090 And the ref is the path to that image forward slash image forward slash. 165 00:11:53,170 --> 00:11:56,040 I've called this one whether dot PMG. 166 00:11:56,170 --> 00:11:57,250 Perfect. 167 00:11:57,250 --> 00:12:01,330 Now if I do refresh the home page I'll navigate to it. 168 00:12:01,480 --> 00:12:07,090 We can see that we have our little weather icon showing up making the site feel much nicer and a little 169 00:12:07,090 --> 00:12:08,380 more real. 170 00:12:08,380 --> 00:12:14,450 I can then take that one line and copy it to my other files so I'll copy it over under the title for 171 00:12:14,450 --> 00:12:17,830 4 0 4 under the title for help. 172 00:12:17,950 --> 00:12:24,880 And finally under the title for about now as we navigate between all of the pages on our site it doesn't 173 00:12:24,880 --> 00:12:27,040 feel like anything's been left out. 174 00:12:27,040 --> 00:12:33,490 The tab is nice and styled the content itself is nice and styled and we have that uniform feel as we 175 00:12:33,490 --> 00:12:35,170 navigate between the pages. 176 00:12:35,170 --> 00:12:40,360 Now even if you plan on spending all of your time writing note applications it's still worth at least 177 00:12:40,360 --> 00:12:44,200 brushing up on the basics of HDL and CSX. 178 00:12:44,200 --> 00:12:49,850 That's going to allow you to create nice front end stuff for your note J S applications. 179 00:12:49,900 --> 00:12:55,480 Now even if you're on a large team or that's not your job it's still nice to have that skill set so 180 00:12:55,480 --> 00:13:00,700 you can whip up together something basic at least making it look a little nicer than it would otherwise 181 00:13:00,700 --> 00:13:03,400 be with no styles in place. 182 00:13:03,400 --> 00:13:03,940 All right. 183 00:13:03,940 --> 00:13:05,190 That's it for this video. 184 00:13:05,200 --> 00:13:07,230 And that is it for this section. 185 00:13:07,300 --> 00:13:13,660 We covered quite a bit in this section exploring a few very important topics we explored how to setup 186 00:13:13,690 --> 00:13:15,540 a web server with Express. 187 00:13:15,550 --> 00:13:17,970 And we did that in app dot J S. 188 00:13:18,130 --> 00:13:23,710 We learned all sorts of things like how we can use handlebars to render templates how we can serve up 189 00:13:23,710 --> 00:13:30,580 static assets and how we can send back Jason data set up for all four pages and more now we've still 190 00:13:30,580 --> 00:13:34,150 only scratched the surface of what Express can do. 191 00:13:34,150 --> 00:13:39,160 It's something we'll end up using throughout the rest of the class even as we integrate more advanced 192 00:13:39,160 --> 00:13:42,090 features like real world databases. 193 00:13:42,100 --> 00:13:44,260 I'm excited to continue on with the course. 194 00:13:44,260 --> 00:13:47,290 I'll see you in the section intro for the next one.