1 00:00:02,090 --> 00:00:06,530 This is the finished HTML part of our website. 2 00:00:06,530 --> 00:00:07,570 This doesn't look good, 3 00:00:07,570 --> 00:00:11,223 so let's continue with our styling. 4 00:00:12,260 --> 00:00:13,310 Back in the code, 5 00:00:13,310 --> 00:00:17,260 I'm still in the index HTML file because, 6 00:00:17,260 --> 00:00:20,090 before we dive into the CSS part, 7 00:00:20,090 --> 00:00:24,750 I first want to add a link to some fonts from Google fonts, 8 00:00:24,750 --> 00:00:27,350 and that will of course create the style sheet 9 00:00:27,350 --> 00:00:30,463 and the reference to it in the HTML file. 10 00:00:31,830 --> 00:00:35,680 Attached to this lecture you can find the code, 11 00:00:35,680 --> 00:00:39,420 the link to the Google fonts as a first step. 12 00:00:39,420 --> 00:00:44,420 So simply take this link and paste it here below our title. 13 00:00:44,580 --> 00:00:46,430 So this should look like this, 14 00:00:46,430 --> 00:00:49,253 maybe also format it correctly. 15 00:00:50,480 --> 00:00:55,480 Besides this, we'll also create our CSS file, 16 00:00:55,760 --> 00:00:59,310 I'll call it simply styles CSS, 17 00:00:59,310 --> 00:01:02,670 And again, back in the HTML file, 18 00:01:02,670 --> 00:01:05,110 below our link to Google fonts, 19 00:01:05,110 --> 00:01:10,110 we'll add our link to the style sheet 20 00:01:10,320 --> 00:01:13,790 with the reference to style CSS. 21 00:01:13,790 --> 00:01:16,990 Again, it's important to add the link to Google fonts 22 00:01:16,990 --> 00:01:20,460 ahead of the link to the style CSS file, 23 00:01:20,460 --> 00:01:23,830 because in the CSS file, we want to use our fonts, 24 00:01:23,830 --> 00:01:28,830 therefore we first have to establish the link to the fonts. 25 00:01:29,020 --> 00:01:32,760 With this, can save our HTML file and by the way, 26 00:01:32,760 --> 00:01:34,700 in case you skipped the last lecture, 27 00:01:34,700 --> 00:01:36,940 you can of course also find this file 28 00:01:36,940 --> 00:01:38,483 attached to this lecture. 29 00:01:39,620 --> 00:01:41,980 So with the HTML part being finished, 30 00:01:41,980 --> 00:01:45,163 we can now go to the styles CSS file. 31 00:01:46,520 --> 00:01:51,210 In here, I will now go through our elements on our page, 32 00:01:51,210 --> 00:01:53,670 basically in a chronological order, 33 00:01:53,670 --> 00:01:55,200 so top to bottom, 34 00:01:55,200 --> 00:01:59,210 therefore I'll first select our body element 35 00:01:59,210 --> 00:02:00,960 and in the body element, 36 00:02:00,960 --> 00:02:05,180 I would like to add three different properties. 37 00:02:05,180 --> 00:02:09,479 The first property is the font family. 38 00:02:09,479 --> 00:02:12,420 We just established the link to Google fonts, 39 00:02:12,420 --> 00:02:14,970 therefore, I also want to make use of 40 00:02:14,970 --> 00:02:18,160 one of these imported fonts, specifically 41 00:02:18,160 --> 00:02:23,160 I want to use this open sans font that we have in here. 42 00:02:23,430 --> 00:02:26,020 Therefore, in single quotation marks, 43 00:02:26,020 --> 00:02:28,560 we will add open sans.. 44 00:02:28,560 --> 00:02:32,040 So capital letters at the beginning and the space 45 00:02:32,040 --> 00:02:36,863 and as fall back, we'll again, use our sans serif font. 46 00:02:37,810 --> 00:02:39,860 Besides this, I want to eliminate 47 00:02:39,860 --> 00:02:43,220 any margin around our body element. 48 00:02:43,220 --> 00:02:47,380 So we set the top left bottom and right margin to zero, 49 00:02:47,380 --> 00:02:52,380 and we'll add some background color to our website. 50 00:02:52,830 --> 00:02:55,830 So we use the background color property, 51 00:02:55,830 --> 00:03:00,097 and here I prepared an RGB code with a value of 52 00:03:00,097 --> 00:03:05,097 44 for red, 41 for green and 38 for blue. 53 00:03:09,140 --> 00:03:11,620 I mentioned this already in the last lecture, 54 00:03:11,620 --> 00:03:15,260 in case you missed it, we'll only apply concepts learned 55 00:03:15,260 --> 00:03:16,740 throughout this course already, 56 00:03:16,740 --> 00:03:19,770 therefore I'll not dive too deep into 57 00:03:19,770 --> 00:03:22,930 all of these properties and how these work. 58 00:03:22,930 --> 00:03:25,710 With this in place though, if we check our page, 59 00:03:25,710 --> 00:03:28,540 yup, we are coming a bit closer. 60 00:03:28,540 --> 00:03:30,970 We now have a nicer font 61 00:03:30,970 --> 00:03:33,220 and we have this background color, of course, 62 00:03:33,220 --> 00:03:36,930 and we can actually also open our developer tools 63 00:03:36,930 --> 00:03:40,990 just in case we need these, so like this. 64 00:03:40,990 --> 00:03:43,620 Although not perfectly visible here, 65 00:03:43,620 --> 00:03:46,140 we have links on our website. 66 00:03:46,140 --> 00:03:49,960 For example, these two links appear for our navigation bar 67 00:03:49,960 --> 00:03:54,340 and I don't like the default text decoration here, 68 00:03:54,340 --> 00:03:57,210 so the underscore that we have below our link, 69 00:03:57,210 --> 00:04:00,810 therefore let's go back to the style CSS file 70 00:04:00,810 --> 00:04:04,740 and apply a general style to all anchor texts, 71 00:04:04,740 --> 00:04:06,763 which are our links, in the end. 72 00:04:07,640 --> 00:04:10,050 And this style should simply be 73 00:04:10,050 --> 00:04:14,560 the text decoration property being set to none. 74 00:04:14,560 --> 00:04:17,363 With this, the underscore is eliminated. 75 00:04:19,130 --> 00:04:22,060 These are some default stylings now. 76 00:04:22,060 --> 00:04:26,620 Let's now go into the specific sections of our website. 77 00:04:26,620 --> 00:04:30,640 Specifically, I would like to get started with our header, 78 00:04:30,640 --> 00:04:33,603 with the ID of main header in here. 79 00:04:34,490 --> 00:04:36,510 The header should have the typical look 80 00:04:36,510 --> 00:04:38,170 we learned throughout this course. 81 00:04:38,170 --> 00:04:41,040 So the logo here should be to the left 82 00:04:41,040 --> 00:04:44,030 and the navigation items should be to the right 83 00:04:44,030 --> 00:04:46,540 and of course be displayed next to each other, 84 00:04:46,540 --> 00:04:48,210 not below each other. 85 00:04:48,210 --> 00:04:49,530 I can also zoom in a bit here, 86 00:04:49,530 --> 00:04:52,193 so these should be positioned next to each other. 87 00:04:53,170 --> 00:04:57,565 For this, we'll use the ID selector with the hash here 88 00:04:57,565 --> 00:05:00,573 and refer to the main header. 89 00:05:01,770 --> 00:05:05,760 And in here, we'll now add some well-known properties. 90 00:05:05,760 --> 00:05:09,540 First, I'd like to add the height property here. 91 00:05:09,540 --> 00:05:12,160 Throughout the course, we typically used padding 92 00:05:12,160 --> 00:05:16,790 to increase the height of elements, but here for our header, 93 00:05:16,790 --> 00:05:18,750 I would like to have a fixed height. 94 00:05:18,750 --> 00:05:21,330 Therefore, in this rare case actually, 95 00:05:21,330 --> 00:05:25,120 we define the height here in our CSS rule 96 00:05:25,120 --> 00:05:30,120 and for the height I'll use maybe 80 pixels. 97 00:05:31,720 --> 00:05:33,880 We'll see if this works, 98 00:05:33,880 --> 00:05:38,520 besides that, to arrange the items inside our main header 99 00:05:38,520 --> 00:05:41,440 we'll use flexbox once again. 100 00:05:41,440 --> 00:05:44,290 So this would allow us to position a logo to the left 101 00:05:44,290 --> 00:05:46,620 and the nav items to the right, 102 00:05:46,620 --> 00:05:50,210 and to define the space between, as what it is in the end, 103 00:05:50,210 --> 00:05:52,690 the space between these two different 104 00:05:52,690 --> 00:05:55,160 element types in our header. 105 00:05:55,160 --> 00:05:58,150 So to turn our header into a flex container, 106 00:05:58,150 --> 00:06:02,423 we apply the text display flex property here. 107 00:06:04,105 --> 00:06:07,500 To add space between our elements 108 00:06:07,500 --> 00:06:08,920 and just to make this clear, 109 00:06:08,920 --> 00:06:12,090 we have the anchor tag here and then the nav element, 110 00:06:12,090 --> 00:06:15,690 which contains our unordered list with the list items, 111 00:06:15,690 --> 00:06:19,700 so we want to add space between these two elements now, 112 00:06:19,700 --> 00:06:24,700 and for this we'll use the justified content property, 113 00:06:25,300 --> 00:06:27,920 which is now available in a flex context, 114 00:06:27,920 --> 00:06:30,403 and set it to space between. 115 00:06:31,630 --> 00:06:34,270 With this in place, if we reload the page, 116 00:06:34,270 --> 00:06:37,270 you see that we have the items here to the right 117 00:06:37,270 --> 00:06:39,853 and we have the logo to the left. 118 00:06:41,040 --> 00:06:45,420 Still, both are not on the same level here. 119 00:06:45,420 --> 00:06:47,760 So what do you must do now is we must 120 00:06:47,760 --> 00:06:52,310 align our items along the cross axis, 121 00:06:52,310 --> 00:06:55,300 left to right would be the main axis, 122 00:06:55,300 --> 00:06:58,110 top to bottom here is the cross axis. 123 00:06:58,110 --> 00:07:00,570 Therefore, back in the code, 124 00:07:00,570 --> 00:07:05,570 with the align items property being set to center, 125 00:07:06,210 --> 00:07:08,660 these elements are now on the same level. 126 00:07:08,660 --> 00:07:11,403 So you can see it here and there. 127 00:07:12,900 --> 00:07:14,320 So this looks all right. 128 00:07:14,320 --> 00:07:17,700 What I don't like is the background color. 129 00:07:17,700 --> 00:07:19,713 We don't have a dedicated background color 130 00:07:19,713 --> 00:07:21,570 for the header element here. 131 00:07:21,570 --> 00:07:24,170 Therefore it's hard to differentiate 132 00:07:24,170 --> 00:07:27,293 between our main section and the actual header. 133 00:07:28,230 --> 00:07:32,693 For this, let's add the background color property. 134 00:07:34,160 --> 00:07:37,790 And again, I prepared an RGB color for you 135 00:07:37,790 --> 00:07:42,790 with 29, 26 and 24. 136 00:07:47,900 --> 00:07:50,720 So now the header becomes a bit more obvious. 137 00:07:50,720 --> 00:07:53,430 And what we'll finally add to the header here 138 00:07:53,430 --> 00:07:56,130 is some padding to make sure our elements 139 00:07:56,130 --> 00:07:58,480 are not sitting directly next 140 00:07:58,480 --> 00:08:02,560 to the left and right border of our header, 141 00:08:02,560 --> 00:08:06,480 for this we'll add some padding of 142 00:08:06,480 --> 00:08:08,690 maybe zero to top and bottom 143 00:08:10,830 --> 00:08:13,580 and maybe 20 pixels left, right? 144 00:08:13,580 --> 00:08:16,200 Let's see, yeah, I think this looks okay. 145 00:08:16,200 --> 00:08:19,930 We'll work on these units later throughout this module, 146 00:08:19,930 --> 00:08:23,143 therefore these are just dummy values for the moment. 147 00:08:24,680 --> 00:08:26,490 With this, we can continue with 148 00:08:26,490 --> 00:08:28,940 the next element inside our header. 149 00:08:28,940 --> 00:08:32,409 This is our anchor tag here so the page logo, 150 00:08:32,409 --> 00:08:35,802 and here we'll add some typical properties 151 00:08:35,802 --> 00:08:40,130 regarding the font so font size and font weight, 152 00:08:40,130 --> 00:08:41,490 we'll change the color... 153 00:08:41,490 --> 00:08:44,830 And we'll again, as already done throughout the course, 154 00:08:44,830 --> 00:08:49,600 transform the letters here into uppercase letters. 155 00:08:49,600 --> 00:08:54,410 For this, back in the code, we'll add a new rule here, 156 00:08:54,410 --> 00:08:59,323 now referring to our logo ID that we added to the page logo. 157 00:09:00,210 --> 00:09:04,083 And we'll get started with the font size property, 158 00:09:05,180 --> 00:09:10,180 which will be set to, let's say, 24 pixels for the moment. 159 00:09:11,560 --> 00:09:16,120 We'll also turn the font weight into a bold one 160 00:09:16,120 --> 00:09:18,583 to make it look a bit more like a real logo. 161 00:09:19,490 --> 00:09:22,193 Then, we'll add a different color. 162 00:09:23,880 --> 00:09:28,880 Here again with an RGB code of 238, 164, and 80, 163 00:09:36,981 --> 00:09:38,170 so an orange tone here. 164 00:09:38,170 --> 00:09:43,170 And finally we will use the text transform property 165 00:09:43,170 --> 00:09:45,140 with uppercase here to turn 166 00:09:45,140 --> 00:09:47,763 all letters into upper case letters. 167 00:09:49,950 --> 00:09:51,750 Save this and let's see. 168 00:09:51,750 --> 00:09:52,733 Looks good I think. 169 00:09:54,100 --> 00:09:56,100 I can also zoom in a little bit more 170 00:09:56,100 --> 00:09:59,200 if you want to make it better visible, 171 00:09:59,200 --> 00:10:01,793 maybe like this and like that. 172 00:10:03,440 --> 00:10:06,280 Okay, on to the next part in the header. 173 00:10:06,280 --> 00:10:08,670 And these are our nav items here. 174 00:10:08,670 --> 00:10:11,980 So inside of an element, our unordered list, 175 00:10:11,980 --> 00:10:13,800 and then these list items, 176 00:10:13,800 --> 00:10:16,150 you can ignore this marker by the way, 177 00:10:16,150 --> 00:10:18,880 this is something added by default due to 178 00:10:18,880 --> 00:10:23,670 these little dots that we have ahead of our list items here. 179 00:10:23,670 --> 00:10:25,890 And this also brings us to the change you 180 00:10:25,890 --> 00:10:30,890 want to implement here, I want to get rid of these dots. 181 00:10:31,080 --> 00:10:33,590 And besides that, also position the list items 182 00:10:33,590 --> 00:10:34,853 next to each other. 183 00:10:35,760 --> 00:10:40,710 For this, back in our styles file, 184 00:10:40,710 --> 00:10:45,100 we'll refer to the main header ID once again, 185 00:10:45,100 --> 00:10:49,480 but now to the unordered list inside our header. 186 00:10:49,480 --> 00:10:53,057 So basically this list containing these links 187 00:10:53,057 --> 00:10:56,510 and there we'll set the list style to none 188 00:10:56,510 --> 00:10:58,150 to get rid of these dots. 189 00:10:58,150 --> 00:10:59,280 And if you now go back, 190 00:10:59,280 --> 00:11:03,550 you see this marker here is removed and so are the dots. 191 00:11:03,550 --> 00:11:08,177 And besides this, we'll use the display flex property 192 00:11:08,177 --> 00:11:10,390 once again, because with this, 193 00:11:10,390 --> 00:11:15,390 we have a default flex direction applied to the flex items, 194 00:11:15,810 --> 00:11:17,670 which are the list items in the end 195 00:11:17,670 --> 00:11:21,000 because the unordered list now becomes a flex container. 196 00:11:21,000 --> 00:11:24,810 So with this, these are positioned next to each other. 197 00:11:24,810 --> 00:11:28,320 And now what we could add is maybe 198 00:11:28,320 --> 00:11:31,490 some space between these list items. 199 00:11:31,490 --> 00:11:34,260 I'll add the space by using a margin 200 00:11:34,260 --> 00:11:35,850 on the individual items, 201 00:11:35,850 --> 00:11:38,950 here we are currently working on the parent element. 202 00:11:38,950 --> 00:11:41,360 So on the unordered list, therefore, 203 00:11:41,360 --> 00:11:43,569 I'll first go back to the code 204 00:11:43,569 --> 00:11:48,569 and make sure that we don't have any default margin. 205 00:11:48,580 --> 00:11:53,580 So we set it to zero or padding here on our unordered list. 206 00:11:56,610 --> 00:12:01,610 And now as a next step, we'll go to our list items. 207 00:12:02,020 --> 00:12:06,379 So again with the main header ID selector, 208 00:12:06,379 --> 00:12:10,550 and now not refer to the list, but to these items. 209 00:12:10,550 --> 00:12:13,800 And here we'll now add the margin property 210 00:12:13,800 --> 00:12:18,150 and set it equal to a value of zero for top bottom 211 00:12:18,150 --> 00:12:22,953 and maybe 16 pixels for left and right. 212 00:12:24,160 --> 00:12:26,910 With this in place, yeah, we now have some space 213 00:12:26,910 --> 00:12:29,313 between our two nav items. 214 00:12:30,500 --> 00:12:33,900 With this, we are almost done with our header. 215 00:12:33,900 --> 00:12:36,530 We are still having some styling issues 216 00:12:36,530 --> 00:12:38,950 with our links right here. 217 00:12:38,950 --> 00:12:40,940 I think the first problem is the color. 218 00:12:40,940 --> 00:12:42,730 The second problem is that we don't 219 00:12:42,730 --> 00:12:45,980 have any hover effect for this. 220 00:12:45,980 --> 00:12:48,313 We'll again go back to our code. 221 00:12:49,780 --> 00:12:54,780 Once again, refer to the main header ID selector, 222 00:12:56,290 --> 00:12:59,620 here specifically referred to the nav element 223 00:12:59,620 --> 00:13:03,890 and there to the anchor texts inside our nav element, 224 00:13:03,890 --> 00:13:05,600 because these are the only links 225 00:13:05,600 --> 00:13:08,850 that should have this styling applied. 226 00:13:08,850 --> 00:13:12,470 Here, we'll simply add two properties. 227 00:13:12,470 --> 00:13:15,010 The first one is again, the color with 228 00:13:16,182 --> 00:13:20,967 an RGB code of 185, 131 and 31, 229 00:13:26,870 --> 00:13:28,770 so again an orange tone 230 00:13:28,770 --> 00:13:33,160 and we'll change the default font size also 231 00:13:33,160 --> 00:13:38,160 to let's say, 20 pixels, maybe as I said, 232 00:13:38,940 --> 00:13:43,190 we'll work on these units later throughout this module. 233 00:13:43,190 --> 00:13:45,453 Let's see, yeah, looks good I think. 234 00:13:47,270 --> 00:13:50,760 The last step in the header now is to add the 235 00:13:50,760 --> 00:13:54,710 hover pseudo selector, so to change the color a little bit, 236 00:13:54,710 --> 00:13:58,200 when we hover over one of these anchor tags. 237 00:13:58,200 --> 00:14:03,200 To apply this, we'll again, use the main header, 238 00:14:04,220 --> 00:14:07,810 a de-selector, again, refer to the nav element 239 00:14:07,810 --> 00:14:12,070 and now refer to the anchor tags inside the nav element, 240 00:14:12,070 --> 00:14:16,440 but now add the hover pseudo selector to it. 241 00:14:16,440 --> 00:14:21,440 So whenever we hover over links inside our nav element 242 00:14:21,550 --> 00:14:25,449 inside the main header, then the color should change 243 00:14:25,449 --> 00:14:30,449 to an RGB color of 228, 163 and 44. 244 00:14:40,600 --> 00:14:44,130 This in place, we should now have the slight hover effect. 245 00:14:44,130 --> 00:14:45,933 Yeah, looks also good I think. 246 00:14:48,280 --> 00:14:50,240 So this was the header, 247 00:14:50,240 --> 00:14:53,973 In the next lecture, we'll continue with the main section.