WEBVTT 0 00:00.320 --> 00:01.250 Hey guys. 1 00:01.250 --> 00:06.320 In the previous lesson, you've learned a lot about different types of HTML elements and you already 2 00:06.320 --> 00:08.960 got started using them to create websites. 3 00:08.990 --> 00:13.670 Now in this section, we're going to take it a little bit further and explore some more intermediate and 4 00:13.670 --> 00:15.770 advanced concepts in HTML. 5 00:15.890 --> 00:21.320 We're going to get started in this lesson by learning about list elements, the ordered and unordered 6 00:21.320 --> 00:22.070 lists. 7 00:22.430 --> 00:27.170 Now, if you've spent any time around on the Internet recently, you'll notice that it's completely 8 00:27.170 --> 00:28.520 full of lists. 9 00:28.520 --> 00:36.020 If you go on to BuzzFeed or any of these sort of clickbaity articles, usually they'll create a list 10 00:36.020 --> 00:41.300 of something such as great items that must have been invented by geniuses. 11 00:41.300 --> 00:47.660 But also if you look at something like the, "FBI's ten Most Wanted Fugitives," this is also created in 12 00:47.660 --> 00:49.700 this website using a list. 13 00:49.700 --> 00:52.690 So how do we create these lists ourselves? 14 00:52.700 --> 00:57.080 Well, let's start off with one of the most common types, the unordered list. 15 00:57.080 --> 01:04.260 And it's super simple to create simply, you have a starting tag with ul (<ul>)and then have a closing tag (</ul>). 16 01:04.260 --> 01:11.880 Now, normally we've had one line elements such as this where we get to add some content in between 17 01:11.880 --> 01:13.730 the opening and closing tags. 18 01:13.740 --> 01:16.920 Now in this case, however, it's a little bit different, 19 01:16.950 --> 01:23.940 they actually go on separate lines because in between these two opening and closing tags, we need an extra 20 01:23.940 --> 01:27.600 type of tag in order to complete this unordered list. 21 01:27.600 --> 01:30.570 And these are called list items (<li>). 22 01:30.570 --> 01:38.730 So here you can see we've got three list items and each of them contain some piece of content. 23 01:38.820 --> 01:44.270 But all three items are enclosed inside this unordered list. 24 01:44.280 --> 01:50.850 So for any list to work and display content, then you're going to have to add list items into it. 25 01:51.000 --> 01:54.150 So what does this look like if we actually run the code? 26 01:54.150 --> 01:55.770 Well, this is what you would see. 27 01:55.800 --> 02:03.420 Essentially unordered list items will create these bullet points, because such as in the case of a shopping 28 02:03.420 --> 02:08.190 list here, the order of the items doesn't matter. 29 02:08.190 --> 02:11.970 So that's why an unordered list would be perfect for this situation. 30 02:12.390 --> 02:19.200 However, on the other hand, if you needed your list items to be arranged in a particular order, then 31 02:19.200 --> 02:21.060 you would create an ordered list (<ol>). 32 02:21.210 --> 02:27.570 And once you've added the list items inside there, what this will do is it will give you numbers. 33 02:27.570 --> 02:35.700 So it would start from one and the number next to each list item will depend on the order that you put 34 02:35.700 --> 02:39.420 into this ordered list element. 35 02:39.420 --> 02:44.960 If this milk was down here, then it would get the number three and so on and so forth. 36 02:44.970 --> 02:46.530 That's all pretty simple. 37 02:46.530 --> 02:54.990 So if we compare the ordered list, the ol element that gives us numbers and versus the ul, the unordered 38 02:54.990 --> 02:58.830 list item, which just gives us bullet points, simple as that. 39 02:58.830 --> 03:05.310 And coming back to our "FBI ten Most Wanted Fugitives" website, you can see they actually created this 40 03:05.310 --> 03:07.230 website using lists. 41 03:07.230 --> 03:14.160 So when you right-click on any of these images and select Inspect, you can see that each of these photos 42 03:14.160 --> 03:19.170 are actually a list item placed inside an unordered list. 43 03:19.200 --> 03:23.910 Now there's a whole bunch more to this website which we're going to learn in future lessons, 44 03:23.910 --> 03:30.060 but the really important thing is for you to see that this is a really important part that you see in 45 03:30.060 --> 03:32.100 websites all over on the Internet. 46 03:32.100 --> 03:35.280 So it's really important that we understand how to use them. 47 03:35.520 --> 03:41.490 So now that we've learned a little bit about ordered and unordered lists, let's try an exercise to 48 03:41.490 --> 03:43.680 make sure that you've understood everything. 49 03:43.800 --> 03:50.400 Go ahead and download the List Elements zipped file from this current lesson. 50 03:50.400 --> 03:57.000 And as always, if you forget how to do that, or if you just started on this lesson, then I recommend 51 03:57.000 --> 04:01.860 going to one of the earlier lessons where I show you, "How to Download Course Resources." 52 04:01.860 --> 04:10.830 Now, once you've downloaded and extracted the folder, 3.0 List Elements and dragged it into VS Code 53 04:10.830 --> 04:16.860 or your web development projects folder, then you should be able to see it here on the file Explorer 54 04:16.860 --> 04:17.790 on the left. 55 04:17.820 --> 04:24.420 If we explore some of the files for this current coding exercise, you can see we've got an index.html 56 04:24.450 --> 04:29.280 that contains some plain text which you're going to be formatting into lists. 57 04:29.280 --> 04:36.330 And if we take a look at the goal, feel free to choose whichever heading sizes you want, 58 04:36.330 --> 04:43.830 but for me, I think it made the most sense to have one h1 and then the ingredients and the instructions 59 04:43.830 --> 04:50.850 as h2's and then any other headings like this part and this part as h3's. 60 04:50.850 --> 04:56.730 But the most important thing I care about in this exercise, is you manage to create these lists. 61 04:56.730 --> 04:59.690 So we've got an unordered list for the 62 05:00.110 --> 05:03.110 Section 1 of the ingredients to create the dough. 63 05:03.110 --> 05:07.460 And then we've got another unordered list for the filling ingredients. 64 05:07.460 --> 05:13.550 And finally, we've got all the rest of the instructions as an ordered list. 65 05:13.580 --> 05:18.710 Think about how you're going to create this and don't worry about typing all the text out because if 66 05:18.710 --> 05:23.510 you look inside the index.html, you'll see all the text typed out for you already. 67 05:23.510 --> 05:30.830 All you need to do is to add the HTML tags and to format the document into an HTML website. 68 05:30.830 --> 05:37.640 And in the end we should end up with this recipe website for creating delicious cinnamon rolls. 69 05:37.850 --> 05:44.120 Now, if you watched my recent Instagram takeover of the Udemy account, you'll see me making the same 70 05:44.120 --> 05:45.110 cinnamon rolls 71 05:45.110 --> 05:48.920 and if you want to do the same, then this is the recipe for you. 72 05:49.100 --> 05:54.200 This is what you're aiming for and using what you've learnt about list elements. 73 05:54.200 --> 05:58.550 I want you to go ahead and pause the video and complete this challenge. 74 06:02.620 --> 06:03.040 All right. 75 06:03.040 --> 06:04.510 So did you manage to do that? 76 06:04.510 --> 06:06.970 Let's go ahead and walk through the solution together. 77 06:06.970 --> 06:12.610 So I'm going to show you the preview on the right side so you can see the website update as I type. 78 06:12.610 --> 06:15.670 First, we're going to start off with our heading tags. 79 06:15.670 --> 06:18.850 So I'm just going to add a bunch of headings in quite quickly. 80 06:24.090 --> 06:26.800 All right, so that's all the headings out of the way. 81 06:26.820 --> 06:31.320 So now we're on to the proper work, which is creating our lists. 82 06:31.350 --> 06:36.810 As I said, the ingredients don't really need an order, so we're going to create an unordered list. 83 06:36.840 --> 06:43.740 So in between our start and end ul tags, we're going to have each of these as a list item. 84 06:43.740 --> 06:46.980 So I'm going to create the list item tag. 85 06:46.980 --> 06:55.650 And once I've created that, then all I need to do is to drag my first list item in between the list 86 06:55.650 --> 06:56.360 item. 87 06:56.370 --> 07:01.440 Now, if clicking and dragging doesn't work for you, if this doesn't show up, then you can also just 88 07:01.440 --> 07:05.190 right click, copy and paste, that also works. 89 07:05.310 --> 07:12.580 Now I need to do this many times, so for efficiency's sake, I'm just going to paste in another 4 or 90 07:12.580 --> 07:20.100 5 of these and drag in all of the other ingredients into each of these list items. 91 07:21.360 --> 07:26.340 Now, when you're actually coding this from scratch, you won't need to do all of this dragging because 92 07:26.340 --> 07:33.020 you'll be typing your list item and then you'll be writing your item name in here like so. 93 07:33.030 --> 07:38.790 But because we've written all the text for you, hopefully to save you some time so that you're actually 94 07:38.790 --> 07:44.040 doing more coding and less sort of busy work, then this is how we do it. 95 07:44.490 --> 07:45.780 Again For the filling, 96 07:45.780 --> 07:51.900 we've got another unordered list and then inside there are three list items. 97 07:51.900 --> 07:59.820 So let me go ahead and paste those three list items in and drag each of them in between the tags like 98 07:59.820 --> 08:00.450 so. 99 08:00.960 --> 08:08.040 So now we've got our ingredients and we've got our two unordered lists showing up perfectly. 100 08:08.040 --> 08:13.530 Now all we have to do is to create the final list, which is going to be an ordered list, because if 101 08:13.530 --> 08:16.200 you think about it, instructions have an order, right? 102 08:16.200 --> 08:20.370 You can't first bake the thing if you haven't created it yet. 103 08:20.400 --> 08:28.390 Inside this ordered list, we again need these list item elements and we need to create as many of them 104 08:28.390 --> 08:31.270 as we have steps. 105 08:31.270 --> 08:36.370 So I'm going to drag each of the lines into the list elements. 106 08:41.130 --> 08:42.600 And there we have it. 107 08:42.630 --> 08:50.150 We've got all of our list items and all of our instructions showing up perfectly inside an ordered list. 108 08:50.160 --> 08:55.530 And if we check against the goal, then you can see we've pretty much completed everything perfectly. 109 08:56.520 --> 09:05.850 Now, one thing to talk about at this point is notice how some HTML elements are one line and other 110 09:06.000 --> 09:08.520 HTML elements are on multiple lines. 111 09:08.640 --> 09:17.010 When you paste long lines of text in between the start and end tags of an element, sometimes VS Code 112 09:17.010 --> 09:20.970 will automatically put the closing tag onto the next line. 113 09:21.000 --> 09:28.590 Now, you can edit this so that it all goes onto the same line, or you can purposely make sure they're 114 09:28.590 --> 09:33.360 on different lines and you see it being sandwiched between the open and closing tags. 115 09:33.780 --> 09:39.450 Now this is a personal preference, so it really doesn't matter how you want to do this. So you can do 116 09:39.450 --> 09:40.810 this however you like. 117 09:40.810 --> 09:45.310 But for me, I like to have list items all on the same line. 118 09:45.340 --> 09:53.470 This just kind of helps me see visually how many list items I have, and it doesn't clutter up the list 119 09:53.500 --> 09:55.600 with all of these list items. 120 09:55.600 --> 10:02.080 So have a think about whether, if you like to see your elements like this all on one line with the 121 10:02.080 --> 10:10.510 content enclosed or if you prefer to have it like this where things are more indented and you have the 122 10:10.510 --> 10:14.880 content in between two lines of your list item. 123 10:14.890 --> 10:20.320 In the next lesson, we're going to talk a little bit more about this type of indentation. 124 10:20.320 --> 10:22.840 So don't worry if that doesn't make sense just yet. 125 10:22.870 --> 10:27.910 We're going to talk about nesting and we're going to talk about indentation of HTML elements. 126 10:27.910 --> 10:31.690 So once you're ready, head over to the next lesson and we'll continue from there.