1 00:00:00,570 --> 00:00:02,430 Angela: Hey, guys, in the previous lesson, 2 00:00:02,430 --> 00:00:05,820 you've learned a lot about different types of HTML elements, 3 00:00:05,820 --> 00:00:09,240 and you already got started using them to create websites. 4 00:00:09,240 --> 00:00:10,080 Now, in this section, 5 00:00:10,080 --> 00:00:11,790 we're gonna take it a little bit further 6 00:00:11,790 --> 00:00:13,620 and explore some more intermediate 7 00:00:13,620 --> 00:00:16,200 and advanced concepts in HTML. 8 00:00:16,200 --> 00:00:17,640 We're gonna get started in this lesson 9 00:00:17,640 --> 00:00:19,530 by learning about list elements, 10 00:00:19,530 --> 00:00:22,770 the ordered and unordered lists. 11 00:00:22,770 --> 00:00:24,390 Now, if you've spent any time around 12 00:00:24,390 --> 00:00:25,590 on the internet recently, 13 00:00:25,590 --> 00:00:28,650 you'll notice that it's completely full of lists. 14 00:00:28,650 --> 00:00:30,030 If you go onto Buzzfeed 15 00:00:30,030 --> 00:00:34,200 or any of these sort of clickbaity articles, 16 00:00:34,200 --> 00:00:36,720 usually they'll create a list of something, 17 00:00:36,720 --> 00:00:38,940 such as great items 18 00:00:38,940 --> 00:00:41,550 that must have been invented by geniuses. 19 00:00:41,550 --> 00:00:43,080 But also if you look at something 20 00:00:43,080 --> 00:00:45,840 like the FBI's 10 most wanted fugitives, 21 00:00:45,840 --> 00:00:49,980 this is already created in this website using a list. 22 00:00:49,980 --> 00:00:52,920 So how do we create these lists ourselves? 23 00:00:52,920 --> 00:00:55,350 Well, let's start off with one of the most common types, 24 00:00:55,350 --> 00:00:57,450 the unordered list. 25 00:00:57,450 --> 00:00:59,310 And it's super simple to create. 26 00:00:59,310 --> 00:01:02,220 Simply you have a starting tag with ul 27 00:01:02,220 --> 00:01:04,410 and then have a closing tag. 28 00:01:04,410 --> 00:01:08,970 Now, normally we've had one-line elements such as this 29 00:01:08,970 --> 00:01:11,070 where we get to add some content 30 00:01:11,070 --> 00:01:13,980 in between the open and closing tags. 31 00:01:13,980 --> 00:01:17,100 Now, in this case, however, it's a little bit different. 32 00:01:17,100 --> 00:01:19,140 They actually go on separate lines 33 00:01:19,140 --> 00:01:22,860 because in between these two open and closing tags, 34 00:01:22,860 --> 00:01:25,050 we need an extra type of tag 35 00:01:25,050 --> 00:01:27,900 in order to complete this unordered list. 36 00:01:27,900 --> 00:01:30,750 And these are called list items. 37 00:01:30,750 --> 00:01:34,920 So here you can see we've got three list items, 38 00:01:34,920 --> 00:01:39,060 and each of them contain some piece of content. 39 00:01:39,060 --> 00:01:44,060 But all three items are enclosed inside this unordered list. 40 00:01:44,490 --> 00:01:47,610 So for any list to work and display content, 41 00:01:47,610 --> 00:01:51,240 then you're gonna have to add list items into it. 42 00:01:51,240 --> 00:01:54,120 So what does this look like if we actually run the code? 43 00:01:54,120 --> 00:01:55,920 Well, this is what you would see. 44 00:01:55,920 --> 00:01:59,167 Essentially, unordered list items 45 00:01:59,167 --> 00:02:00,810 will create these bullet points, 46 00:02:00,810 --> 00:02:04,560 because such as in the case of a shopping list here, 47 00:02:04,560 --> 00:02:08,190 the order of the items doesn't matter. 48 00:02:08,190 --> 00:02:09,900 So that's why an unordered list 49 00:02:09,900 --> 00:02:12,510 would be perfect for the situation. 50 00:02:12,510 --> 00:02:14,280 However, on the other hand, 51 00:02:14,280 --> 00:02:17,490 if you needed your list items to be arranged 52 00:02:17,490 --> 00:02:18,990 in a particular order, 53 00:02:18,990 --> 00:02:21,450 then you would create an ordered list. 54 00:02:21,450 --> 00:02:24,540 And once you've added the list items inside there, 55 00:02:24,540 --> 00:02:27,600 what this will do is it will give you numbers. 56 00:02:27,600 --> 00:02:29,250 So it would start from one, 57 00:02:29,250 --> 00:02:33,420 and the number next to each list item will depend 58 00:02:33,420 --> 00:02:35,850 on the order that you put 59 00:02:35,850 --> 00:02:39,540 into this ordered list element. 60 00:02:39,540 --> 00:02:41,910 If this milk was down here, 61 00:02:41,910 --> 00:02:45,120 then it would get the number three, and so on and so forth. 62 00:02:45,120 --> 00:02:46,710 That's all pretty simple. 63 00:02:46,710 --> 00:02:50,760 So if we compare the ordered list, the ol element, 64 00:02:50,760 --> 00:02:52,620 that gives us numbers, 65 00:02:52,620 --> 00:02:55,680 and versus the ul, the unordered list item, 66 00:02:55,680 --> 00:02:57,780 which just gives us bullet points. 67 00:02:57,780 --> 00:02:58,980 Simple as that. 68 00:02:58,980 --> 00:03:03,810 And coming back to our FBI 10 most wanted fugitives website, 69 00:03:03,810 --> 00:03:07,350 you can see they actually created this website using lists. 70 00:03:07,350 --> 00:03:09,420 So when you right-click on any of these images 71 00:03:09,420 --> 00:03:11,370 and select Inspect, 72 00:03:11,370 --> 00:03:14,160 you can see that each of these photos 73 00:03:14,160 --> 00:03:19,160 are actually a list item placed inside an unordered list. 74 00:03:19,380 --> 00:03:21,420 Now, there's a whole bunch more to this website, 75 00:03:21,420 --> 00:03:24,060 which we're gonna learn in future lessons. 76 00:03:24,060 --> 00:03:26,040 But the really important thing is for you to see 77 00:03:26,040 --> 00:03:28,800 that this is a really important part 78 00:03:28,800 --> 00:03:32,100 that you see in websites all over on the internet, 79 00:03:32,100 --> 00:03:35,730 so it's really important that we understand how to use them. 80 00:03:35,730 --> 00:03:37,290 So now that we've learned a little bit 81 00:03:37,290 --> 00:03:40,140 about ordered and unordered lists, 82 00:03:40,140 --> 00:03:41,940 let's try an exercise to make sure 83 00:03:41,940 --> 00:03:43,980 that you've understood everything. 84 00:03:43,980 --> 00:03:48,480 Go ahead and download the List Elements ZIP file 85 00:03:48,480 --> 00:03:50,700 from this current lesson. 86 00:03:50,700 --> 00:03:53,520 And as always, if you forget how to do that 87 00:03:53,520 --> 00:03:56,160 or if you just started on this lesson, 88 00:03:56,160 --> 00:03:58,830 then I recommend going to one of the earlier lessons 89 00:03:58,830 --> 00:04:02,100 where I show you how to download course resources. 90 00:04:02,100 --> 00:04:03,750 Now, once you've downloaded 91 00:04:03,750 --> 00:04:08,280 and extracted the folder 3.0 List Elements 92 00:04:08,280 --> 00:04:10,830 and dragged it into VS Code 93 00:04:10,830 --> 00:04:13,800 or your web development project folder, 94 00:04:13,800 --> 00:04:15,420 then you should be able to see it here 95 00:04:15,420 --> 00:04:17,970 on the File Explorer on the left. 96 00:04:17,970 --> 00:04:20,070 If we explore some of the files 97 00:04:20,070 --> 00:04:22,290 for this current coding exercise, 98 00:04:22,290 --> 00:04:24,480 you can see we've got an index.html 99 00:04:24,480 --> 00:04:26,640 that contains some plain text 100 00:04:26,640 --> 00:04:29,520 which you're going to be formatting into lists. 101 00:04:29,520 --> 00:04:32,100 And if we take a look at the goal, 102 00:04:32,100 --> 00:04:36,390 feel free to choose whichever heading sizes you want, 103 00:04:36,390 --> 00:04:40,740 but for me, I think it made the most sense to have one h1, 104 00:04:40,740 --> 00:04:45,210 and then the ingredients and the instructions as h2s, 105 00:04:45,210 --> 00:04:46,890 and then any other headings, 106 00:04:46,890 --> 00:04:51,030 like this part and this part, as h3s. 107 00:04:51,030 --> 00:04:53,310 But the most important thing I care about 108 00:04:53,310 --> 00:04:56,940 in this exercise is you manage to create these lists. 109 00:04:56,940 --> 00:04:59,040 So we've got an unordered list 110 00:04:59,040 --> 00:05:03,360 for the section one of the ingredients to create the dough, 111 00:05:03,360 --> 00:05:05,580 and then we've got another unordered list 112 00:05:05,580 --> 00:05:07,650 for the filling ingredients. 113 00:05:07,650 --> 00:05:09,810 And finally, we've got all the rest 114 00:05:09,810 --> 00:05:13,740 of the instructions as a ordered list. 115 00:05:13,740 --> 00:05:16,110 Think about how you're going to create this, 116 00:05:16,110 --> 00:05:18,270 and don't worry about typing all the text out, 117 00:05:18,270 --> 00:05:20,970 because if you look inside the index.html, 118 00:05:20,970 --> 00:05:24,454 you'll see all the text typed out for you already. 119 00:05:24,454 --> 00:05:27,180 All you need to do is to add the HTML tags 120 00:05:27,180 --> 00:05:31,050 and to format the document into an HTML website. 121 00:05:31,050 --> 00:05:34,590 And in the end, we should end up with this recipe website 122 00:05:34,590 --> 00:05:38,190 for creating delicious cinnamon rolls. 123 00:05:38,190 --> 00:05:40,890 Now, if you watched my recent Instagram takeover 124 00:05:40,890 --> 00:05:42,877 of the Udemy account, 125 00:05:42,877 --> 00:05:45,390 you'll see me making the same cinnamon rolls. 126 00:05:45,390 --> 00:05:46,920 And if you want to do the same, 127 00:05:46,920 --> 00:05:49,410 then this is the recipe for you. 128 00:05:49,410 --> 00:05:51,360 This is what you're aiming for, 129 00:05:51,360 --> 00:05:54,300 and using what you've learned about list elements, 130 00:05:54,300 --> 00:05:56,850 I want you to go ahead and pause the video 131 00:05:56,850 --> 00:05:58,563 and complete this challenge. 132 00:06:02,730 --> 00:06:04,710 All right, so did you manage to do that? 133 00:06:04,710 --> 00:06:07,170 Let's go ahead and walk through the solution together. 134 00:06:07,170 --> 00:06:09,150 So I'm gonna show the previous on the right side 135 00:06:09,150 --> 00:06:12,840 so you can see the website update as I type. 136 00:06:12,840 --> 00:06:15,870 First, we're gonna start off with our heading tags. 137 00:06:15,870 --> 00:06:18,820 So I'm just gonna add a bunch of headings in quite quickly. 138 00:06:24,240 --> 00:06:27,150 All right, so that's all the headings out of the way. 139 00:06:27,150 --> 00:06:29,610 So now we're onto the proper work, 140 00:06:29,610 --> 00:06:31,500 which is creating our list. 141 00:06:31,500 --> 00:06:34,740 As I said, the ingredients don't really need an order, 142 00:06:34,740 --> 00:06:37,140 so we're gonna create an unordered list. 143 00:06:37,140 --> 00:06:40,230 So in between our start and end ul tags, 144 00:06:40,230 --> 00:06:44,070 we're going to have each of these as a list item. 145 00:06:44,070 --> 00:06:47,370 So I'm gonna create the list item tag. 146 00:06:47,370 --> 00:06:49,950 And once I've created that, 147 00:06:49,950 --> 00:06:53,610 then all I need to do is to drag my first list item 148 00:06:53,610 --> 00:06:56,550 in between the list item. 149 00:06:56,550 --> 00:06:59,674 Now, if clicking and dragging doesn't work for you, 150 00:06:59,674 --> 00:07:00,507 if this doesn't show up, 151 00:07:00,507 --> 00:07:04,748 then you can also just right-click, copy, and paste. 152 00:07:04,748 --> 00:07:05,640 That also works. 153 00:07:05,640 --> 00:07:09,450 Now, I need to do this many times, so for efficiency's sake, 154 00:07:09,450 --> 00:07:14,100 I'm just going to paste in another four or five of these 155 00:07:14,100 --> 00:07:17,610 and drag in all of the other ingredients 156 00:07:17,610 --> 00:07:20,133 into each of these list items. 157 00:07:21,660 --> 00:07:24,000 Now, when you're actually coding this from scratch, 158 00:07:24,000 --> 00:07:25,770 you won't need to do all of this dragging 159 00:07:25,770 --> 00:07:28,890 because you'll be typing your list item, 160 00:07:28,890 --> 00:07:33,300 and then you'll be writing your item name in here like so. 161 00:07:33,300 --> 00:07:35,940 But because we've written all the text for you, 162 00:07:35,940 --> 00:07:38,130 hopefully to save you some time 163 00:07:38,130 --> 00:07:40,170 so that you're actually doing more coding 164 00:07:40,170 --> 00:07:44,640 and less sort of busywork, then this is how we do it. 165 00:07:44,640 --> 00:07:48,270 Again, for the filling, we've got another unordered list, 166 00:07:48,270 --> 00:07:52,170 and then inside there are three list items. 167 00:07:52,170 --> 00:07:55,980 So let me go ahead and paste those three list items in 168 00:07:55,980 --> 00:08:00,393 and drag each of them in between the tags like so. 169 00:08:02,005 --> 00:08:04,020 So now we've got our ingredients, 170 00:08:04,020 --> 00:08:08,370 and we've got our two unordered lists showing up perfectly. 171 00:08:08,370 --> 00:08:11,732 Now all we have to do is to create the final list, 172 00:08:11,732 --> 00:08:13,140 which is going to be an ordered list, 173 00:08:13,140 --> 00:08:14,340 because if you think about it, 174 00:08:14,340 --> 00:08:16,230 instructions have an order, right? 175 00:08:16,230 --> 00:08:18,600 You can't first bake the thing 176 00:08:18,600 --> 00:08:20,670 if you haven't created it yet. 177 00:08:20,670 --> 00:08:22,410 Inside this ordered list, 178 00:08:22,410 --> 00:08:25,980 we again need these list item elements, 179 00:08:25,980 --> 00:08:30,473 and we need to create as many of them as we have steps. 180 00:08:31,440 --> 00:08:36,303 So I'm gonna drag each of the lines into the list elements. 181 00:08:41,280 --> 00:08:45,180 And there we have it, we've got all of our list items 182 00:08:45,180 --> 00:08:48,540 and all of our instructions showing up perfectly 183 00:08:48,540 --> 00:08:50,490 inside an ordered list. 184 00:08:50,490 --> 00:08:52,050 And if we check against the goal, 185 00:08:52,050 --> 00:08:53,490 then you can see we've pretty much 186 00:08:53,490 --> 00:08:55,473 completed everything perfectly. 187 00:08:56,820 --> 00:09:00,660 Now, one thing to talk about at this point is notice 188 00:09:00,660 --> 00:09:05,280 how some HTML elements are one line 189 00:09:05,280 --> 00:09:08,910 and other HTML elements are on multiple lines. 190 00:09:08,910 --> 00:09:11,880 When you paste long lines of text 191 00:09:11,880 --> 00:09:15,720 in between the start and end tags of an element, 192 00:09:15,720 --> 00:09:19,710 sometimes VS Code will automatically put the closing tag 193 00:09:19,710 --> 00:09:21,330 onto the next line. 194 00:09:21,330 --> 00:09:23,394 Now, you can edit this 195 00:09:23,394 --> 00:09:26,070 so that it all goes onto the same line, 196 00:09:26,070 --> 00:09:30,565 or you can purposely make sure they're on different lines, 197 00:09:30,565 --> 00:09:31,398 and you see it being sandwiched 198 00:09:31,398 --> 00:09:34,110 between the open and closing tags. 199 00:09:34,110 --> 00:09:36,621 Now, this is a personal preference, 200 00:09:36,621 --> 00:09:38,850 so it really doesn't matter how you want to do this, 201 00:09:38,850 --> 00:09:41,010 so you can do this however you like. 202 00:09:41,010 --> 00:09:45,540 But for me, I like to have list items all on the same line. 203 00:09:45,540 --> 00:09:48,150 This just kind of helps me see visually 204 00:09:48,150 --> 00:09:50,460 how many list items I have, 205 00:09:50,460 --> 00:09:53,610 and it doesn't clutter up the list 206 00:09:53,610 --> 00:09:55,800 with all of these list items. 207 00:09:55,800 --> 00:09:57,210 So have a think about whether 208 00:09:57,210 --> 00:10:00,570 if you like to see your elements like this, 209 00:10:00,570 --> 00:10:03,570 all on one line with the content enclosed, 210 00:10:03,570 --> 00:10:06,540 or if you prefer to have it like this 211 00:10:06,540 --> 00:10:09,090 where things are more indented, 212 00:10:09,090 --> 00:10:13,290 and you have the content in between two lines 213 00:10:13,290 --> 00:10:15,090 of your list item. 214 00:10:15,090 --> 00:10:17,820 In the next lesson, we're gonna talk a little bit more 215 00:10:17,820 --> 00:10:20,430 about this type of indentation, 216 00:10:20,430 --> 00:10:22,890 so don't worry if that doesn't make sense just yet. 217 00:10:22,890 --> 00:10:24,270 We're gonna talk about nesting, 218 00:10:24,270 --> 00:10:28,050 and we're gonna talk about indentation of HTML elements. 219 00:10:28,050 --> 00:10:30,360 So once you're ready, head over to the next lesson, 220 00:10:30,360 --> 00:10:31,860 and we'll continue from there.