WEBVTT 1 00:00:01.300 --> 00:00:03.640 So before we start this basic HTML 2 00:00:03.640 --> 00:00:05.460 and CSS Crash Course, 3 00:00:05.460 --> 00:00:08.250 let me tell you again that you should only take this 4 00:00:08.250 --> 00:00:12.540 if you have no knowledge about HTML and CSS at all. 5 00:00:12.540 --> 00:00:15.810 So if you do, then just move on to the next section. 6 00:00:15.810 --> 00:00:18.450 But for the rest of us let's now get started 7 00:00:18.450 --> 00:00:23.105 and learn a little bit about HTML structure and elements 8 00:00:23.105 --> 00:00:26.560 And let's start by creating a new product folder here 9 00:00:26.560 --> 00:00:30.117 on the desktop, which I'm just gonna call HTML CSS. 10 00:00:32.760 --> 00:00:33.670 And in this section, 11 00:00:33.670 --> 00:00:36.680 we're actually not even gonna have any starter files. 12 00:00:36.680 --> 00:00:40.163 So we're just gonna create everything from scratch. Okay? 13 00:00:41.070 --> 00:00:43.910 So let's go back to VS code 14 00:00:43.910 --> 00:00:46.113 and open this newly created folder. 15 00:00:48.840 --> 00:00:50.193 And here we go. 16 00:00:51.900 --> 00:00:54.330 So let's open up 17 00:00:54.330 --> 00:00:58.580 or actually let's create an index.HTML file. 18 00:00:58.580 --> 00:01:02.720 An index.HTML is always the name of the main file 19 00:01:02.720 --> 00:01:06.010 in any project. Okay? 20 00:01:06.010 --> 00:01:09.140 Let's hide this sidebar here 21 00:01:09.140 --> 00:01:11.020 and I'm gonna use command + B for that, 22 00:01:11.020 --> 00:01:14.960 or control + B on windows. Alright? 23 00:01:14.960 --> 00:01:19.540 So HTML stands for hypertext markup language 24 00:01:19.540 --> 00:01:21.690 and we use it to describe the content 25 00:01:21.690 --> 00:01:23.531 of web pages basically. 26 00:01:23.531 --> 00:01:27.160 And an HTML document is made out of elements 27 00:01:27.160 --> 00:01:29.370 and we write elements using an opening 28 00:01:29.370 --> 00:01:31.180 and closing tag. 29 00:01:31.180 --> 00:01:33.136 The main element in all HTML documents 30 00:01:33.136 --> 00:01:36.190 is always the HTML element. 31 00:01:36.190 --> 00:01:41.020 So we write HTML and then VS code automatically gives 32 00:01:41.020 --> 00:01:42.710 us the closing tag. 33 00:01:42.710 --> 00:01:44.520 So you'll see the closing tag has just 34 00:01:44.520 --> 00:01:46.370 the same name as the opening tag, 35 00:01:46.370 --> 00:01:50.150 but then it has this slash here to close it. Okay? 36 00:01:50.150 --> 00:01:53.380 So every HTML document always has to start with 37 00:01:53.380 --> 00:01:56.470 the HTML opening tag and then close with 38 00:01:56.470 --> 00:01:58.480 the HTML closing tag. 39 00:01:58.480 --> 00:02:00.370 Then inside the HTML element 40 00:02:00.370 --> 00:02:03.280 we always have to head and the body. 41 00:02:03.280 --> 00:02:07.323 So let's write that head and body. 42 00:02:14.150 --> 00:02:17.920 So this is always the structure that we use in HTML. 43 00:02:17.920 --> 00:02:20.460 Now, whatever we put into this head here 44 00:02:20.460 --> 00:02:23.260 is basically like the settings of the page. 45 00:02:23.260 --> 00:02:25.000 So it's like describing the page. 46 00:02:25.000 --> 00:02:27.700 For example, with the title. 47 00:02:27.700 --> 00:02:30.440 So for that, we use the title element 48 00:02:30.440 --> 00:02:35.440 and let's call this one learning HTML and CSS. 49 00:02:38.380 --> 00:02:41.310 And then once again VS code automatically gives us 50 00:02:41.310 --> 00:02:43.240 the closing tag here. 51 00:02:43.240 --> 00:02:45.770 So this title here is what's gonna be visible 52 00:02:45.770 --> 00:02:47.470 in Google Chrome. 53 00:02:47.470 --> 00:02:51.640 So basically this title of the page right here. Okay? 54 00:02:51.640 --> 00:02:53.870 And you will see that in a second. 55 00:02:53.870 --> 00:02:56.188 Other things that we put here in this head 56 00:02:56.188 --> 00:02:59.030 which is again like the settings of the page 57 00:02:59.030 --> 00:03:02.020 is CSS styles or FATF icons. 58 00:03:02.020 --> 00:03:05.540 So that little icon that appears here in browser tabs 59 00:03:05.540 --> 00:03:07.490 and stuff like that. 60 00:03:07.490 --> 00:03:09.430 Then whatever we put into the body 61 00:03:09.430 --> 00:03:11.830 is what's actually gonna be visible on the page. 62 00:03:15.520 --> 00:03:18.310 And let's start by adding a heading here. And for that, 63 00:03:18.310 --> 00:03:21.010 we use the H1 element. 64 00:03:21.010 --> 00:03:24.080 And this is a level one heading. Okay? 65 00:03:24.080 --> 00:03:27.720 so you have H1, H2 all the way to H6. 66 00:03:27.720 --> 00:03:30.310 And they will have different styles automatically applied 67 00:03:30.310 --> 00:03:34.150 by the browser. Anyway, let's now give it to your title. 68 00:03:34.150 --> 00:03:37.983 And let's say, "JavaScript is fun, 69 00:03:39.220 --> 00:03:43.420 but so is HTML and CSS." 70 00:03:43.420 --> 00:03:46.810 So just like before, we put the extra content here 71 00:03:46.810 --> 00:03:49.340 between two tags. So the opening tag, 72 00:03:49.340 --> 00:03:51.980 which is H1 and then the closing tag 73 00:03:51.980 --> 00:03:55.700 which is this /H1 to close the element. 74 00:03:55.700 --> 00:03:58.690 And different types of elements have different purposes. 75 00:03:58.690 --> 00:04:01.540 For example, H1 is to describe a heading. 76 00:04:01.540 --> 00:04:02.680 But we have other ones. 77 00:04:02.680 --> 00:04:06.493 For example, we have the P element to describe a paragraph. 78 00:04:07.400 --> 00:04:09.493 So let me show that as well. 79 00:04:14.290 --> 00:04:17.900 So that's right. And a little bit longer text here. 80 00:04:17.900 --> 00:04:22.900 So you can learn JavaScript without HTML and CSS, 81 00:04:28.450 --> 00:04:32.870 but for dumb manipulation 82 00:04:34.810 --> 00:04:39.810 it's useful to have some basic ideas of HTML and CSS. 83 00:04:44.150 --> 00:04:46.730 And of course the texture doesn't really matter, 84 00:04:46.730 --> 00:04:50.470 It's just that we have some content on the actual page. 85 00:04:50.470 --> 00:04:51.690 And speaking of the page, 86 00:04:51.690 --> 00:04:55.750 let's now actually preview it here in Google Chrome. 87 00:04:55.750 --> 00:04:58.070 And for that let's use the live-server tool 88 00:04:58.070 --> 00:05:01.140 that we installed in the previous section. So for that, 89 00:05:01.140 --> 00:05:03.030 I'm gonna use the integrate a terminal 90 00:05:03.030 --> 00:05:05.360 by hitting control + /. 91 00:05:05.360 --> 00:05:06.500 Okay. So again, 92 00:05:06.500 --> 00:05:08.880 this very weird shortcut 93 00:05:08.880 --> 00:05:10.883 or I can also do it from the menu. 94 00:05:12.270 --> 00:05:16.980 line:15% So that's gonna be new terminal down here. Okay? 95 00:05:16.980 --> 00:05:18.920 line:15% Then I can clear the terminal from all 96 00:05:18.920 --> 00:05:21.883 line:15% this weird stuff with command or control + K. 97 00:05:22.760 --> 00:05:24.950 line:15% And so now it's a bit cleaner. 98 00:05:24.950 --> 00:05:26.470 line:15% Again, it's not important at this point 99 00:05:26.470 --> 00:05:29.730 line:15% that you really understand everything about the terminal. 100 00:05:29.730 --> 00:05:33.410 line:15% We will learn really a lot about it kind of by the end of 101 00:05:33.410 --> 00:05:35.450 line:15% the course. For now, all we want to do 102 00:05:35.450 --> 00:05:38.290 line:15% is to use the live server, just like we did 103 00:05:38.290 --> 00:05:39.600 line:15% in the previous section. 104 00:05:39.600 --> 00:05:40.607 line:15% So when we hit enter on this, 105 00:05:40.607 --> 00:05:42.980 line:15% this will now open up the page 106 00:05:42.980 --> 00:05:44.343 line:15% in this Chrome window here, 107 00:05:45.180 --> 00:05:47.820 line:15% and indeed here we go. 108 00:05:47.820 --> 00:05:49.360 And you can already see that 109 00:05:49.360 --> 00:05:52.570 the browser applied some basic formatting based on 110 00:05:52.570 --> 00:05:53.910 the type of element. 111 00:05:53.910 --> 00:05:57.651 So this H1 here is way bigger and bolder than 112 00:05:57.651 --> 00:06:01.313 the main text down here, which is this paragraph, right? 113 00:06:01.313 --> 00:06:03.400 And let's add another paragraph here 114 00:06:03.400 --> 00:06:06.113 so we can see it appear on the page as well. 115 00:06:08.200 --> 00:06:13.197 So P again, just another paragraph. 116 00:06:15.340 --> 00:06:16.800 So when I saved us now, 117 00:06:16.800 --> 00:06:18.580 the results should automatically appear here 118 00:06:18.580 --> 00:06:19.513 on the right side. 119 00:06:20.620 --> 00:06:22.240 And here we go. 120 00:06:22.240 --> 00:06:25.000 And again, as I told you in the previous section, 121 00:06:25.000 --> 00:06:27.410 if this life server is not working for you, 122 00:06:27.410 --> 00:06:29.100 then that's no problem at all. 123 00:06:29.100 --> 00:06:32.253 You can always just open the HTML document itself. 124 00:06:33.290 --> 00:06:36.500 Anyway, let's take a look at another heading here. 125 00:06:36.500 --> 00:06:39.580 So as I was saying, there is not just H1, 126 00:06:39.580 --> 00:06:41.560 but also other type of headings. 127 00:06:41.560 --> 00:06:43.093 So let's simply put one here. 128 00:06:44.180 --> 00:06:49.180 So let's say an H2 another heading. 129 00:06:50.990 --> 00:06:54.140 And so as you see this one here is a bit smaller 130 00:06:54.140 --> 00:06:55.360 than this one. 131 00:06:55.360 --> 00:06:57.370 And if I would change it to an H6 132 00:06:59.400 --> 00:07:02.170 and you'll see automatically it changed the six here. 133 00:07:02.170 --> 00:07:04.740 And that's because of an extension that I have. 134 00:07:04.740 --> 00:07:08.100 I'm not sure if I showed it to you in the last section. 135 00:07:08.100 --> 00:07:13.100 So that extension is called the auto renamed tag. 136 00:07:13.388 --> 00:07:16.320 And the one that automatically closes a tag that it opened 137 00:07:16.320 --> 00:07:18.850 is this auto close tag extension up here. 138 00:07:18.850 --> 00:07:21.150 So these two extensions that I have here, 139 00:07:21.150 --> 00:07:23.533 they are very useful for writing HTML. 140 00:07:25.250 --> 00:07:26.900 Okay. 141 00:07:26.900 --> 00:07:30.400 And here you already saw this reloading. 142 00:07:30.400 --> 00:07:33.550 And so you see that H6 is actually even smaller 143 00:07:33.550 --> 00:07:37.041 than the paragraph text. Okay? 144 00:07:37.041 --> 00:07:39.630 So you see that these elements 145 00:07:39.630 --> 00:07:42.440 which are composed of an opening and the closing tag 146 00:07:42.440 --> 00:07:46.000 are really used to describe content in this way. 147 00:07:46.000 --> 00:07:47.970 Now, of course we can do a lot more 148 00:07:47.970 --> 00:07:50.410 than just headings and paragraphs. 149 00:07:50.410 --> 00:07:52.227 For example, links or images. 150 00:07:52.227 --> 00:07:55.130 But for that, we need to learn about attributes. 151 00:07:55.130 --> 00:07:57.280 And we're gonna do that in the next video. 152 00:07:57.280 --> 00:07:59.270 Now, just to finish this lecture, 153 00:07:59.270 --> 00:08:01.810 I wanted to show you that we can actually create 154 00:08:01.810 --> 00:08:04.710 this bare bones structure of HTML 155 00:08:04.710 --> 00:08:07.390 in a very easy way in VS code. 156 00:08:07.390 --> 00:08:10.743 All we have to do is basically type ! + tab 157 00:08:13.590 --> 00:08:17.220 and like magic, all of appears. 158 00:08:17.220 --> 00:08:19.830 So we still have the HTML tag and in there 159 00:08:19.830 --> 00:08:23.470 we have to head and body just like we had before. 160 00:08:23.470 --> 00:08:26.559 The difference is that we also got this doc type here, 161 00:08:26.559 --> 00:08:28.460 which essentially identifies 162 00:08:28.460 --> 00:08:30.787 this document as being HTML five. 163 00:08:30.787 --> 00:08:35.440 And we also get this language here on HTML. 164 00:08:35.440 --> 00:08:36.273 So in this case, 165 00:08:36.273 --> 00:08:37.160 it's telling the browser that 166 00:08:37.160 --> 00:08:39.100 we're using the English language. 167 00:08:39.100 --> 00:08:41.840 Here is some other stuff that's also important 168 00:08:41.840 --> 00:08:44.093 but I'm not gonna go into now. 169 00:08:45.750 --> 00:08:49.260 And then here is the title that we just specified also in 170 00:08:49.260 --> 00:08:51.000 our document up here. 171 00:08:51.000 --> 00:08:52.280 So now I will just go ahead 172 00:08:52.280 --> 00:08:54.760 and take this content and put it here in 173 00:08:54.760 --> 00:08:58.363 this structure because it's actually a more complete. 174 00:09:00.180 --> 00:09:02.563 So just take this and cut it, 175 00:09:04.600 --> 00:09:05.713 put that here, 176 00:09:07.960 --> 00:09:10.030 delete all of this, give it a save 177 00:09:11.320 --> 00:09:14.200 and let's put this one here back to H2 178 00:09:17.460 --> 00:09:18.293 and here we go. 179 00:09:20.220 --> 00:09:23.890 Actually, we can close this one and alright. 180 00:09:23.890 --> 00:09:25.350 So see you in the next lecture 181 00:09:25.350 --> 00:09:28.010 were We're gonna talk a little bit about attributes 182 00:09:28.010 --> 00:09:29.843 and classes and IDs.