1 00:00:02,580 --> 00:00:05,960 Let's start with creating a new empty project 2 00:00:05,960 --> 00:00:08,400 in visual studio code. For this, 3 00:00:08,400 --> 00:00:11,587 we need two things. An empty project folder 4 00:00:11,587 --> 00:00:14,670 and a new visual studio code window. 5 00:00:14,670 --> 00:00:16,859 If you are in visual studio code already, 6 00:00:16,859 --> 00:00:21,060 you can just go to file and select new window here. 7 00:00:21,060 --> 00:00:22,800 This will open this new window. 8 00:00:22,800 --> 00:00:24,251 And then besides this, 9 00:00:24,251 --> 00:00:27,770 we need to create a new folder 10 00:00:27,770 --> 00:00:29,320 with the name of your choice. 11 00:00:29,320 --> 00:00:33,780 For example, travel page, and then, 12 00:00:33,780 --> 00:00:37,259 you simply drag and drop this folder into your 13 00:00:37,259 --> 00:00:40,100 visual studio code instance 14 00:00:40,100 --> 00:00:41,760 that you just created. 15 00:00:41,760 --> 00:00:45,629 And we can of course, close this welcome screen with this. 16 00:00:45,629 --> 00:00:47,870 The project was created. 17 00:00:47,870 --> 00:00:50,610 I'll use my structure here again, 18 00:00:50,610 --> 00:00:52,790 just to be able to track and save 19 00:00:52,790 --> 00:00:55,193 the different stages of the code here. 20 00:00:56,320 --> 00:00:58,000 As we learned in this course, 21 00:00:58,000 --> 00:01:01,179 our project needs an index HTML file, 22 00:01:01,179 --> 00:01:03,810 and we'll also add some styling. 23 00:01:03,810 --> 00:01:06,430 So, let's create the basic structure 24 00:01:06,430 --> 00:01:08,550 by adding these two files first. 25 00:01:08,550 --> 00:01:12,110 So an index HTML file, 26 00:01:12,110 --> 00:01:17,110 and I'll also immediately add a styles CSS file. 27 00:01:17,430 --> 00:01:20,420 Will of course add more style and HTML files 28 00:01:20,420 --> 00:01:21,380 throughout this course, 29 00:01:21,380 --> 00:01:23,860 but this is just to get started. 30 00:01:23,860 --> 00:01:27,240 The style CSS file will remain empty for now. 31 00:01:27,240 --> 00:01:30,420 We'll just focus on to the index HTML file. 32 00:01:30,420 --> 00:01:32,000 And what did you learn? 33 00:01:32,000 --> 00:01:35,960 What do we need in every HTML file we create, 34 00:01:35,960 --> 00:01:37,880 we need a skeleton. 35 00:01:37,880 --> 00:01:40,110 And as Max explained to you earlier, 36 00:01:40,110 --> 00:01:42,590 you can create the skeleton on your own 37 00:01:43,690 --> 00:01:46,700 with this doc type structure and so on. 38 00:01:46,700 --> 00:01:49,355 Or we use this nice auto-completion feature 39 00:01:49,355 --> 00:01:51,760 visual studio code ships with 40 00:01:51,760 --> 00:01:53,470 by adding the exclamation mark 41 00:01:53,470 --> 00:01:55,020 and pressing enter. 42 00:01:55,020 --> 00:01:57,640 With this, our basic skeleton 43 00:01:57,640 --> 00:01:59,700 was created automatically. 44 00:01:59,700 --> 00:02:03,000 Again, we have two metadata not required 45 00:02:03,000 --> 00:02:04,640 at this stage of the course. 46 00:02:04,640 --> 00:02:06,230 It's this one here 47 00:02:06,230 --> 00:02:08,919 and that one with the view port. 48 00:02:08,919 --> 00:02:10,910 We'll dive into these a bit later. 49 00:02:10,910 --> 00:02:13,440 So, to avoid any unnecessary confusion 50 00:02:13,440 --> 00:02:15,925 at this stage, let's delete these. 51 00:02:15,925 --> 00:02:18,870 With this, our skeleton looks nice. 52 00:02:18,870 --> 00:02:22,793 We can immediately add a title for our page DOE, 53 00:02:23,774 --> 00:02:25,693 which will be travel goals, 54 00:02:27,160 --> 00:02:30,870 and we can add two more things in our head. 55 00:02:30,870 --> 00:02:32,430 First thing, is the link 56 00:02:32,430 --> 00:02:34,670 to our style sheet we created. 57 00:02:34,670 --> 00:02:37,270 So, we enter link and press enter. 58 00:02:37,270 --> 00:02:39,810 With this, we again use the auto completion 59 00:02:39,810 --> 00:02:42,120 and we just have to add the reference, 60 00:02:42,120 --> 00:02:46,396 which is styles CSS, auto-completed by hitting tap. 61 00:02:46,396 --> 00:02:50,250 We will need another link here though. 62 00:02:50,250 --> 00:02:52,130 And that's the link I provide 63 00:02:52,130 --> 00:02:53,670 attached to this lecture. 64 00:02:53,670 --> 00:02:56,630 And this link refers to Google fonts. 65 00:02:56,630 --> 00:02:58,670 We learned about Google fonts already. 66 00:02:58,670 --> 00:03:02,700 That is a great way to add better looking fonts 67 00:03:02,700 --> 00:03:05,790 to our projects accessible for everyone. 68 00:03:05,790 --> 00:03:10,340 Therefore, I prepared a link here, as I said, 69 00:03:10,340 --> 00:03:13,080 you can find it attached to the lecture 70 00:03:13,080 --> 00:03:15,910 and we'll add it above our style sheet reference 71 00:03:15,910 --> 00:03:18,730 here, to make sure that the fonts are loaded 72 00:03:18,730 --> 00:03:21,190 before we dive into the style part. 73 00:03:21,190 --> 00:03:24,120 This is the link. You can see it, but as I said, 74 00:03:24,120 --> 00:03:26,286 please use the attached one. 75 00:03:26,286 --> 00:03:28,833 Let's quickly format this maybe. 76 00:03:28,833 --> 00:03:30,160 And with this, 77 00:03:30,160 --> 00:03:34,050 we finished our basic skeleton here. 78 00:03:34,050 --> 00:03:35,863 This means we cannot continue 79 00:03:35,863 --> 00:03:39,400 with the body part here in our HTML file. 80 00:03:39,400 --> 00:03:41,570 And for this, we'll have another look 81 00:03:41,570 --> 00:03:43,453 at our finished project.