1 00:00:00,690 --> 00:00:06,150 OK, so, as always, we get started with a basic setup, so first of all, all files would be an index 2 00:00:06,150 --> 00:00:07,050 that ASML 3 00:00:09,600 --> 00:00:17,220 any style that says, hey, I just typed this wrong, zip a comma instead of a dot. 4 00:00:18,270 --> 00:00:18,840 There we go. 5 00:00:18,840 --> 00:00:20,910 And a style dot success. 6 00:00:22,850 --> 00:00:30,160 So let's get started with your e-mail, going to use Emmet's or shift one, and let's give this a name 7 00:00:30,170 --> 00:00:33,530 first of great upside. 8 00:00:34,940 --> 00:00:42,230 And up here, we're going to link up our style access, so link and within his style, that success. 9 00:00:42,420 --> 00:00:48,350 OK, now I am going to use to external technologies, one being Google fonds. 10 00:00:48,680 --> 00:00:51,020 And for the icons, we're going to use font. 11 00:00:51,020 --> 00:00:51,550 Awesome. 12 00:00:52,820 --> 00:00:55,160 So who don't have a font awesome account. 13 00:00:55,160 --> 00:00:56,690 You can go ahead and create it all. 14 00:00:56,690 --> 00:01:01,190 Just go to Google and type in Pontus and see the end and you can get your font. 15 00:01:01,190 --> 00:01:01,840 Awesome kit. 16 00:01:02,110 --> 00:01:08,060 It is a free kit and we have all the basic font awesome icons. 17 00:01:08,600 --> 00:01:11,210 So I'm going to just copy my kit within here. 18 00:01:13,400 --> 00:01:17,650 What you will see is just the link, so I'm going to keep it above my access file. 19 00:01:19,450 --> 00:01:26,830 And down in the body, not the reference it go down here now down in the body, I'm just going to type 20 00:01:26,830 --> 00:01:28,950 in a few notations. 21 00:01:28,950 --> 00:01:35,140 So if you comment for our header, this is just the sections that we're going to create the header. 22 00:01:38,620 --> 00:01:39,340 Then I mean. 23 00:01:42,710 --> 00:01:45,290 And at the end, we'll have a photo. 24 00:01:50,760 --> 00:01:54,040 Okay, so that's basically it, what we need for this website. 25 00:01:54,330 --> 00:01:57,030 Now let's work quickly and to open it up. 26 00:01:58,100 --> 00:01:59,600 Open with light server. 27 00:02:00,790 --> 00:02:09,160 OK, then we have a blank page and now let's also go into access and for a general reset, so and let's 28 00:02:09,160 --> 00:02:16,480 reset our margins, zero padding, zero and boxes in the box. 29 00:02:18,730 --> 00:02:26,080 Now, another thing that I am going to do it in our style is include our font or Google font. 30 00:02:26,090 --> 00:02:27,880 So let's go to Google font. 31 00:02:29,530 --> 00:02:37,540 So just type into Google, Google fonts, and I think I'm going to actually I used pity sense. 32 00:02:37,540 --> 00:02:40,210 Now narrow this one right here. 33 00:02:40,450 --> 00:02:41,380 Just click on it. 34 00:02:42,160 --> 00:02:49,130 And I used this 400 regular style, so gone select style icon import there. 35 00:02:49,210 --> 00:02:56,990 I'm going to copy this at import to just copy it, go back in the code editor and not just target our 36 00:02:56,990 --> 00:02:57,310 max. 37 00:02:57,340 --> 00:03:03,130 We need to import the so called imported right here, paste it in and we're going to target our body. 38 00:03:04,240 --> 00:03:06,460 And I'm going to set the body. 39 00:03:07,670 --> 00:03:08,960 First of all, to imex with. 40 00:03:10,680 --> 00:03:16,500 Of 900 pixels, now, this is depending on your screen, the how. 41 00:03:17,430 --> 00:03:19,140 What are you going to send a message to? 42 00:03:19,680 --> 00:03:29,640 You can also go with 700 and the margins auto again, this will center or we can see it right now because 43 00:03:29,640 --> 00:03:33,320 we don't have an e-mail, but it will center Erping into the center of the page. 44 00:03:33,780 --> 00:03:38,260 And we also will have left and right, which we can also check it out. 45 00:03:38,280 --> 00:03:41,880 So let's open up our respective also need to have this open. 46 00:03:42,860 --> 00:03:51,930 And if I go underbody, yep, you can always see it, it's in the center and it has 900 pixels, that's 47 00:03:51,960 --> 00:03:54,740 that's pretty much it for a basic setup. 48 00:03:55,730 --> 00:03:58,030 Let's check out again our e-mail. 49 00:03:58,040 --> 00:03:59,180 We have a startling top. 50 00:03:59,180 --> 00:04:05,300 We have our one person linked up and yeah, we can get started so soon. 51 00:04:05,300 --> 00:04:05,720 The next one.