1 00:00:02,150 --> 00:00:03,830 And to get started, 2 00:00:03,830 --> 00:00:07,280 I want to talk about three things to remember. 3 00:00:07,280 --> 00:00:10,490 So three things you should keep in mind whenever 4 00:00:10,490 --> 00:00:13,820 you are creating a new website from scratch. 5 00:00:13,820 --> 00:00:16,920 The first thing is add different features 6 00:00:16,920 --> 00:00:19,473 step-by-step to your website. 7 00:00:20,540 --> 00:00:23,800 You might have an idea of the finished website 8 00:00:23,800 --> 00:00:25,750 in your head or in your mind 9 00:00:25,750 --> 00:00:29,140 but typically this leads to the situation where you think 10 00:00:29,140 --> 00:00:31,840 about all this nitty gritty details, 11 00:00:31,840 --> 00:00:34,180 all features at once, 12 00:00:34,180 --> 00:00:36,860 and you kind of get lost and distracted 13 00:00:36,860 --> 00:00:39,080 because you see the whole website 14 00:00:39,080 --> 00:00:41,810 but actually the point where you get started 15 00:00:41,810 --> 00:00:43,763 should be an individual feature. 16 00:00:44,710 --> 00:00:48,220 Which are saw this with this card in the last lecture. 17 00:00:48,220 --> 00:00:51,640 Why don't you get started with the card in general? 18 00:00:51,640 --> 00:00:52,806 You create the first card, 19 00:00:52,806 --> 00:00:54,890 think about the content, 20 00:00:54,890 --> 00:00:56,730 the information this card should hold. 21 00:00:56,730 --> 00:00:59,040 Then you add a second and a third card, 22 00:00:59,040 --> 00:01:01,430 then you might add a headline to the page, 23 00:01:01,430 --> 00:01:03,170 a nav bar and so on. 24 00:01:03,170 --> 00:01:06,320 So think about your website feature-by-feature 25 00:01:06,320 --> 00:01:10,000 and don't think about the entire finished layout with all 26 00:01:10,000 --> 00:01:13,290 the different features and elements from the beginning. 27 00:01:13,290 --> 00:01:15,770 This can cause a lot of confusion 28 00:01:15,770 --> 00:01:17,960 and this is something you should avoid 29 00:01:17,960 --> 00:01:20,850 when working as a web developer. 30 00:01:20,850 --> 00:01:22,590 The second thing to remember 31 00:01:22,590 --> 00:01:25,670 is kind of related to the first one, 32 00:01:25,670 --> 00:01:27,950 but it's a slightly different one 33 00:01:27,950 --> 00:01:28,920 because you should think 34 00:01:28,920 --> 00:01:32,083 about the core information that should be transferred. 35 00:01:33,050 --> 00:01:35,880 Again you might have lots of ideas on your mind, 36 00:01:35,880 --> 00:01:38,840 and you might want to share this and that information 37 00:01:38,840 --> 00:01:39,730 on your page, 38 00:01:39,730 --> 00:01:41,810 and you might want to add another element, 39 00:01:41,810 --> 00:01:42,890 another feature, 40 00:01:42,890 --> 00:01:45,710 but then you have to go one step back. 41 00:01:45,710 --> 00:01:47,890 Think about the main information, 42 00:01:47,890 --> 00:01:51,770 a potential visitor of your website might want to have 43 00:01:51,770 --> 00:01:55,470 or which information you might want to transfer. 44 00:01:55,470 --> 00:01:59,200 You can always add additional information to your website 45 00:01:59,200 --> 00:02:01,680 or to different parts of your website, 46 00:02:01,680 --> 00:02:04,090 but by adding all information at once, well, 47 00:02:04,090 --> 00:02:07,920 you again get lost and you again, lose your focus. 48 00:02:07,920 --> 00:02:11,950 Therefore think about the core information and then build up 49 00:02:11,950 --> 00:02:14,770 on that data on your website. 50 00:02:14,770 --> 00:02:17,340 Finally, the third thing to remember, well, 51 00:02:17,340 --> 00:02:18,590 less is more, 52 00:02:18,590 --> 00:02:21,153 don't overstate your website. 53 00:02:22,430 --> 00:02:25,800 In this course you learned a lot about CSS already, 54 00:02:25,800 --> 00:02:29,200 and you have the knowledge to add different colors, 55 00:02:29,200 --> 00:02:30,260 different structures, 56 00:02:30,260 --> 00:02:31,813 different schemas, 57 00:02:31,813 --> 00:02:36,250 flexbox grid and so on so you can add multiple features 58 00:02:36,250 --> 00:02:40,090 to your website to make the site look fancy or modern, 59 00:02:40,090 --> 00:02:41,420 which is a great thing, 60 00:02:41,420 --> 00:02:42,850 but you should also make sure 61 00:02:42,850 --> 00:02:44,863 that it doesn't get over styled. 62 00:02:45,860 --> 00:02:49,220 Of course there can be pages where lots of style, 63 00:02:49,220 --> 00:02:51,720 lots of design elements are required, 64 00:02:51,720 --> 00:02:52,576 but typically, 65 00:02:52,576 --> 00:02:54,510 especially in the tech world, 66 00:02:54,510 --> 00:02:58,723 websites should look nice and clean and not to overstate. 67 00:02:59,930 --> 00:03:03,240 Therefore use the tools you learned about in this course, 68 00:03:03,240 --> 00:03:04,450 which is a great thing, 69 00:03:04,450 --> 00:03:08,090 but don't use all these concepts on one website. 70 00:03:08,090 --> 00:03:09,973 So keep things clean. 71 00:03:11,400 --> 00:03:14,280 And of course we could expand these lists 72 00:03:14,280 --> 00:03:17,120 but I think with these three things in mind, 73 00:03:17,120 --> 00:03:20,400 you have a nice starting point when creating 74 00:03:20,400 --> 00:03:22,570 your own websites and to focus 75 00:03:22,570 --> 00:03:25,900 on the core aspects of the site. 76 00:03:25,900 --> 00:03:28,140 Now this was some quick theory. 77 00:03:28,140 --> 00:03:31,600 Now we can leave this theoretical slide part and directly 78 00:03:31,600 --> 00:03:35,900 dive into the project and learn more about, well, 79 00:03:35,900 --> 00:03:37,490 modern website design 80 00:03:37,490 --> 00:03:40,340 and how we can implement these concepts 81 00:03:40,340 --> 00:03:42,753 also in our own projects.