1 00:00:02,100 --> 00:00:03,150 Attached to this lecture, 2 00:00:03,150 --> 00:00:06,860 you can find the source code of this project here. 3 00:00:06,860 --> 00:00:09,230 If you want to, you can download it, 4 00:00:09,230 --> 00:00:13,180 but you don't have to because this module is not about 5 00:00:13,180 --> 00:00:16,580 writing code, actually it's about analyzing 6 00:00:16,580 --> 00:00:20,120 existing code and seeing what makes this card look, 7 00:00:20,120 --> 00:00:22,570 well, the way it looks like here. 8 00:00:22,570 --> 00:00:25,510 A little disclaimer from the beginning here, though, 9 00:00:25,510 --> 00:00:28,710 we show you some design concepts here, 10 00:00:28,710 --> 00:00:30,638 which applied to this card look, 11 00:00:30,638 --> 00:00:34,363 and which can also be applied to websites in general. 12 00:00:35,380 --> 00:00:38,267 There is no general right or wrong though, and you can, 13 00:00:38,267 --> 00:00:43,267 of course also add a lot more concepts to this design topic. 14 00:00:43,310 --> 00:00:45,440 Actually, you could create a whole course 15 00:00:45,440 --> 00:00:47,460 just about this topic. 16 00:00:47,460 --> 00:00:49,220 This is not what we want though. 17 00:00:49,220 --> 00:00:52,200 So the idea is to give you some things at hand, 18 00:00:52,200 --> 00:00:54,260 some easy things to remember, 19 00:00:54,260 --> 00:00:57,340 which help you to create your own websites 20 00:00:57,340 --> 00:00:59,590 as easy as possible. 21 00:00:59,590 --> 00:01:02,840 Nevertheless, no matter if you downloaded this code or not, 22 00:01:02,840 --> 00:01:04,000 let's quickly have a look 23 00:01:04,000 --> 00:01:07,360 at what is behind this little card here. 24 00:01:07,360 --> 00:01:10,020 For this, I'll show you the code now. 25 00:01:10,020 --> 00:01:13,620 Here I am in the index HTML file. 26 00:01:13,620 --> 00:01:16,340 We also have a style CSS file. 27 00:01:16,340 --> 00:01:20,530 So the typical structure we know from this course already. 28 00:01:20,530 --> 00:01:24,380 In the up here, we don't have any new things. 29 00:01:24,380 --> 00:01:28,200 Basically, you can just see that I imported some fonts 30 00:01:28,200 --> 00:01:30,260 from Google fonts already. 31 00:01:30,260 --> 00:01:34,000 We'll dive into the fonts topic in a few minutes. 32 00:01:34,000 --> 00:01:37,059 Besides that, we have a link to the style sheet 33 00:01:37,059 --> 00:01:39,223 and that's it, basically. 34 00:01:40,180 --> 00:01:44,620 In the body part, then, down here, we have a div. 35 00:01:44,620 --> 00:01:47,000 So I'm working with divs here a lot 36 00:01:47,000 --> 00:01:51,050 because, although we learned about semantic HTML elements 37 00:01:51,050 --> 00:01:52,817 in this course already, 38 00:01:52,817 --> 00:01:56,550 We only tackle a part of the website here, 39 00:01:56,550 --> 00:01:58,410 well, this card, so to say, 40 00:01:58,410 --> 00:02:01,880 and I want to focus on the design aspects. 41 00:02:01,880 --> 00:02:04,710 Therefore, semantic HTML elements 42 00:02:04,710 --> 00:02:07,400 are not the core focus of this module. 43 00:02:07,400 --> 00:02:11,610 Therefore, we decided to use divs and classes instead, 44 00:02:11,610 --> 00:02:14,870 which, by the way, is totally okay in general. 45 00:02:14,870 --> 00:02:17,910 Therefore you can see our first div up here 46 00:02:17,910 --> 00:02:20,340 with the class of card-container. 47 00:02:20,340 --> 00:02:24,380 Because this div basically holds the entire content 48 00:02:24,380 --> 00:02:27,450 of the card, so this part down here. 49 00:02:27,450 --> 00:02:30,090 And inside this card, we have three elements 50 00:02:30,090 --> 00:02:32,850 from the beginning, three paragraphs. 51 00:02:32,850 --> 00:02:34,410 So these here. 52 00:02:34,410 --> 00:02:37,600 The first paragraph is just some card info. 53 00:02:37,600 --> 00:02:40,120 So what this monthly subscription is all about. 54 00:02:40,120 --> 00:02:43,341 Then we have two elements about the price 55 00:02:43,341 --> 00:02:45,530 of this monthly core subscription, 56 00:02:45,530 --> 00:02:47,833 and some information about the pricing. 57 00:02:48,770 --> 00:02:51,220 Afterwards, we have another div, 58 00:02:51,220 --> 00:02:53,450 which is also kind of a container. 59 00:02:53,450 --> 00:02:55,810 So this div right here. 60 00:02:55,810 --> 00:02:58,240 This div then contains all the sub, 61 00:02:58,240 --> 00:03:01,720 so all these subscription details and in there 62 00:03:01,720 --> 00:03:04,770 we can find three equally structured divs. 63 00:03:04,770 --> 00:03:08,610 So it's this div with the class sub-feature here, 64 00:03:08,610 --> 00:03:13,163 we have divs once, twice, and a third time. 65 00:03:14,050 --> 00:03:16,700 And each of this divs contains, well, 66 00:03:16,700 --> 00:03:18,990 a div with the class icon. 67 00:03:18,990 --> 00:03:21,870 In there we see we have an SVG element, 68 00:03:21,870 --> 00:03:23,840 which is a new element in here. 69 00:03:23,840 --> 00:03:27,810 And we'll talk about SVGs, also throughout this module. 70 00:03:27,810 --> 00:03:32,810 Here the SVG just is an easy way to add, well, 71 00:03:32,810 --> 00:03:36,099 these icons here, in front of the description 72 00:03:36,099 --> 00:03:40,430 of what you get with this monthly subscription. 73 00:03:40,430 --> 00:03:42,240 We'll dive into this a bit later. 74 00:03:42,240 --> 00:03:44,770 Therefore, I'll skip this for the moment. 75 00:03:44,770 --> 00:03:48,240 And besides this icon, we have a paragraph which describes, 76 00:03:48,240 --> 00:03:52,300 well, the corresponding feature and we have this, as I said, 77 00:03:52,300 --> 00:03:53,570 three times in total. 78 00:03:53,570 --> 00:03:57,140 So second div here, and third div there. 79 00:03:57,140 --> 00:03:59,750 And finally at the bottom, we have another div, 80 00:03:59,750 --> 00:04:01,720 which is just a button-container, 81 00:04:01,720 --> 00:04:04,930 and this holds this "join now" button, 82 00:04:04,930 --> 00:04:07,993 which you can also find of course, here on this card. 83 00:04:09,330 --> 00:04:10,820 So that's the HTML part, 84 00:04:10,820 --> 00:04:14,270 nothing new in here besides this SVG part, maybe. 85 00:04:14,270 --> 00:04:16,180 And in the style.css file, 86 00:04:16,180 --> 00:04:19,821 we have a very, well, generic styling, so to say. 87 00:04:19,821 --> 00:04:23,880 If you look at the properties in there, nothing new for you. 88 00:04:23,880 --> 00:04:26,170 We have the background-color property. 89 00:04:26,170 --> 00:04:29,550 We have some properties related to our fonts. 90 00:04:29,550 --> 00:04:31,750 We have, of course, properties like the width 91 00:04:31,750 --> 00:04:34,470 or the margin or our box shadow, 92 00:04:34,470 --> 00:04:36,590 which we also use throughout the course. 93 00:04:36,590 --> 00:04:40,440 So if you look at all these different properties here, 94 00:04:40,440 --> 00:04:42,273 you shouldn't find anything new. 95 00:04:43,280 --> 00:04:47,760 Because the core concept of this module is not talking 96 00:04:47,760 --> 00:04:51,210 about new properties or new values to add here, 97 00:04:51,210 --> 00:04:54,880 it's about how to use these existing concepts 98 00:04:54,880 --> 00:04:58,600 and these concepts we know about correctly to achieve, 99 00:04:58,600 --> 00:05:01,763 well, a good looking card in our case here. 100 00:05:02,760 --> 00:05:05,330 And for this, I'll now leave VS code 101 00:05:05,330 --> 00:05:10,320 and go to our main page here and open the dev tools. 102 00:05:10,320 --> 00:05:11,620 If you didn't do that so far, 103 00:05:11,620 --> 00:05:13,040 and if you want to follow along, 104 00:05:13,040 --> 00:05:14,630 please also do that. 105 00:05:14,630 --> 00:05:17,360 And now we'll dive into three core aspects 106 00:05:17,360 --> 00:05:19,253 behind the look of this card. 107 00:05:20,090 --> 00:05:24,160 Specifically, we'll have a look at sizing and spacing. 108 00:05:24,160 --> 00:05:27,550 So what size are we using for this card? 109 00:05:27,550 --> 00:05:30,330 How is the space arranged on this card 110 00:05:30,330 --> 00:05:32,520 to give it the look it has? 111 00:05:32,520 --> 00:05:34,330 We'll then dive into fonts. 112 00:05:34,330 --> 00:05:36,410 So which fonts are we using, 113 00:05:36,410 --> 00:05:39,980 Which font sizes are we using, et cetera. 114 00:05:39,980 --> 00:05:42,750 And finally, we'll dive into colors. 115 00:05:42,750 --> 00:05:43,660 As you can see, 116 00:05:43,660 --> 00:05:46,990 we don't have too many colors on this page here, 117 00:05:46,990 --> 00:05:50,160 but we have some colors and there is a reason 118 00:05:50,160 --> 00:05:51,823 why we have these colors. 119 00:05:52,870 --> 00:05:55,660 This is what the next lectures are all about. 120 00:05:55,660 --> 00:05:56,493 Therefore, 121 00:05:56,493 --> 00:06:00,043 let's get started now with the sizing and spacing part.