1 00:00:02,220 --> 00:00:06,030 Welcome to this module. This module is 2 00:00:06,030 --> 00:00:09,650 a bit different compared to the previous modules 3 00:00:09,650 --> 00:00:12,930 in this course because, in the other modules 4 00:00:12,930 --> 00:00:16,383 you learned a lot about new things, like HTML and CSS. 5 00:00:17,876 --> 00:00:20,060 And whilst you will also learn 6 00:00:20,060 --> 00:00:23,240 some new CSS topics in this module, 7 00:00:23,240 --> 00:00:27,800 here, we will focus on to applying concepts 8 00:00:27,800 --> 00:00:30,450 you already learned about and applying these 9 00:00:30,450 --> 00:00:34,310 in a structured way. Because in this module, 10 00:00:34,310 --> 00:00:38,313 we want to help you to design beautiful websites. 11 00:00:39,190 --> 00:00:42,550 And whilst this might sound quite easy, 12 00:00:42,550 --> 00:00:44,910 it can become quite difficult, 13 00:00:44,910 --> 00:00:48,340 especially when getting started with web development, 14 00:00:48,340 --> 00:00:51,540 because you have lots of tools now at hand, 15 00:00:51,540 --> 00:00:54,910 which you can use, but you have to use these tools, 16 00:00:54,910 --> 00:00:58,130 so these HTML and CSS concepts, 17 00:00:58,130 --> 00:01:01,230 correctly to don't lose the focus 18 00:01:01,230 --> 00:01:03,150 when it comes to creating, well, 19 00:01:03,150 --> 00:01:05,193 a beautiful website in the end. 20 00:01:06,500 --> 00:01:08,400 Because no matter if you're working on 21 00:01:08,400 --> 00:01:11,180 a personal or a professional project, 22 00:01:11,180 --> 00:01:15,100 you probably have a goal, or an idea in mind about what 23 00:01:15,100 --> 00:01:17,760 the final website should look like. 24 00:01:17,760 --> 00:01:20,840 And on this journey from zero, so from having nothing 25 00:01:20,840 --> 00:01:23,590 basically, to the finished website, well, 26 00:01:23,590 --> 00:01:26,890 things can go wrong. And to make sure 27 00:01:26,890 --> 00:01:29,890 not too many things go wrong, in this module, 28 00:01:29,890 --> 00:01:32,433 we'll have a look at two things specifically. 29 00:01:33,520 --> 00:01:37,180 First, we'll have a look at a Project Example. 30 00:01:37,180 --> 00:01:40,770 No worries, we won't create this project from scratch. 31 00:01:40,770 --> 00:01:44,180 We'll just show you the finished project and dive 32 00:01:44,180 --> 00:01:46,860 into the code of this project, 33 00:01:46,860 --> 00:01:49,796 because in there you can find lots of helpful 34 00:01:49,796 --> 00:01:53,370 tips and tricks to create beautiful websites. 35 00:01:53,370 --> 00:01:58,370 So lots of concepts in this code use such concepts to make 36 00:01:58,520 --> 00:02:01,520 this website, or this part of the website 37 00:02:01,520 --> 00:02:04,783 to be more specific, to look as good as possible. 38 00:02:06,270 --> 00:02:10,699 The second core topic of this module are some new topics, 39 00:02:10,699 --> 00:02:13,850 as I mentioned, and these topics are related to 40 00:02:13,850 --> 00:02:18,780 CSS Custom Property or CSS Variables, which will 41 00:02:18,780 --> 00:02:22,240 be very helpful to keep a lot of trouble away from 42 00:02:22,240 --> 00:02:26,253 your mind when working on the design of your website. 43 00:02:27,110 --> 00:02:30,231 We'll dive into transitions, which make your page, 44 00:02:30,231 --> 00:02:33,216 well, even more interactive. And we'll dive 45 00:02:33,216 --> 00:02:37,737 into the Basics of SVG's. So, what SVG's are 46 00:02:37,737 --> 00:02:40,863 and how we can use these on our website. 47 00:02:42,030 --> 00:02:44,430 Now, before we dive into the module, 48 00:02:44,430 --> 00:02:47,830 I quickly want to show you this project example 49 00:02:47,830 --> 00:02:52,830 I was just referring to, because this is the page we created 50 00:02:53,050 --> 00:02:56,290 for this module. And now you might say, "Well, 51 00:02:56,290 --> 00:02:59,980 this page is not really spectacular". 52 00:02:59,980 --> 00:03:03,170 And I would agree to be honest, but this page here, 53 00:03:03,170 --> 00:03:07,850 or this part of a page, this specific single feature 54 00:03:07,850 --> 00:03:10,750 of a webpage, is something you find 55 00:03:10,750 --> 00:03:13,190 on a lot of websites these days. 56 00:03:13,190 --> 00:03:16,770 If I zoom in a bit here to make it better readable for you, 57 00:03:16,770 --> 00:03:19,360 you can see that this is a typical Cart. 58 00:03:19,360 --> 00:03:24,110 So this Card look of such an individual element so to say, 59 00:03:24,110 --> 00:03:28,340 which in this case would be a Cart offering information 60 00:03:28,340 --> 00:03:32,990 about a monthly subscription for a course page here. 61 00:03:32,990 --> 00:03:37,640 So for only $20 per month, you get access to 40 courses, 62 00:03:37,640 --> 00:03:40,380 including downloadable resources, 63 00:03:40,380 --> 00:03:42,990 a certificate of completion and so on. 64 00:03:42,990 --> 00:03:45,700 Including a Join Now button which, of course, 65 00:03:45,700 --> 00:03:48,880 leads into nowhere here. It's just about the design. 66 00:03:48,880 --> 00:03:53,880 But generally this is, well as we think, a good looking Cart 67 00:03:54,030 --> 00:03:58,170 and this single item of a complete website will help us 68 00:03:58,170 --> 00:04:02,470 to understand a lot of basic design concepts. 69 00:04:02,470 --> 00:04:05,820 And you can then apply these concepts on your own, 70 00:04:05,820 --> 00:04:09,290 bigger websites and, this will help you to focus 71 00:04:09,290 --> 00:04:12,880 onto the actual content of the site without getting lost 72 00:04:12,880 --> 00:04:16,620 into all these different design features, design tools 73 00:04:16,620 --> 00:04:21,320 you might know, from the CSS part in this course so far. 74 00:04:21,320 --> 00:04:24,900 And of course, also from upcoming modules and concepts 75 00:04:24,900 --> 00:04:27,257 you will learn about in this course. 76 00:04:27,257 --> 00:04:29,970 Now this is what this module is all about. 77 00:04:29,970 --> 00:04:33,030 And, the project we will have a look at in this course, 78 00:04:33,030 --> 00:04:35,283 therefore, let's get started now.