1 00:00:02,530 --> 00:00:05,050 So here we are now in the last, 2 00:00:05,050 --> 00:00:08,580 well, lecture of this module finally. 3 00:00:08,580 --> 00:00:09,880 And in this lecture, 4 00:00:09,880 --> 00:00:13,130 I first want to zoom in a bit to the card. 5 00:00:13,130 --> 00:00:17,470 We will dive into the concept behind these icons here, 6 00:00:17,470 --> 00:00:19,660 because ahead of the courses, 7 00:00:19,660 --> 00:00:22,970 the downloadable resources and the certificate texts here, 8 00:00:22,970 --> 00:00:27,020 we have three icons, which by the way, are a bit too small. 9 00:00:27,020 --> 00:00:30,100 So let's maybe first go back to the code 10 00:00:30,100 --> 00:00:34,910 and let's go to our icon class selector here 11 00:00:34,910 --> 00:00:38,530 and let's increase the width to maybe 15 pixels. 12 00:00:38,530 --> 00:00:40,180 Let's see what this looks like. 13 00:00:40,180 --> 00:00:43,010 Yeah. I think now these are better. 14 00:00:43,010 --> 00:00:44,450 Well readable. 15 00:00:44,450 --> 00:00:49,060 So how did we add these icons to this project? 16 00:00:49,060 --> 00:00:52,063 Are these images or what's the concept behind? 17 00:00:53,580 --> 00:00:58,160 If we go to our code once again and into the index HTML file 18 00:00:58,160 --> 00:01:03,160 and scroll down a bit into our sub details class div, 19 00:01:04,200 --> 00:01:07,130 then we have the div of the class icon. 20 00:01:07,130 --> 00:01:11,260 And there, we see that we have such an SVG element 21 00:01:11,260 --> 00:01:13,463 with lots of different attributes. 22 00:01:14,490 --> 00:01:18,320 And then inside this SVG, we have this path element. 23 00:01:18,320 --> 00:01:20,630 And again, lots of information. 24 00:01:20,630 --> 00:01:25,070 And somehow this code in here leads to, well, 25 00:01:25,070 --> 00:01:27,633 this check icon right there. 26 00:01:28,827 --> 00:01:31,110 Now, how does this work? 27 00:01:31,110 --> 00:01:34,730 Well, as we saw this, isn't an image or something like that. 28 00:01:34,730 --> 00:01:38,230 These icons are so-called SVGs 29 00:01:38,230 --> 00:01:42,060 So Scalable Vector Graphics. 30 00:01:42,060 --> 00:01:43,233 What does this mean? 31 00:01:44,610 --> 00:01:47,250 Well, SVG is basically 32 00:01:47,250 --> 00:01:51,280 an XML based markup language to describe 33 00:01:51,280 --> 00:01:54,350 two-dimensional vector graphics. 34 00:01:54,350 --> 00:01:57,200 Now, for some of you, this might be helpful. 35 00:01:57,200 --> 00:01:59,800 Others might probably say now, well, 36 00:01:59,800 --> 00:02:02,390 I have no idea what this is all about. 37 00:02:02,390 --> 00:02:07,390 Therefore, another nice definition of such SVGs is this one, 38 00:02:08,550 --> 00:02:13,550 SVGs are a text based description of scalable images 39 00:02:14,230 --> 00:02:17,030 that can be rendered by the browser. 40 00:02:17,030 --> 00:02:19,160 I think this makes it kind of clear. 41 00:02:19,160 --> 00:02:21,260 So we have a text in our case, 42 00:02:21,260 --> 00:02:25,560 this SVG element with the path in it and lots of different 43 00:02:25,560 --> 00:02:26,730 attributes. 44 00:02:26,730 --> 00:02:28,270 So this text-based 45 00:02:28,270 --> 00:02:32,090 description basically represents an image, 46 00:02:32,090 --> 00:02:35,350 a scalable image that can be rendered that can be 47 00:02:35,350 --> 00:02:37,973 interpreted by our browser. 48 00:02:39,020 --> 00:02:42,590 So this is what SVGs are all about basically. 49 00:02:42,590 --> 00:02:46,290 It's all about a mathematical description of well, 50 00:02:46,290 --> 00:02:48,900 simple two dimensional images, 51 00:02:48,900 --> 00:02:51,830 which describe what this image should look like. 52 00:02:51,830 --> 00:02:56,170 And then this image can be easily used in any modern 53 00:02:56,170 --> 00:02:57,460 browser. 54 00:02:57,460 --> 00:03:00,980 Are SVGs working for pictures 55 00:03:00,980 --> 00:03:03,700 for normal pictures or complex images? 56 00:03:03,700 --> 00:03:05,240 No, they aren't because, well, 57 00:03:05,240 --> 00:03:08,299 it would become quite difficult to describe each single well 58 00:03:08,299 --> 00:03:11,080 item of such a complex image, 59 00:03:11,080 --> 00:03:12,577 but for easier images, 60 00:03:12,577 --> 00:03:17,160 which turns out our icons SVGs are easy to use 61 00:03:17,160 --> 00:03:20,230 and easy to implement to our website. 62 00:03:20,230 --> 00:03:22,630 So this still sounds a bit theoretical, 63 00:03:22,630 --> 00:03:25,070 and I don't want to dive too deep here. 64 00:03:25,070 --> 00:03:26,400 You just can keep in mind 65 00:03:26,400 --> 00:03:29,510 that you have the option to add simple images, 66 00:03:29,510 --> 00:03:34,510 like icons here, via so-called SVGs by a plain text. 67 00:03:34,694 --> 00:03:39,640 And the great thing is that we have pages like heroicons.dev 68 00:03:39,640 --> 00:03:42,450 or also here, heroicons.com. 69 00:03:42,450 --> 00:03:44,570 Feel free to use whatever you prefer. 70 00:03:44,570 --> 00:03:49,570 And on these pages, we have predefined SVG icons, 71 00:03:50,550 --> 00:03:54,320 which we can use for free in our project. 72 00:03:54,320 --> 00:03:56,780 So for example, on our page here, 73 00:03:56,780 --> 00:03:59,110 we have this hat here so to say, 74 00:03:59,110 --> 00:04:02,514 in front of the front point here, 75 00:04:02,514 --> 00:04:05,460 and it turns out that this hat 76 00:04:05,460 --> 00:04:08,940 can also be found right here, this academic cap, 77 00:04:08,940 --> 00:04:11,590 and you can switch over here 78 00:04:11,590 --> 00:04:15,580 between solid and outline icons. 79 00:04:15,580 --> 00:04:19,720 I'll go for the outline ones that you can either copy these 80 00:04:19,720 --> 00:04:23,030 as JSX, which is not the format you want to have, 81 00:04:23,030 --> 00:04:25,620 or SSVG, which is what you want to have. 82 00:04:25,620 --> 00:04:27,300 And here you can switch between 83 00:04:27,300 --> 00:04:28,800 a dark mode and the light mode. 84 00:04:28,800 --> 00:04:30,720 Well, I prefer the dark one. 85 00:04:30,720 --> 00:04:32,890 So if you want to use this academic cap, 86 00:04:32,890 --> 00:04:35,940 then you can simply click onto it and you get the 87 00:04:35,940 --> 00:04:38,220 confirmation that this was copied. 88 00:04:38,220 --> 00:04:41,890 Now you can go back to the code and here, 89 00:04:41,890 --> 00:04:45,383 I'll now add for demonstration purposes another div 90 00:04:45,383 --> 00:04:50,383 here with the class icon once again 91 00:04:50,387 --> 00:04:54,460 and there we can now paste this entire code. 92 00:04:54,460 --> 00:04:58,880 And by now saving this and going back to our page 93 00:04:58,880 --> 00:05:02,330 right here, you see that 94 00:05:02,330 --> 00:05:05,430 we now have added this hat as a second icon 95 00:05:05,430 --> 00:05:08,395 next to our first one, of course not what we want, 96 00:05:08,395 --> 00:05:13,395 but this is how you can use such SVGs in your project. 97 00:05:13,480 --> 00:05:16,790 So you'll typically create a container like we had it here 98 00:05:16,790 --> 00:05:20,540 with our div and then you paste this link from the page 99 00:05:20,540 --> 00:05:23,780 where you add this SVG icon from. 100 00:05:23,780 --> 00:05:26,840 So let's delete this now because we don't need this hat here 101 00:05:26,840 --> 00:05:29,520 next to our first icon. 102 00:05:29,520 --> 00:05:33,480 With this, I want to conclude this module now. 103 00:05:33,480 --> 00:05:36,470 This is it with our design basics, 104 00:05:36,470 --> 00:05:40,950 that should help you to easier develop your own websites, 105 00:05:40,950 --> 00:05:44,620 this project, although it was a smaller, a little one, 106 00:05:44,620 --> 00:05:48,340 and not a complete webpage contained lots of features, 107 00:05:48,340 --> 00:05:51,560 which should help you to work on your current and future 108 00:05:51,560 --> 00:05:52,940 websites. 109 00:05:52,940 --> 00:05:54,790 And with this, as I said, 110 00:05:54,790 --> 00:05:56,950 I want to conclude this module now. 111 00:05:56,950 --> 00:06:00,513 So let's continue with the next topic in this course.