1 00:00:00,210 --> 00:00:03,770 Hello and welcome back to a very exciting section. 2 00:00:03,810 --> 00:00:04,650 Why is it exciting? 3 00:00:04,680 --> 00:00:11,370 Well, we finally get to code and we're going to start off by learning HTML and then finally building 4 00:00:11,370 --> 00:00:13,080 our very first website. 5 00:00:14,170 --> 00:00:20,950 In order for us to get started, we need to set up our environment and we do that by let's open up Google 6 00:00:20,950 --> 00:00:25,600 Chrome and we're going to search for sublime text three. 7 00:00:27,040 --> 00:00:34,060 This is a text editor that a lot of developers use, I myself have used it for years, absolutely love 8 00:00:34,060 --> 00:00:34,330 it. 9 00:00:34,630 --> 00:00:37,510 In your day to day job, you use something like this. 10 00:00:37,510 --> 00:00:39,250 I highly recommend sublime text. 11 00:00:39,820 --> 00:00:46,720 If you have a Mac, the version over here, if you have a PC running Windows, you'll have the download 12 00:00:46,720 --> 00:00:47,730 link for Windows. 13 00:00:48,220 --> 00:00:52,330 So for me, I'm going to download for the Mac. 14 00:00:53,050 --> 00:00:59,320 And you can see here it's downloaded and I can drag it to my applications folder if I want and we can 15 00:00:59,320 --> 00:01:00,160 double click. 16 00:01:01,000 --> 00:01:05,530 And if this is your first time downloading Sublime text, you'll get something like this to give you 17 00:01:05,530 --> 00:01:06,970 permission to load. 18 00:01:07,390 --> 00:01:08,370 And there you go. 19 00:01:08,380 --> 00:01:11,470 We have sublime text now. 20 00:01:11,470 --> 00:01:12,940 What is a text editor? 21 00:01:13,750 --> 00:01:19,840 A text editor is a program that allows us to write code. 22 00:01:19,960 --> 00:01:26,590 You can see over here on the right hand side of sublime text that it just says plain text so I can type 23 00:01:26,590 --> 00:01:27,850 anything that I want. 24 00:01:28,090 --> 00:01:35,350 And there's nothing much different than if you wrote this in a word or a text file. 25 00:01:35,860 --> 00:01:40,930 But the power with a text editor, especially with something like Sublime that's geared towards coding, 26 00:01:41,110 --> 00:01:48,450 if you click on plain text here, you'll have a whole bunch of options of what type of code you're writing. 27 00:01:48,730 --> 00:01:51,150 So in our case, we're doing HTML. 28 00:01:51,520 --> 00:01:56,800 So if I click on HTML, nothing changes except for the bottom part over here. 29 00:01:57,730 --> 00:02:02,740 But now if I type something, well, everything looks the same. 30 00:02:03,070 --> 00:02:05,140 But if I start typing ASML. 31 00:02:06,300 --> 00:02:12,270 They'll actually recognize it and help with syntax, so here now if I write HTML. 32 00:02:13,200 --> 00:02:16,020 Look at that, get a nice little color completion. 33 00:02:17,220 --> 00:02:22,770 So for us for now, we're going to be writing e-mail, you can see over here that there's different 34 00:02:22,800 --> 00:02:23,700 options. 35 00:02:23,700 --> 00:02:25,320 There's where is it? 36 00:02:25,350 --> 00:02:27,690 There's access JavaScript. 37 00:02:27,690 --> 00:02:28,740 We'll we'll learn later. 38 00:02:28,740 --> 00:02:30,560 So we're going to be using sublime text for this. 39 00:02:30,990 --> 00:02:37,140 For now, click on e-mail and let's write our very first Web page. 40 00:02:37,590 --> 00:02:44,250 In order for us to have a Web page, we write a HTML, which stands for hypertext markup language. 41 00:02:44,370 --> 00:02:45,620 So bear with me here. 42 00:02:45,630 --> 00:02:46,920 This is going to be new. 43 00:02:47,100 --> 00:02:51,680 But keep in mind that this is exactly what every single e-mail page has. 44 00:02:51,720 --> 00:02:55,100 These are the set of rules that all HTML files must follow. 45 00:02:55,620 --> 00:02:57,000 And it goes like this. 46 00:02:57,030 --> 00:03:03,660 We define a DOCTYPE and don't worry, I'll get into what that means in the next video. 47 00:03:04,960 --> 00:03:15,340 Then we have HTML and we close these tags, HTML, the second part, we have a head and a closing head. 48 00:03:16,190 --> 00:03:19,600 You can see over here some patterns forming. 49 00:03:19,840 --> 00:03:24,220 Don't worry, I'll get back to these tags and explaining what they do in a bit. 50 00:03:25,060 --> 00:03:28,180 And then we also have body. 51 00:03:29,400 --> 00:03:33,270 And then closing tax and finally here in the head. 52 00:03:34,460 --> 00:03:37,370 We have something called a title tag. 53 00:03:38,090 --> 00:03:38,370 OK? 54 00:03:39,280 --> 00:03:45,920 So this over here is the rule that every single extremophile must follow. 55 00:03:46,390 --> 00:03:52,990 Just looking at this right now without knowing any more, you can get an idea of what everything means. 56 00:03:52,990 --> 00:03:57,060 So, ASML, we're defining that this is an e-mail. 57 00:03:57,910 --> 00:04:04,210 We're saying that this is the head of the mall with the title and we're saying that this is the body 58 00:04:04,660 --> 00:04:05,580 of the mall. 59 00:04:06,250 --> 00:04:07,830 So let's try something here. 60 00:04:07,900 --> 00:04:09,160 Let's save this file. 61 00:04:10,820 --> 00:04:12,440 And we're going to save it. 62 00:04:12,470 --> 00:04:13,670 Let's do desktop. 63 00:04:15,270 --> 00:04:18,020 And we're going to call it index dot. 64 00:04:18,540 --> 00:04:26,390 You can see that it's already completed the HTML syntax for us safe and we have an index file here. 65 00:04:26,790 --> 00:04:34,320 Let's drag this all the way down to our Google Chrome and open it up and well, nothing happens, but 66 00:04:34,320 --> 00:04:37,040 let's add a bit of text to it. 67 00:04:37,440 --> 00:04:44,820 So the title I'm going to say my first website, exclamation mark, and then in the body, I'm just 68 00:04:44,820 --> 00:04:45,750 going to put. 69 00:04:47,480 --> 00:04:49,730 Hello there. 70 00:04:50,990 --> 00:04:52,580 OK, so if I say this. 71 00:04:55,940 --> 00:05:02,230 And just to show you, from now on, I'm going to be doing commands to save just a little bit faster 72 00:05:02,630 --> 00:05:05,330 and now if I refresh this page. 73 00:05:07,070 --> 00:05:12,900 I have hello there, and you can see the power over here of what we just did. 74 00:05:13,310 --> 00:05:17,180 We have hello there as the text, which is. 75 00:05:18,270 --> 00:05:25,800 In the body, and then we also have my first website as the title, and you can see over here in the 76 00:05:25,800 --> 00:05:30,690 file that we're referencing and Eckstut ASML on my desktop. 77 00:05:31,640 --> 00:05:38,360 So we can see here that we have a TML, we have the head, which we haven't really talked about yet, 78 00:05:38,360 --> 00:05:43,730 but we see that the titles in the head kind of like a header, and then we have the body, which by 79 00:05:43,730 --> 00:05:49,520 looking at this, we can assume that it's whatever shows up onto the Web page before we expand on this 80 00:05:49,520 --> 00:05:53,630 and make it a little bit prettier, because now it's just a simple text. 81 00:05:53,780 --> 00:05:59,990 I want to reiterate the fact that what we've just done is very similar to what a server does. 82 00:06:00,500 --> 00:06:07,460 If we go back to our mockups here, you remember that when we enter Google dot com the servers, send 83 00:06:07,460 --> 00:06:14,390 us an e-mail file back when we move the index indexed HTML file all the way down to Google Chrome. 84 00:06:14,810 --> 00:06:15,800 That's what we just did. 85 00:06:15,800 --> 00:06:23,370 We mimicked a server and we gave it to the browser to load up the file. 86 00:06:23,420 --> 00:06:31,220 And because browsers are built to know what ASML files are, it can read the syntax and say, OK, this 87 00:06:31,220 --> 00:06:32,050 is the HTML. 88 00:06:32,330 --> 00:06:37,670 OK, you want my title to be my first website and you want my body to say hello there. 89 00:06:38,520 --> 00:06:39,150 That's perfect. 90 00:06:39,810 --> 00:06:44,820 These are the default e-mail rules that you'll see all the time. 91 00:06:45,090 --> 00:06:49,280 It is a little bit confusing at first, but this is it. 92 00:06:49,290 --> 00:06:52,650 You just have to remember that there is a tag. 93 00:06:52,810 --> 00:06:57,690 So an e-mail tag, a hash tag, a title tag, a body tag. 94 00:06:58,350 --> 00:07:03,300 And these tags usually have an opening and closing. 95 00:07:03,810 --> 00:07:08,220 There's some exception to this rule and we'll get into that a little bit later on in the videos. 96 00:07:08,610 --> 00:07:10,170 But just remember this for now. 97 00:07:10,540 --> 00:07:15,540 So I want you to try creating your very first website and seeing how it works. 98 00:07:15,690 --> 00:07:21,630 And once you're done with that, I want to show you that sublime text actually has a nice shortcut so 99 00:07:21,630 --> 00:07:24,410 you don't have to keep writing those tags over and over it. 100 00:07:24,420 --> 00:07:28,840 So the way you do that is you type in e-mail and then press the tag. 101 00:07:29,940 --> 00:07:31,440 And it loads all this up for you. 102 00:07:31,560 --> 00:07:36,840 OK, so now that we've done this, I want you to go off and create your very first website. 103 00:07:36,990 --> 00:07:38,250 I know it's very, very simple. 104 00:07:38,250 --> 00:07:42,240 You can put whatever you want in the title and you can put whatever you want in the body. 105 00:07:42,390 --> 00:07:46,910 And in the next video, we're going to start expanding on our first website. 106 00:07:47,400 --> 00:07:48,390 I'll see you in the next one. 107 00:07:48,750 --> 00:07:49,080 Bye bye.