1 00:00:02,100 --> 00:00:05,100 As already mentioned earlier in this module, 2 00:00:05,100 --> 00:00:08,720 the units are a complex topic in the end. 3 00:00:08,720 --> 00:00:10,910 And what you're applying right here 4 00:00:10,910 --> 00:00:14,000 is not the only correct solution. 5 00:00:14,000 --> 00:00:15,430 As I said, in the course, 6 00:00:15,430 --> 00:00:18,350 we'll use rem for font sizes 7 00:00:18,350 --> 00:00:20,750 and a mix of rem and percentages, 8 00:00:20,750 --> 00:00:24,340 and sometimes pixels for other properties. 9 00:00:24,340 --> 00:00:27,225 You can, of course, all the changes in play around. 10 00:00:27,225 --> 00:00:29,810 We just want to give you something at hand, 11 00:00:29,810 --> 00:00:32,420 which helps you to work with these units 12 00:00:32,420 --> 00:00:35,320 and to build your own websites 13 00:00:35,320 --> 00:00:39,120 as close to a real world environment as possible. 14 00:00:39,120 --> 00:00:43,010 But don't take our recommendation as giving for any case. 15 00:00:43,010 --> 00:00:46,850 You're basically free on how to apply the units, 16 00:00:46,850 --> 00:00:48,920 because the important takeaway right here is 17 00:00:48,920 --> 00:00:51,550 that you understand that we have these different units 18 00:00:51,550 --> 00:00:54,020 and how this work under the hood. 19 00:00:54,020 --> 00:00:55,360 Enough of the roots though. 20 00:00:55,360 --> 00:00:56,990 Let's go back to the code 21 00:00:56,990 --> 00:01:00,670 and let's see what we can change here now. 22 00:01:00,670 --> 00:01:02,150 Before we do this though, 23 00:01:02,150 --> 00:01:04,590 I can see that we still have a marker here 24 00:01:04,590 --> 00:01:06,890 for our list items. 25 00:01:06,890 --> 00:01:09,520 So for the food items in the end, 26 00:01:09,520 --> 00:01:12,760 we could quickly get rid of this marker by going 27 00:01:12,760 --> 00:01:16,500 to our food item class down here. 28 00:01:16,500 --> 00:01:17,710 Now is it here, 29 00:01:17,710 --> 00:01:20,220 and simply add list style, none 30 00:01:21,115 --> 00:01:22,520 just a cosmetical change here. 31 00:01:22,520 --> 00:01:24,840 But I think it looks better with this. 32 00:01:24,840 --> 00:01:25,673 Yeah, 33 00:01:25,673 --> 00:01:28,490 this highlighting option of the dev tools is gone. 34 00:01:28,490 --> 00:01:30,900 And now we can finally jump back into the code 35 00:01:30,900 --> 00:01:32,853 to update our units. 36 00:01:34,100 --> 00:01:36,100 In the code at the top. 37 00:01:36,100 --> 00:01:41,010 I want to get started with our main header selector here. 38 00:01:41,010 --> 00:01:44,250 At the moment, the height is set to 80 pixels, 39 00:01:44,250 --> 00:01:46,480 but as we learned the user 40 00:01:46,480 --> 00:01:49,180 might want to change the font size, 41 00:01:49,180 --> 00:01:52,500 and with this in our main header, 42 00:01:52,500 --> 00:01:55,040 which is basically here, 43 00:01:55,040 --> 00:01:56,773 the entire navigation part, 44 00:01:57,900 --> 00:02:00,640 we should make sure that the header height adjusts, 45 00:02:00,640 --> 00:02:04,710 if the user applies a bigger default font size 46 00:02:04,710 --> 00:02:05,930 in the browser. 47 00:02:05,930 --> 00:02:07,640 At the moment this does not work 48 00:02:07,640 --> 00:02:10,509 because in the code we have a fixed font size 49 00:02:10,509 --> 00:02:12,760 set for the logo, for example. 50 00:02:12,760 --> 00:02:14,120 We of course changed this. 51 00:02:14,120 --> 00:02:16,620 Therefore we should also make the header height 52 00:02:16,620 --> 00:02:17,940 a bit more dynamic. 53 00:02:17,940 --> 00:02:21,960 This means I'll simply go for a rem value here. 54 00:02:21,960 --> 00:02:24,333 And we'll go for five rem. 55 00:02:25,820 --> 00:02:27,660 So basically five times the size, 56 00:02:27,660 --> 00:02:29,823 the user sets for the font size. 57 00:02:32,330 --> 00:02:35,160 Besides this, we could also change the padding. 58 00:02:35,160 --> 00:02:37,350 The zero value top bottom is okay. 59 00:02:37,350 --> 00:02:39,920 But here to the left and to the right, 60 00:02:39,920 --> 00:02:41,260 here in our head header. 61 00:02:41,260 --> 00:02:44,900 These green parts you can see, um, 62 00:02:44,900 --> 00:02:47,140 should maybe also be a bit more dynamic, 63 00:02:47,140 --> 00:02:50,250 depending on the actual screen width. 64 00:02:50,250 --> 00:02:53,483 For this I'll go with a percentage value here at this stage, 65 00:02:54,480 --> 00:02:57,110 because with that, as we saw it in the last lecture, 66 00:02:57,110 --> 00:03:00,280 the padding is relative to width of the page, 67 00:03:00,280 --> 00:03:02,280 which is basically a good approach here. 68 00:03:03,650 --> 00:03:05,260 In the logo, as I said, 69 00:03:05,260 --> 00:03:07,950 I don't want to work with the pixel value anymore. 70 00:03:07,950 --> 00:03:10,430 Here would like to use rem. 71 00:03:10,430 --> 00:03:12,700 As you saw a common default setting 72 00:03:12,700 --> 00:03:15,480 for the font size are 16 pixels. 73 00:03:15,480 --> 00:03:18,960 So translating these default 16 pixels into rem, 74 00:03:18,960 --> 00:03:22,640 what mean we go with 1.5 rem at this stage 75 00:03:22,640 --> 00:03:25,313 to make the font size here more dynamic. 76 00:03:26,310 --> 00:03:29,970 For the main header and the corresponding unordered list, 77 00:03:29,970 --> 00:03:32,610 the zero values are what they are. 78 00:03:32,610 --> 00:03:34,660 For the list items here, 79 00:03:34,660 --> 00:03:37,470 we could again go for a percentage value, 80 00:03:37,470 --> 00:03:41,330 but as the list items contain our anchor tags, 81 00:03:41,330 --> 00:03:43,610 where we defined the font size right here, 82 00:03:43,610 --> 00:03:47,650 I think this should also be kind of related to each other. 83 00:03:47,650 --> 00:03:48,710 As we saw it right here, 84 00:03:48,710 --> 00:03:51,810 the font size is slightly bigger than the margin 85 00:03:51,810 --> 00:03:53,580 we add to the left and to the right. 86 00:03:53,580 --> 00:03:56,990 Therefore we could first change the font size 87 00:03:56,990 --> 00:03:59,460 of our links in the navigation items 88 00:04:00,830 --> 00:04:03,690 to, well, 1.2 rem. 89 00:04:03,690 --> 00:04:06,260 Again, assuming that the default size 90 00:04:06,260 --> 00:04:08,160 would be 16 pixels in the browser. 91 00:04:08,160 --> 00:04:10,943 So 20 pixels would exactly translate into, 92 00:04:11,930 --> 00:04:14,410 into 1.25 rem, 93 00:04:14,410 --> 00:04:16,050 and to be in line with that, 94 00:04:16,050 --> 00:04:16,882 as I said, 95 00:04:16,882 --> 00:04:18,190 the left and right margin 96 00:04:18,190 --> 00:04:21,163 should then be equal to one rem here. 97 00:04:23,590 --> 00:04:27,987 Besides that we don't have any values to change right here. 98 00:04:27,987 --> 00:04:29,660 The h1 element, well, 99 00:04:29,660 --> 00:04:32,220 I think this is quite straightforward. 100 00:04:32,220 --> 00:04:35,210 Here we have a value of 48 pixels. 101 00:04:35,210 --> 00:04:38,260 So we'll simply go for three rem here, 102 00:04:38,260 --> 00:04:40,603 three times 16 pixels by default. 103 00:04:41,900 --> 00:04:43,770 For our latest products, 104 00:04:43,770 --> 00:04:46,220 we have a width of 80% here. 105 00:04:46,220 --> 00:04:48,480 The percentage is absolutely fine. 106 00:04:48,480 --> 00:04:50,710 We want to have a percentage value. 107 00:04:50,710 --> 00:04:53,530 If we go back here and check our latest products 108 00:04:53,530 --> 00:04:56,330 relative to the width of the entire page, 109 00:04:56,330 --> 00:04:57,720 so of the main element, 110 00:04:57,720 --> 00:04:59,470 in the end which will be this element. 111 00:04:59,470 --> 00:05:01,840 So going with the percentage value is fine. 112 00:05:01,840 --> 00:05:05,743 Just perfectly adapts to the requirements of our page here. 113 00:05:07,130 --> 00:05:08,840 And we also have 114 00:05:10,730 --> 00:05:13,590 a margin of 50 pixels top and bottom. 115 00:05:13,590 --> 00:05:15,280 Let me quickly see this. 116 00:05:15,280 --> 00:05:17,430 I think we could produce this a bit 117 00:05:17,430 --> 00:05:19,930 to maybe roundabout two rem. 118 00:05:19,930 --> 00:05:21,570 I think that's totally sufficient. 119 00:05:21,570 --> 00:05:23,170 Let's have a look. 120 00:05:23,170 --> 00:05:24,530 Yeah, I think this looks better. 121 00:05:24,530 --> 00:05:26,713 So let's go with two rem, right here. 122 00:05:28,240 --> 00:05:30,940 Again with the same logic that we basically had 123 00:05:31,810 --> 00:05:33,450 up here for the header. 124 00:05:33,450 --> 00:05:37,710 So depending on the actual font size the user applies, 125 00:05:37,710 --> 00:05:40,610 we also want to make sure that the margin top and bottom 126 00:05:40,610 --> 00:05:42,853 margin here adjust accordingly. 127 00:05:44,680 --> 00:05:48,703 With that, we can continue with our unordered list here. 128 00:05:49,770 --> 00:05:53,030 And what I first see here is maybe it makes even more sense 129 00:05:53,030 --> 00:05:55,410 to add the list style non-property here 130 00:05:55,410 --> 00:05:56,630 to the unordered list, 131 00:05:56,630 --> 00:05:58,970 not the individual food items. 132 00:05:58,970 --> 00:06:00,070 Let's do it like this, 133 00:06:00,070 --> 00:06:02,233 such as the slide cosmetical change. 134 00:06:03,230 --> 00:06:05,020 There is not a lot to change. 135 00:06:05,020 --> 00:06:09,770 Maybe also the grid should be displayed in rem again, 136 00:06:09,770 --> 00:06:10,640 same logic. 137 00:06:10,640 --> 00:06:12,490 If our font sizes change, 138 00:06:12,490 --> 00:06:14,910 then also the gap between our columns 139 00:06:16,040 --> 00:06:18,250 should also be more dynamic. 140 00:06:18,250 --> 00:06:20,533 So we'll also use one rem right here. 141 00:06:22,110 --> 00:06:25,570 Down here, we have our food item class now, 142 00:06:25,570 --> 00:06:27,423 and here we have a pixel value. 143 00:06:28,390 --> 00:06:32,060 And this is one of the cases where I would recommend to 144 00:06:32,060 --> 00:06:34,000 stick with the pixel value. 145 00:06:34,000 --> 00:06:35,090 Why? 146 00:06:35,090 --> 00:06:37,970 Because well, making the border radios 147 00:06:37,970 --> 00:06:40,440 or borders in general dynamic 148 00:06:40,440 --> 00:06:43,730 often leads to unwanted behaviors, 149 00:06:43,730 --> 00:06:46,610 meaning that the border or the border radius here increases 150 00:06:46,610 --> 00:06:47,550 more and more. 151 00:06:47,550 --> 00:06:50,890 And this doesn't make sense in many cases 152 00:06:50,890 --> 00:06:53,490 because only, because the element might become bigger, 153 00:06:53,490 --> 00:06:55,920 the border radius should of course remain, 154 00:06:55,920 --> 00:06:57,730 the way it was defined initially, 155 00:06:57,730 --> 00:07:01,690 and not also scale with the increased size of the element. 156 00:07:01,690 --> 00:07:04,860 Therefore going with the border radius in pixels right here 157 00:07:04,860 --> 00:07:06,750 is totally fine. 158 00:07:06,750 --> 00:07:09,270 So let's scroll down even further. 159 00:07:09,270 --> 00:07:11,610 Here we now have our images 160 00:07:12,853 --> 00:07:13,686 and for the images while we can again 161 00:07:13,686 --> 00:07:16,910 follow the logic that we had implemented earlier. 162 00:07:16,910 --> 00:07:19,820 For the width, 100% is totally fine. 163 00:07:19,820 --> 00:07:23,040 Here the container should define the space 164 00:07:23,040 --> 00:07:26,100 our image has from a width perspective. 165 00:07:26,100 --> 00:07:28,000 For the height though, again, 166 00:07:28,000 --> 00:07:32,510 we should scale by using the rem unit and here 167 00:07:32,510 --> 00:07:36,380 240 pixels would translate into 15 rem again, 168 00:07:36,380 --> 00:07:39,913 assuming a default font size of 16 pixels. 169 00:07:40,810 --> 00:07:42,090 With this in place, 170 00:07:42,090 --> 00:07:45,830 we only have to clean up our food item, 171 00:07:45,830 --> 00:07:47,423 content selector here. 172 00:07:48,280 --> 00:07:49,960 Which basically means we're moving 173 00:07:49,960 --> 00:07:54,960 this out commented part and also removing the font size. 174 00:07:56,620 --> 00:07:57,970 And we might also, 175 00:07:57,970 --> 00:07:59,370 let's quickly check this, 176 00:07:59,370 --> 00:08:01,700 food item content. 177 00:08:01,700 --> 00:08:02,550 Here we are. 178 00:08:02,550 --> 00:08:05,750 Yeah, we might also add a bit more padding. 179 00:08:05,750 --> 00:08:09,913 So I'll go with a padding of one rem right here. 180 00:08:11,410 --> 00:08:13,733 Yep, now this looks a lot more organized. 181 00:08:14,610 --> 00:08:17,770 And then if we scroll down further, 182 00:08:17,770 --> 00:08:20,700 we have our h2 element with the font size, 183 00:08:20,700 --> 00:08:24,370 which is actually not required because as we learned 184 00:08:24,370 --> 00:08:28,490 the h2 element has a nice styling, but you fold. 185 00:08:28,490 --> 00:08:29,950 So in this rare case, 186 00:08:29,950 --> 00:08:31,830 we can go with the default values here, 187 00:08:31,830 --> 00:08:33,863 at least in the Chrome browser. 188 00:08:35,169 --> 00:08:38,350 And this means the only element that's left 189 00:08:38,350 --> 00:08:39,950 or the only selector that is left 190 00:08:39,950 --> 00:08:41,610 at this stage, 191 00:08:41,610 --> 00:08:45,340 is our button and the button has again a border radius. 192 00:08:45,340 --> 00:08:46,600 As we saw it earlier, 193 00:08:46,600 --> 00:08:49,843 we'll keep this border radius the way it is in pixels. 194 00:08:50,960 --> 00:08:54,430 And for the padding, we could use the rem unit here. 195 00:08:54,430 --> 00:08:56,693 So let's say zero dot five rem, 196 00:08:57,693 --> 00:09:00,610 0.5 rem top bottom, 197 00:09:00,610 --> 00:09:03,833 and one dot five rem left and right. 198 00:09:05,330 --> 00:09:06,900 With this in place, 199 00:09:06,900 --> 00:09:11,160 if we go back to the website and open our settings, 200 00:09:11,160 --> 00:09:12,163 once again. 201 00:09:14,440 --> 00:09:15,350 Here we are. 202 00:09:15,350 --> 00:09:17,740 And if, and I'll increase the font size, 203 00:09:17,740 --> 00:09:20,830 you'll see that the page nicely adapts. 204 00:09:20,830 --> 00:09:24,430 So this means we did an important step to having a more 205 00:09:24,430 --> 00:09:28,373 responsive site and the more pleasant user experience. 206 00:09:29,380 --> 00:09:30,213 However, 207 00:09:30,213 --> 00:09:32,790 let me close the settings here. 208 00:09:32,790 --> 00:09:35,200 And let me reopen a dev tools. 209 00:09:35,200 --> 00:09:37,340 What we did not implement so far 210 00:09:37,340 --> 00:09:40,600 is the actual responsive design. 211 00:09:40,600 --> 00:09:42,913 Because by decreasing the width again, 212 00:09:44,370 --> 00:09:48,280 you'll see that, well, we have a nice scaling font, 213 00:09:48,280 --> 00:09:50,620 but the page still breaks. 214 00:09:50,620 --> 00:09:53,000 The nav up here is still not looking good 215 00:09:53,000 --> 00:09:54,540 if we have a mobile view. 216 00:09:54,540 --> 00:09:59,540 So responsive design is not only knowing about units. 217 00:09:59,670 --> 00:10:01,183 There is more to explore.