1 00:00:02,170 --> 00:00:04,939 So let's work on some styling. 2 00:00:04,939 --> 00:00:08,160 And before we write any form specific styles, 3 00:00:08,160 --> 00:00:12,520 I want to set up some base styles and style settings. 4 00:00:12,520 --> 00:00:13,353 For example, 5 00:00:13,353 --> 00:00:15,440 I also want to add some base fonts 6 00:00:15,440 --> 00:00:18,210 that I'll use throughout this project. 7 00:00:18,210 --> 00:00:20,630 Now, the most convenient way of adding fonts 8 00:00:20,630 --> 00:00:22,330 is to use Google Fonts. 9 00:00:22,330 --> 00:00:24,040 And you can, of course, 10 00:00:24,040 --> 00:00:25,620 pick any fonts you want here 11 00:00:25,620 --> 00:00:28,890 to customize your project for you. 12 00:00:28,890 --> 00:00:32,430 I will go with this Montserrat font here. 13 00:00:32,430 --> 00:00:33,860 Because I like that. 14 00:00:33,860 --> 00:00:35,350 So I'll choose this 15 00:00:35,350 --> 00:00:40,120 and here I'll pick the regular version 16 00:00:40,120 --> 00:00:42,600 and click on select this style 17 00:00:42,600 --> 00:00:45,530 and then choose the bold version, 18 00:00:45,530 --> 00:00:47,113 the 700 version. 19 00:00:49,100 --> 00:00:52,730 And then here we get the HTML elements we need to add 20 00:00:52,730 --> 00:00:53,563 to our project. 21 00:00:53,563 --> 00:00:54,873 So I'll copy that. 22 00:00:55,920 --> 00:00:58,250 And then back here in the project, 23 00:00:58,250 --> 00:01:03,250 I will go to head.ejs because that is this base head section 24 00:01:03,490 --> 00:01:05,280 that we use on all the pages. 25 00:01:05,280 --> 00:01:07,860 And there below the title, 26 00:01:07,860 --> 00:01:11,290 I'll insert these elements, like this. 27 00:01:11,290 --> 00:01:13,220 So that these links are 28 00:01:13,220 --> 00:01:15,220 inserted here in the head section. 29 00:01:15,220 --> 00:01:19,010 The links I just grabbed from Google Fonts. 30 00:01:19,010 --> 00:01:21,440 And the link element you learned is an element 31 00:01:21,440 --> 00:01:24,210 that allows us to link to other style sheets. 32 00:01:24,210 --> 00:01:26,990 In this case, style sheets defined by Google, 33 00:01:26,990 --> 00:01:29,363 which in turn define these fonts. 34 00:01:30,210 --> 00:01:32,820 If you want to learn how to define your own fonts, 35 00:01:32,820 --> 00:01:35,790 we do dive deeper into this a little bit more advanced 36 00:01:35,790 --> 00:01:38,290 technique in our CSS cores. 37 00:01:38,290 --> 00:01:41,500 Here we're just going to stick to Google Fonts instead 38 00:01:41,500 --> 00:01:44,853 because that is quite common to do in web development. 39 00:01:46,060 --> 00:01:48,400 So now we've got this set up, we've got these fonts. 40 00:01:48,400 --> 00:01:52,240 Now I also want to add my own CSS file 41 00:01:52,240 --> 00:01:54,973 with some base CSS setup. 42 00:01:56,040 --> 00:01:58,200 And for this and the project folder, 43 00:01:58,200 --> 00:02:02,450 I'll add a new public folder because I want to group all the 44 00:02:02,450 --> 00:02:07,450 CSS and JavaScript files that will ultimately be exposed 45 00:02:07,760 --> 00:02:09,070 to our visitors. 46 00:02:09,070 --> 00:02:10,330 They have to. 47 00:02:10,330 --> 00:02:13,350 I want to group them together into such a public folder, 48 00:02:13,350 --> 00:02:17,570 which is then served statically so that any requests 49 00:02:17,570 --> 00:02:20,640 to such CSS or JavaScript files 50 00:02:20,640 --> 00:02:23,293 are just handled automatically. 51 00:02:24,710 --> 00:02:27,770 In this public folder I'll add a styles folder. 52 00:02:27,770 --> 00:02:31,640 And in this styles folder I'll add a base.css file 53 00:02:31,640 --> 00:02:33,540 and as you might imagine, 54 00:02:33,540 --> 00:02:36,823 here I want to set up some base CSS rules. 55 00:02:37,960 --> 00:02:40,380 Now before we write any CSS code, 56 00:02:40,380 --> 00:02:43,740 I want to ensure that this file is served statically 57 00:02:43,740 --> 00:02:48,230 so that it can be requested by any HTML pages. 58 00:02:48,230 --> 00:02:50,540 And for this in app.js, 59 00:02:50,540 --> 00:02:53,260 after setting up the view engine here, 60 00:02:53,260 --> 00:02:56,400 we can use this express app object again 61 00:02:56,400 --> 00:02:58,270 to use some middleware 62 00:02:58,270 --> 00:03:00,610 and here we want to use some middleware 63 00:03:00,610 --> 00:03:02,940 that's actually built into express, 64 00:03:02,940 --> 00:03:06,990 but that still has to be activated explicitly. 65 00:03:06,990 --> 00:03:09,330 And that is this static middleware, 66 00:03:09,330 --> 00:03:13,180 which we can access on the express object itself. 67 00:03:13,180 --> 00:03:16,780 And here we can just pass the name of a folder 68 00:03:16,780 --> 00:03:19,460 which we want to serve statically. 69 00:03:19,460 --> 00:03:23,480 So now all the content in the public folder can be requested 70 00:03:23,480 --> 00:03:25,140 by visitors. 71 00:03:25,140 --> 00:03:25,973 And of course, 72 00:03:25,973 --> 00:03:30,000 they're not going to request our CSS files themselves, 73 00:03:30,000 --> 00:03:33,990 but their browsers will request them for them because we'll 74 00:03:33,990 --> 00:03:38,990 include links to our CSS code in our HTML files in the end. 75 00:03:40,970 --> 00:03:42,910 Because that's the next step I'll do. 76 00:03:42,910 --> 00:03:46,060 In views, includes head 77 00:03:46,060 --> 00:03:50,940 and after defining all these links to the Google Fonts, 78 00:03:50,940 --> 00:03:54,910 I'll add my own link by typing link and hitting tab. 79 00:03:54,910 --> 00:03:58,233 And here I want to point at styles base.css. 80 00:03:59,500 --> 00:04:04,500 Very important, here we don't have /public/styles/base.css 81 00:04:07,260 --> 00:04:11,240 but just /styles/base.css. 82 00:04:11,240 --> 00:04:14,890 Because the public folder is not part of the path 83 00:04:14,890 --> 00:04:17,110 instead, this here is the path 84 00:04:17,110 --> 00:04:19,200 to which a request will be sent 85 00:04:19,200 --> 00:04:21,610 and thanks to our static middleware, 86 00:04:21,610 --> 00:04:24,110 express will look into the public folder 87 00:04:24,110 --> 00:04:25,830 and see if it finds a path 88 00:04:25,830 --> 00:04:29,510 in there that satisfies this request path. 89 00:04:29,510 --> 00:04:31,330 Which here of course is the case, 90 00:04:31,330 --> 00:04:34,210 since we'll have a styles folder with a base CSS file 91 00:04:34,210 --> 00:04:35,800 in there. 92 00:04:35,800 --> 00:04:39,080 So that's why in the head.ejs file 93 00:04:39,080 --> 00:04:43,463 we just have /styles/bass.css here. 94 00:04:44,870 --> 00:04:47,410 With that this file will be included, 95 00:04:47,410 --> 00:04:49,970 but I can already say it won't be the only file 96 00:04:49,970 --> 00:04:51,460 we need here. 97 00:04:51,460 --> 00:04:53,850 Instead in this styles file, 98 00:04:53,850 --> 00:04:56,700 I will also add a forms.css file 99 00:04:56,700 --> 00:04:59,780 with some general form specific styles 100 00:04:59,780 --> 00:05:04,080 that will apply to all the forms in this entire website 101 00:05:04,080 --> 00:05:08,850 and I'll add an auth.css file with specific CSS code 102 00:05:08,850 --> 00:05:10,943 for the sign up and log in views. 103 00:05:11,820 --> 00:05:13,320 Now, theoretically, 104 00:05:13,320 --> 00:05:17,790 we could work with only one big CSS file. 105 00:05:17,790 --> 00:05:21,563 This would be fine from a security perspective, for example. 106 00:05:22,430 --> 00:05:25,430 But it would have two disadvantages. 107 00:05:25,430 --> 00:05:29,950 One big disadvantage is that it would be a large file with 108 00:05:29,950 --> 00:05:32,120 lots of CSS code in there 109 00:05:32,120 --> 00:05:33,720 and as a developer, 110 00:05:33,720 --> 00:05:38,663 it can become cumbersome to work in such a code packed file. 111 00:05:39,720 --> 00:05:40,553 In addition, 112 00:05:40,553 --> 00:05:44,430 another disadvantage is that if we write all the CSS code 113 00:05:44,430 --> 00:05:48,642 in one file, all pages have to get all the CSS code 114 00:05:48,642 --> 00:05:53,070 even if they only need parts of that CSS code. 115 00:05:53,070 --> 00:05:56,670 That means that all that CSS code needs to be requested 116 00:05:56,670 --> 00:05:59,760 and downloaded for every page you visit 117 00:05:59,760 --> 00:06:03,620 and this can be a performance problem 118 00:06:03,620 --> 00:06:06,070 and a waste of bandwidth. 119 00:06:06,070 --> 00:06:09,320 And therefore, you want to split your CSS code 120 00:06:09,320 --> 00:06:11,360 into granular files 121 00:06:11,360 --> 00:06:15,230 so that you can fetch as little CSS code as needed 122 00:06:15,230 --> 00:06:17,890 and not everything all the time. 123 00:06:17,890 --> 00:06:20,883 That's why I'm splitting it into multiple files. 124 00:06:22,590 --> 00:06:23,660 Therefore, of course, 125 00:06:23,660 --> 00:06:27,330 I also want to link to form.css and auth.css 126 00:06:27,330 --> 00:06:31,370 but I don't want to do this in head.ejs 127 00:06:31,370 --> 00:06:32,690 because I just explained 128 00:06:32,690 --> 00:06:37,040 that I don't want to get all the CSS code on all my pages 129 00:06:37,040 --> 00:06:41,680 but I do plan to use head.ejs on all my pages. 130 00:06:41,680 --> 00:06:45,990 So if it would add the links to forms and auth.css in here, 131 00:06:45,990 --> 00:06:50,053 I would still get those CSS files on all pages. 132 00:06:51,080 --> 00:06:56,080 That is why I didn't close the head tag here in head.ejs. 133 00:06:56,200 --> 00:07:00,630 Because I actually want to be able to add more head content 134 00:07:00,630 --> 00:07:03,010 in other ejs.files. 135 00:07:03,010 --> 00:07:05,660 In this case, in signup.ejs. 136 00:07:05,660 --> 00:07:08,140 I do close the head tag here 137 00:07:08,140 --> 00:07:10,800 and therefore I can add my own links 138 00:07:10,800 --> 00:07:13,300 that are specific to the signup page 139 00:07:13,300 --> 00:07:16,730 here between the include of head.ejs 140 00:07:16,730 --> 00:07:18,880 and the closing head tag. 141 00:07:18,880 --> 00:07:19,790 And it's therefore, 142 00:07:19,790 --> 00:07:24,710 here where I will add a link to /styles/forms.css 143 00:07:26,190 --> 00:07:29,053 and then thereafter, to /auth.css. 144 00:07:32,020 --> 00:07:35,170 The order is not too important here 145 00:07:35,170 --> 00:07:40,070 but it does matter if I overwrite some forms 146 00:07:40,070 --> 00:07:42,960 or base styles in auth.css 147 00:07:42,960 --> 00:07:46,740 that would only work if auth.css comes last. 148 00:07:46,740 --> 00:07:51,430 If I have a clash with forms.css and auth.css comes first, 149 00:07:51,430 --> 00:07:53,790 form.css would win instead. 150 00:07:53,790 --> 00:07:54,623 And therefore, 151 00:07:54,623 --> 00:07:58,100 I will actually import the most specific CSS file 152 00:07:58,100 --> 00:08:01,710 which is specifically for this auth page last. 153 00:08:01,710 --> 00:08:03,590 So that I have the opportunity 154 00:08:03,590 --> 00:08:06,613 of overwriting any other styles in there. 155 00:08:08,140 --> 00:08:09,850 Okay, So that was a lot of talking 156 00:08:09,850 --> 00:08:11,620 but now this is set up. 157 00:08:11,620 --> 00:08:15,050 And now we can start writing our CSS code 158 00:08:15,050 --> 00:08:16,300 and as mentioned before, 159 00:08:16,300 --> 00:08:20,623 I will start with some base styles in the base.css file. 160 00:08:21,710 --> 00:08:24,570 Now in this base.css file, 161 00:08:24,570 --> 00:08:27,280 I will start with a special selector 162 00:08:27,280 --> 00:08:29,740 which we haven't actually seen 163 00:08:29,740 --> 00:08:31,860 or used too often in this course 164 00:08:31,860 --> 00:08:34,130 and that's the *selector. 165 00:08:34,130 --> 00:08:35,929 This is a very simple selector, 166 00:08:35,929 --> 00:08:40,299 it selects all elements on the entire page. 167 00:08:40,299 --> 00:08:43,120 And I'm doing this because for all the elements, 168 00:08:43,120 --> 00:08:46,470 I want to set box-sizing to border-box. 169 00:08:46,470 --> 00:08:48,010 This controls in the end, 170 00:08:48,010 --> 00:08:50,690 what the width of an element will be in the end, 171 00:08:50,690 --> 00:08:54,040 if the border and so on counts into the width or not. 172 00:08:54,040 --> 00:08:55,300 And with border box, 173 00:08:55,300 --> 00:08:59,970 I got a behavior that makes working with widths a bit easier 174 00:08:59,970 --> 00:09:03,280 because the width of an element then includes everything 175 00:09:03,280 --> 00:09:05,100 and if I set the width of an element, 176 00:09:05,100 --> 00:09:07,820 I don't have to check if it also has a border, 177 00:09:07,820 --> 00:09:11,690 which would make it a bit wider, which I might not want. 178 00:09:11,690 --> 00:09:14,630 So this is a little convenience to ensure that the 179 00:09:14,630 --> 00:09:18,650 width of all the elements is exactly what I set it to, 180 00:09:18,650 --> 00:09:20,943 no matter if they have a border or not. 181 00:09:22,460 --> 00:09:23,293 But after that, 182 00:09:23,293 --> 00:09:28,293 I'll add the HTML type selector to target the HTML element 183 00:09:28,500 --> 00:09:31,850 because on this element, I want to set the font family. 184 00:09:31,850 --> 00:09:33,780 I could also do this on the body, 185 00:09:33,780 --> 00:09:35,260 it doesn't matter too much. 186 00:09:35,260 --> 00:09:39,460 But with HTML, thanks to CSS inheritance, 187 00:09:39,460 --> 00:09:41,326 which you learned about in this course, 188 00:09:41,326 --> 00:09:44,780 all elements will get this font family. 189 00:09:44,780 --> 00:09:49,330 Because they all are inside of HTML, of the HTML element. 190 00:09:49,330 --> 00:09:53,400 They are all descendants of the HTML element and therefore, 191 00:09:53,400 --> 00:09:56,730 they will all inherit from the HTML element. 192 00:09:56,730 --> 00:10:00,210 And so the font families set up here will be inherited 193 00:10:00,210 --> 00:10:03,810 and therefore, used by all the other HTML elements, 194 00:10:03,810 --> 00:10:04,993 which is what I want. 195 00:10:06,250 --> 00:10:08,350 And here I'll set this to Montserrat, 196 00:10:08,350 --> 00:10:11,240 which is that font we added from Google Fonts 197 00:10:11,240 --> 00:10:13,290 and then thereafter, sans-serif 198 00:10:13,290 --> 00:10:15,793 to use another font as a fallback. 199 00:10:17,780 --> 00:10:20,320 So that now sets this font family. 200 00:10:20,320 --> 00:10:24,660 And if we save all files now with all these links added 201 00:10:24,660 --> 00:10:28,300 and so on, if we go back and reload this page, 202 00:10:28,300 --> 00:10:31,350 we should already see that the font changes. 203 00:10:31,350 --> 00:10:33,360 If it doesn't change double check 204 00:10:33,360 --> 00:10:35,060 that you're importing it correctly, 205 00:10:35,060 --> 00:10:39,230 that you don't have any typos in your file names and so on. 206 00:10:39,230 --> 00:10:41,163 But now we got the font in place. 207 00:10:42,100 --> 00:10:44,210 Of course the font is not everything though. 208 00:10:44,210 --> 00:10:46,530 We also want to work with colors. 209 00:10:46,530 --> 00:10:49,380 We'll need plenty of colors for different elements 210 00:10:49,380 --> 00:10:50,213 on this page. 211 00:10:50,213 --> 00:10:51,354 And I don't want 212 00:10:51,354 --> 00:10:55,950 to have to redefine colors in all my CSS files. 213 00:10:55,950 --> 00:10:58,220 Because we'll have plenty of CSS files 214 00:10:58,220 --> 00:11:00,540 by the end of this project. 215 00:11:00,540 --> 00:11:02,430 Therefore, in the next lecture, 216 00:11:02,430 --> 00:11:05,770 we'll see what else we can do to manage colors 217 00:11:05,770 --> 00:11:08,923 and other settings in one global place.