1 00:00:00,320 --> 00:00:01,250 Hey guys. 2 00:00:01,250 --> 00:00:06,320 In the previous lesson, you've learned a lot about different types of HTML elements and you already 3 00:00:06,320 --> 00:00:08,960 got started using them to create websites. 4 00:00:08,990 --> 00:00:13,670 Now in this section we're going to take it a little bit further and explore some more intermediate and 5 00:00:13,670 --> 00:00:15,770 advanced concepts in HTML. 6 00:00:15,890 --> 00:00:21,320 We're going to get started in this lesson by learning about list elements, the ordered and unordered 7 00:00:21,320 --> 00:00:22,070 lists. 8 00:00:22,430 --> 00:00:27,170 Now, if you've spent any time around on the Internet recently, you'll notice that it's completely 9 00:00:27,170 --> 00:00:28,520 full of lists. 10 00:00:28,520 --> 00:00:36,020 If you go on to BuzzFeed or any of these sort of clickbaity articles, usually they'll create a list 11 00:00:36,020 --> 00:00:41,300 of something such as great items that must have been invented by geniuses. 12 00:00:41,300 --> 00:00:47,660 But also if you look at something like the FBI's ten Most Wanted Fugitives, this is also created in 13 00:00:47,660 --> 00:00:49,700 this website using a list. 14 00:00:49,700 --> 00:00:52,690 So how do we create these lists ourselves? 15 00:00:52,700 --> 00:00:57,080 Well, let's start off with one of the most common types, the unordered list. 16 00:00:57,080 --> 00:01:04,260 And it's super simple to create simply, you have a starting tag with UL and then have a closing tag. 17 00:01:04,260 --> 00:01:11,880 Now, normally we've had one line elements such as this where we get to add some content in between 18 00:01:11,880 --> 00:01:13,730 the open and closing tags. 19 00:01:13,740 --> 00:01:16,920 Now in this case, however, it's a little bit different. 20 00:01:16,950 --> 00:01:23,940 They actually go on separate lines because in between these two open and closing tags, we need an extra 21 00:01:23,940 --> 00:01:27,600 type of tag in order to complete this unordered list. 22 00:01:27,600 --> 00:01:30,570 And these are called list items. 23 00:01:30,570 --> 00:01:38,730 So here you can see we've got three list items and each of them contain some piece of content. 24 00:01:38,820 --> 00:01:44,270 But all three items are enclosed inside this unordered list. 25 00:01:44,280 --> 00:01:50,850 So for any list to work and display content, then you're going to have to add list items into it. 26 00:01:51,000 --> 00:01:54,150 So what does this look like if we actually run the code? 27 00:01:54,150 --> 00:01:55,770 Well, this is what you would see. 28 00:01:55,800 --> 00:02:03,420 Essentially unordered list items will create these bullet points because such as in the case of a shopping 29 00:02:03,420 --> 00:02:08,190 list here, the order of the items doesn't matter. 30 00:02:08,190 --> 00:02:11,970 So that's why an unordered list would be perfect for this situation. 31 00:02:12,390 --> 00:02:19,200 However, on the other hand, if you needed your list items to be arranged in a particular order, then 32 00:02:19,200 --> 00:02:21,060 you would create an ordered list. 33 00:02:21,210 --> 00:02:27,570 And once you've added the list items inside there, what this will do is it will give you numbers. 34 00:02:27,570 --> 00: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 35 00:02:35,700 --> 00:02:39,420 into this ordered list element. 36 00:02:39,420 --> 00:02:44,960 If this milk was down here, then it would get the number three and so on and so forth. 37 00:02:44,970 --> 00:02:46,530 That's all pretty simple. 38 00:02:46,530 --> 00:02:54,990 So if we compare the ordered list, the ol element that gives us numbers and versus the UL, the unordered 39 00:02:54,990 --> 00:02:58,830 list item, which just gives us bullet points, simple as that. 40 00:02:58,830 --> 00:03:05,310 And coming back to our FBI ten Most Wanted Fugitives website, you can see they actually created this 41 00:03:05,310 --> 00:03:07,230 website using lists. 42 00:03:07,230 --> 00:03:14,160 So when you right click on any of these images and select inspect, you can see that each of these photos 43 00:03:14,160 --> 00:03:19,170 are actually a list item placed inside an unordered list. 44 00:03:19,200 --> 00:03:23,910 Now there's a whole bunch more to this website which we're going to learn in future lessons. 45 00:03:23,910 --> 00:03:30,060 But the really important thing is for you to see that this is a really important part that you see in 46 00:03:30,060 --> 00:03:32,100 websites all over on the Internet. 47 00:03:32,100 --> 00:03:35,280 So it's really important that we understand how to use them. 48 00:03:35,520 --> 00:03:41,490 So now that we've learned a little bit about ordered and unordered lists, let's try an exercise to 49 00:03:41,490 --> 00:03:43,680 make sure that you've understood everything. 50 00:03:43,800 --> 00:03:50,400 Go ahead and download the list element zip file from this current lesson. 51 00:03:50,400 --> 00:03:57,000 And as always, if you forget how to do that, or if you just started on this lesson, then I recommend 52 00:03:57,000 --> 00:04:01,860 going to one of the earlier lessons where I show you how to download course resources. 53 00:04:01,860 --> 00:04:10,830 Now, once you've downloaded and extracted the folder 3.0 list elements and dragged it into VS code 54 00:04:10,830 --> 00:04:16,860 or your web development projects folder, then you should be able to see it here on the file Explorer 55 00:04:16,860 --> 00:04:17,790 on the left. 56 00:04:17,820 --> 00:04:24,420 If we explore some of the files for this current coding exercise, you can see we've got an index.html 57 00:04:24,450 --> 00:04:29,280 that contains some plain text which you're going to be formatting into lists. 58 00:04:29,280 --> 00:04:36,330 And if we take a look at the goal, feel free to choose whichever heading sizes you want. 59 00:04:36,330 --> 00:04:43,830 But for me, I think it made the most sense to have one H1 and then the ingredients and the instructions 60 00:04:43,830 --> 00:04:50,850 as h2's and then any other headings like this part and this part as h3's. 61 00:04:50,850 --> 00:04:56,730 But the most important thing I care about in this exercise is you manage to create these lists. 62 00:04:56,730 --> 00:04:59,690 So we've got an unordered list for. 63 00:05:00,110 --> 00:05:03,110 Section one of the ingredients to create the dough. 64 00:05:03,110 --> 00:05:07,460 And then we've got another unordered list for the filling ingredients. 65 00:05:07,460 --> 00:05:13,550 And finally, we've got all the rest of the instructions as a ordered list. 66 00:05:13,580 --> 00:05:18,710 Think about how you're going to create this and don't worry about typing all the text out because if 67 00:05:18,710 --> 00:05:23,510 you look inside the index.html, you'll see all the text typed out for you already. 68 00:05:23,510 --> 00:05:30,830 All you need to do is to add the HTML tags and to format the document into an HTML website. 69 00:05:30,830 --> 00:05:37,640 And in the end we should end up with this recipe website for creating delicious cinnamon rolls. 70 00:05:37,850 --> 00:05:44,120 Now, if you watched my recent Instagram takeover of the Udemy account, you'll see me making the same 71 00:05:44,120 --> 00:05:45,110 cinnamon rolls. 72 00:05:45,110 --> 00:05:48,920 And if you want to do the same, then this is the recipe for you. 73 00:05:49,100 --> 00:05:54,200 This is what you're aiming for and using what you've learnt about list elements. 74 00:05:54,200 --> 00:05:58,550 I want you to go ahead and pause the video and complete this challenge. 75 00:06:02,620 --> 00:06:03,040 All right. 76 00:06:03,040 --> 00:06:04,510 So did you manage to do that? 77 00:06:04,510 --> 00:06:06,970 Let's go ahead and walk through the solution together. 78 00:06:06,970 --> 00: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. 79 00:06:12,610 --> 00:06:15,670 First, we're going to start off with our heading tags. 80 00:06:15,670 --> 00:06:18,850 So I'm just going to add a bunch of headings in quite quickly. 81 00:06:24,090 --> 00:06:26,800 All right, so that's all the headings out of the way. 82 00:06:26,820 --> 00:06:31,320 So now we're on to the proper work, which is creating our lists. 83 00:06:31,350 --> 00:06:36,810 As I said, the ingredients don't really need an order, so we're going to create an unordered list. 84 00:06:36,840 --> 00:06:43,740 So in between our start and end UL tags, we're going to have each of these as a list item. 85 00:06:43,740 --> 00:06:46,980 So I'm going to create the list item tag. 86 00:06:46,980 --> 00: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 87 00:06:55,650 --> 00:06:56,360 item. 88 00:06:56,370 --> 00:07:01,440 Now, if clicking and dragging doesn't work for you, if this doesn't show up, then you can also just 89 00:07:01,440 --> 00:07:05,190 right click, copy and paste that also works. 90 00:07:05,310 --> 00: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 91 00:07:12,580 --> 00:07:20,100 5 of these and drag in all of the other ingredients into each of these list items. 92 00:07:21,360 --> 00:07:26,340 Now, when you're actually coding this from scratch, you won't need to do all of this dragging because 93 00:07:26,340 --> 00:07:33,020 you'll be typing your list item and then you'll be writing your item name in here like so. 94 00:07:33,030 --> 00:07:38,790 But because we've written all the text for you, hopefully to save you some time so that you're actually 95 00:07:38,790 --> 00:07:44,040 doing more coding and less sort of busy work, then this is how we do it. 96 00:07:44,490 --> 00:07:45,780 Again for the filling. 97 00:07:45,780 --> 00:07:51,900 We've got another unordered list and then inside there are three list items. 98 00:07:51,900 --> 00: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 99 00:07:59,820 --> 00:08:00,450 so. 100 00:08:00,960 --> 00:08:08,040 So now we've got our ingredients and we've got our two unordered lists showing up perfectly. 101 00:08:08,040 --> 00: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 102 00:08:13,530 --> 00:08:16,200 you think about it, instructions have an order, right? 103 00:08:16,200 --> 00:08:20,370 You can't first bake the thing if you haven't created it yet. 104 00:08:20,400 --> 00:08:28,390 Inside this order list, we again need these list item elements and we need to create as many of them 105 00:08:28,390 --> 00:08:31,270 as we have steps. 106 00:08:31,270 --> 00:08:36,370 So I'm going to drag each of the lines into the list elements. 107 00:08:41,130 --> 00:08:42,600 And there we have it. 108 00:08:42,630 --> 00:08:50,150 We've got all of our list items and all of our instructions showing up perfectly inside an ordered list. 109 00:08:50,160 --> 00:08:55,530 And if we check against the goal, then you can see we've pretty much completed everything perfectly. 110 00:08:56,520 --> 00:09:05,850 Now, one thing to talk about at this point is notice how some HTML elements are one line and other 111 00:09:06,000 --> 00:09:08,520 HTML elements are on multiple lines. 112 00:09:08,640 --> 00:09:17,010 When you paste long lines of text in between the start and end tags of an element, sometimes vs code 113 00:09:17,010 --> 00:09:20,970 will automatically put the closing tag onto the next line. 114 00:09:21,000 --> 00: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 115 00:09:28,590 --> 00:09:33,360 on different lines and you see it being sandwiched between the open and closing tags. 116 00:09:33,780 --> 00: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 117 00:09:39,450 --> 00:09:40,810 this however you like. 118 00:09:40,810 --> 00:09:45,310 But for me, I like to have list items all on the same line. 119 00:09:45,340 --> 00: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 120 00:09:53,500 --> 00:09:55,600 with all of these list items. 121 00:09:55,600 --> 00:10:02,080 So have a think about whether, if you like to see your elements like this all on one line with the 122 00:10:02,080 --> 00:10:10,510 content enclosed or if you prefer to have it like this where things are more indented and you have the 123 00:10:10,510 --> 00:10:14,880 content in between two lines of your list item. 124 00:10:14,890 --> 00:10:20,320 In the next lesson, we're going to talk a little bit more about this type of indentation. 125 00:10:20,320 --> 00:10:22,840 So don't worry if that doesn't make sense just yet. 126 00:10:22,870 --> 00:10:27,910 We're going to talk about nesting and we're going to talk about indentation of HTML elements. 127 00:10:27,910 --> 00:10:31,690 So once you're ready, head over to the next lesson and we'll continue from there.