1 00:00:02,420 --> 00:00:05,400 We finished this responsive design module 2 00:00:05,400 --> 00:00:09,030 and hopefully learned a lot about responsive design, 3 00:00:09,030 --> 00:00:10,210 besides the fact that 4 00:00:10,210 --> 00:00:14,470 we created another website from scratch in the optional part 5 00:00:14,470 --> 00:00:15,510 of this module, 6 00:00:15,510 --> 00:00:20,400 we understood that responsive design is all about adapting 7 00:00:20,400 --> 00:00:23,901 our website to the user preferences. 8 00:00:23,901 --> 00:00:27,600 These preferences are related to our unit choice. 9 00:00:27,600 --> 00:00:28,483 On the one hand. 10 00:00:28,483 --> 00:00:30,680 Up to this point in the course, 11 00:00:30,680 --> 00:00:34,480 we mainly use the pixel and the percentage units, 12 00:00:34,480 --> 00:00:38,390 but we also learned that we have more units available M and 13 00:00:38,390 --> 00:00:39,880 REM. 14 00:00:39,880 --> 00:00:42,280 Whilst the pixel unit is good, 15 00:00:42,280 --> 00:00:46,510 but does not scale meaning it doesn't adapt to other screen 16 00:00:46,510 --> 00:00:50,800 sizes or other preferences the user sets, 17 00:00:50,800 --> 00:00:52,720 the font size for example, 18 00:00:52,720 --> 00:00:55,960 we saw that with the percentage or the M and REM units, 19 00:00:55,960 --> 00:00:58,430 we can achieve this goal. 20 00:00:58,430 --> 00:01:00,360 While the percentage unit is 21 00:01:00,360 --> 00:01:04,500 dependent on parent elements and specific properties 22 00:01:04,500 --> 00:01:06,200 in these parent elements, 23 00:01:06,200 --> 00:01:10,360 we learned that M and REM always refer to the font size 24 00:01:10,360 --> 00:01:15,360 property of other elements of the root element in case of 25 00:01:15,410 --> 00:01:16,463 the REM unit. 26 00:01:17,800 --> 00:01:18,633 Therefore, 27 00:01:18,633 --> 00:01:22,180 we decided to go with the REM unit in this module and also 28 00:01:22,180 --> 00:01:23,570 throughout the rest of the course, 29 00:01:23,570 --> 00:01:26,560 which does not mean that the percentage as shown right here 30 00:01:26,560 --> 00:01:30,160 or also the pixel value as here chosen for the height are 31 00:01:30,160 --> 00:01:31,563 not valid anymore. 32 00:01:32,640 --> 00:01:34,320 Besides these units, 33 00:01:34,320 --> 00:01:37,510 we also had a look at the general idea behind responsive 34 00:01:37,510 --> 00:01:38,940 design. 35 00:01:38,940 --> 00:01:42,970 We learned about the mobile first or desktop first approach, 36 00:01:42,970 --> 00:01:46,740 which has implications on the way we design the responsive 37 00:01:46,740 --> 00:01:49,020 part of our website. 38 00:01:49,020 --> 00:01:51,900 In case of the desktop first approach, 39 00:01:51,900 --> 00:01:54,280 we can create so-called media queries, 40 00:01:54,280 --> 00:01:55,554 which we added down here, 41 00:01:55,554 --> 00:01:59,940 which allow us to set different styling for a certain break 42 00:01:59,940 --> 00:02:02,590 point and below this break point. 43 00:02:02,590 --> 00:02:04,720 Here, we used one single break point, 44 00:02:04,720 --> 00:02:07,640 but also multiple break points are possible. 45 00:02:07,640 --> 00:02:09,680 What's 40 desktop first approach, 46 00:02:09,680 --> 00:02:13,660 the max-width word keyword is important for the mobile first 47 00:02:13,660 --> 00:02:14,493 approach. 48 00:02:14,493 --> 00:02:17,010 So creating a website for the mobile phone, 49 00:02:17,010 --> 00:02:21,890 look first, the main word keyword would be important here. 50 00:02:21,890 --> 00:02:23,470 Besides these media queries. 51 00:02:23,470 --> 00:02:26,650 We also learned that we can create mobile specific 52 00:02:26,650 --> 00:02:27,483 interfaces. 53 00:02:27,483 --> 00:02:31,900 This site draw here just with HTML and CSS. 54 00:02:31,900 --> 00:02:32,733 For this learn 55 00:02:32,733 --> 00:02:35,760 more about the creation of internal links, 56 00:02:35,760 --> 00:02:40,480 internal references on an existing webpage by using the ID 57 00:02:40,480 --> 00:02:42,320 as a reference in the anchor tag. 58 00:02:42,320 --> 00:02:45,340 And we also learned about another pseudo selector, 59 00:02:45,340 --> 00:02:46,730 the target selector, 60 00:02:46,730 --> 00:02:51,560 which allows us to use a certain style once an ID here, 61 00:02:51,560 --> 00:02:55,776 our SiteWatch D for example, is added to the browser URL. 62 00:02:55,776 --> 00:02:59,380 Now with this, we turned our desktop only page into an 63 00:02:59,380 --> 00:03:02,597 adaptive mobile and desktop website, 64 00:03:02,597 --> 00:03:05,620 which looks good on all devices. 65 00:03:05,620 --> 00:03:09,040 Feel free to dive deeper into the styling of the website and 66 00:03:09,040 --> 00:03:11,740 to tweak our settings even further. 67 00:03:11,740 --> 00:03:14,930 But generally we are done with the responsive design part 68 00:03:14,930 --> 00:03:18,330 now, we know how to make our website responsive. 69 00:03:18,330 --> 00:03:19,163 Therefore, 70 00:03:19,163 --> 00:03:21,303 it's time to continue with the course.