1 00:00:00,270 --> 00:00:01,620 Instructor: Now, in the previous lesson 2 00:00:01,620 --> 00:00:05,250 we learned a little bit about ordered and unordered lists. 3 00:00:05,250 --> 00:00:06,083 Now in this lesson, 4 00:00:06,083 --> 00:00:08,760 we're gonna take that concept a little bit further. 5 00:00:08,760 --> 00:00:12,390 I wanna show you how you can nest things inside others. 6 00:00:12,390 --> 00:00:15,840 For example, we saw that we could already nest 7 00:00:15,840 --> 00:00:20,580 the list elements inside an unordered list, 8 00:00:20,580 --> 00:00:23,430 and you would see it indented like this. 9 00:00:23,430 --> 00:00:25,620 But we can actually go a step further 10 00:00:25,620 --> 00:00:30,180 and we can actually nest a list inside another list. 11 00:00:30,180 --> 00:00:31,770 So in this case, what you see 12 00:00:31,770 --> 00:00:36,540 is we've got the first unordered list that starts here, 13 00:00:36,540 --> 00:00:39,780 and this is where it ends. 14 00:00:39,780 --> 00:00:42,960 But we've also got another unordered list here, 15 00:00:42,960 --> 00:00:47,960 and this is where the second one begins and where it ends. 16 00:00:48,390 --> 00:00:52,170 When this is rendered in a website, this is what you'll see. 17 00:00:52,170 --> 00:00:55,110 You'll see it looking like this. 18 00:00:55,110 --> 00:00:59,970 So you've got the first list that is this entire part, 19 00:00:59,970 --> 00:01:02,130 and then inside the first list, 20 00:01:02,130 --> 00:01:05,040 we've got a separate list 21 00:01:05,040 --> 00:01:08,190 under this particular bullet point. 22 00:01:08,190 --> 00:01:12,600 Now, how does the code look? Well, it looks quite simple. 23 00:01:12,600 --> 00:01:17,040 All you have to do is inside a list item 24 00:01:17,040 --> 00:01:20,820 you see how the starting list item is right here 25 00:01:20,820 --> 00:01:25,710 and the end list item is down here. 26 00:01:25,710 --> 00:01:27,420 Inside this list item, 27 00:01:27,420 --> 00:01:31,620 instead of simply just having a single line of text 28 00:01:31,620 --> 00:01:33,630 such as what we've got up here, 29 00:01:33,630 --> 00:01:38,340 instead we've actually embedded an entire unordered list. 30 00:01:38,340 --> 00:01:42,150 So first, we'll write the text for the list item 31 00:01:42,150 --> 00:01:46,470 and then after the text, we embed our unordered list, 32 00:01:46,470 --> 00:01:49,803 just as you would see in any other normal list. 33 00:01:51,060 --> 00:01:56,060 And then we end up with what's called a nested list. 34 00:01:56,520 --> 00:01:59,820 This is the part where indentation your code 35 00:01:59,820 --> 00:02:02,370 becomes super important, 36 00:02:02,370 --> 00:02:07,370 because imagine the code looked like this and not like this. 37 00:02:08,280 --> 00:02:10,919 When you look at this code at a glance, 38 00:02:10,919 --> 00:02:14,880 it's a lot harder to see that you've got a list 39 00:02:14,880 --> 00:02:18,300 embedded inside another list, right? 40 00:02:18,300 --> 00:02:20,040 Because you have to actually read 41 00:02:20,040 --> 00:02:22,020 what each of these tags are 42 00:02:22,020 --> 00:02:23,580 instead of using the clues 43 00:02:23,580 --> 00:02:26,523 that's offered by that indentation. 44 00:02:27,450 --> 00:02:29,040 And as you can imagine, 45 00:02:29,040 --> 00:02:32,340 we can have even crazier nested lists 46 00:02:32,340 --> 00:02:34,560 like what I've got right here. 47 00:02:34,560 --> 00:02:37,830 So there's actually three lists here. 48 00:02:37,830 --> 00:02:42,300 One is up here, this is the first list. 49 00:02:42,300 --> 00:02:45,060 This is a unordered list. 50 00:02:45,060 --> 00:02:49,230 And then we've got a second list right here, 51 00:02:49,230 --> 00:02:51,540 which is, again, an unordered list 52 00:02:51,540 --> 00:02:56,540 and that's embedded under the list item for B. 53 00:02:56,610 --> 00:02:58,560 And then to complicate things, 54 00:02:58,560 --> 00:03:01,860 I've added a third ordered list 55 00:03:01,860 --> 00:03:06,750 that's listed under this second item right here. 56 00:03:06,750 --> 00:03:08,970 This amount of craziness 57 00:03:08,970 --> 00:03:11,250 starts to really highlight the issues 58 00:03:11,250 --> 00:03:13,410 that you're gonna have reading this code. 59 00:03:13,410 --> 00:03:15,240 Imagine somebody else gave you this code 60 00:03:15,240 --> 00:03:16,500 and you had to figure out 61 00:03:16,500 --> 00:03:19,170 without looking at the right hand side, 62 00:03:19,170 --> 00:03:21,870 what is going on right here. 63 00:03:21,870 --> 00:03:25,020 It's a lot easier if we have it indented, right? 64 00:03:25,020 --> 00:03:30,020 Because we can clearly see one unordered list, 65 00:03:30,330 --> 00:03:35,330 the second unordered list, and the third ordered list, 66 00:03:36,180 --> 00:03:38,550 because they're all nicely indented, 67 00:03:38,550 --> 00:03:42,660 and it's a lot easier visually for when we are reading code. 68 00:03:42,660 --> 00:03:45,570 So when you're writing code, you also are thinking about 69 00:03:45,570 --> 00:03:49,053 how other people are going to find reading your code. 70 00:03:49,920 --> 00:03:54,060 Now, let's try and exercise to really drill this home. 71 00:03:54,060 --> 00:03:57,720 I want you to download the Nesting and Indentation zip file 72 00:03:57,720 --> 00:04:00,420 from this current lesson, and I want you to open up 73 00:04:00,420 --> 00:04:04,320 Inside VS code, as you have done previously. 74 00:04:04,320 --> 00:04:06,810 Now in this case, if we take a look at our goal, 75 00:04:06,810 --> 00:04:11,070 it's to create a super complex nested list. 76 00:04:11,070 --> 00:04:12,870 In the last lesson you already saw 77 00:04:12,870 --> 00:04:16,019 how you can create simple list elements, 78 00:04:16,019 --> 00:04:19,589 whether it's unordered lists or it's ordered lists. 79 00:04:19,589 --> 00:04:22,230 It's pretty simple to create just a list 80 00:04:22,230 --> 00:04:24,060 with some list items. 81 00:04:24,060 --> 00:04:25,680 But in this challenge 82 00:04:25,680 --> 00:04:29,610 I want you to create something a lot more complicated. 83 00:04:29,610 --> 00:04:31,110 Let me walk you through it. 84 00:04:31,110 --> 00:04:34,590 So firstly, we've got a unordered list 85 00:04:34,590 --> 00:04:38,640 that has just three list items, A, B, and C. 86 00:04:38,640 --> 00:04:43,640 But under item B, notice here we've got a ordered list. 87 00:04:45,120 --> 00:04:49,320 This ordered list also has three items 88 00:04:49,320 --> 00:04:53,460 and under item B2, the second item, 89 00:04:53,460 --> 00:04:56,970 we've got yet another unordered list. 90 00:04:56,970 --> 00:04:58,650 And inside the first item 91 00:04:58,650 --> 00:05:01,380 we've nested another unordered list. 92 00:05:01,380 --> 00:05:03,330 And inside the third item 93 00:05:03,330 --> 00:05:06,900 we've embedded another ordered list. 94 00:05:06,900 --> 00:05:08,910 This is a little bit complicated, 95 00:05:08,910 --> 00:05:10,500 and in order to really understand it, 96 00:05:10,500 --> 00:05:15,360 you need to take a look at this part of the video, 97 00:05:15,360 --> 00:05:17,910 because here I've got the code 98 00:05:17,910 --> 00:05:21,240 that will create this simpler structure. 99 00:05:21,240 --> 00:05:23,670 And the important thing to notice is 100 00:05:23,670 --> 00:05:27,900 that whereas normally you would probably have a list item 101 00:05:27,900 --> 00:05:29,910 that starts like this 102 00:05:29,910 --> 00:05:33,873 and then you would have it closed like this. 103 00:05:35,640 --> 00:05:38,820 In the case when we're embedding a list, 104 00:05:38,820 --> 00:05:42,270 that closing tag does not go here, 105 00:05:42,270 --> 00:05:46,830 but instead it goes all the way at the end 106 00:05:46,830 --> 00:05:49,890 of the nested list. 107 00:05:49,890 --> 00:05:54,540 Once we're done nesting this unordered list right here, 108 00:05:54,540 --> 00:05:57,120 then do we close that list item. 109 00:05:57,120 --> 00:06:01,020 So this is a really important thing to take notice of. 110 00:06:01,020 --> 00:06:04,590 And then, I want you to just study this page a little bit 111 00:06:04,590 --> 00:06:08,610 to see how I created this list using this code 112 00:06:08,610 --> 00:06:11,340 and then take this and apply it 113 00:06:11,340 --> 00:06:15,480 to the challenge in the coding exercise. 114 00:06:15,480 --> 00:06:16,860 Have a good think about it. 115 00:06:16,860 --> 00:06:19,650 Take some time to try and complete this challenge. 116 00:06:19,650 --> 00:06:22,020 I, for one, believe that you can do this 117 00:06:22,020 --> 00:06:25,500 if you just spend some time thinking and trying it. 118 00:06:25,500 --> 00:06:29,520 And as always remember, you can use the preview feature 119 00:06:29,520 --> 00:06:32,820 to see how your code is turning out and shaping up 120 00:06:32,820 --> 00:06:34,230 while you are writing it. 121 00:06:34,230 --> 00:06:36,300 And I think that will help you quite a lot. 122 00:06:36,300 --> 00:06:39,153 Pause the video now and give that coding exercise a go. 123 00:06:40,890 --> 00:06:42,390 All right, so how did that go? 124 00:06:42,390 --> 00:06:44,010 Now, if you didn't give that a go, 125 00:06:44,010 --> 00:06:45,720 I want you to stop the video now. 126 00:06:45,720 --> 00:06:47,340 Make sure that you've tried it. 127 00:06:47,340 --> 00:06:50,490 You're not gonna learn coding through just watching me code. 128 00:06:50,490 --> 00:06:54,600 You're only gonna learn programming by actually doing it, 129 00:06:54,600 --> 00:06:57,630 solving challenges, feeling stupid sometimes, 130 00:06:57,630 --> 00:06:59,160 feeling like you're not good enough. 131 00:06:59,160 --> 00:07:01,440 But at the end, when you do get it, 132 00:07:01,440 --> 00:07:03,990 when you do succeed, it's gonna feel amazing. 133 00:07:03,990 --> 00:07:06,300 And I promise you it was the same for everybody 134 00:07:06,300 --> 00:07:08,370 who's gone through this journey. 135 00:07:08,370 --> 00:07:11,490 So what I'm gonna do is I'm gonna run through the solution 136 00:07:11,490 --> 00:07:14,400 and I'm going to drag my goal up over here, 137 00:07:14,400 --> 00:07:19,320 so I can compare it to the preview as I go along. 138 00:07:19,320 --> 00:07:23,790 So the first step is creating the first unordered list 139 00:07:23,790 --> 00:07:27,300 with three items, A, B, and C. 140 00:07:27,300 --> 00:07:29,490 That should be pretty easy to do. 141 00:07:29,490 --> 00:07:32,553 and let's go ahead and create that. 142 00:07:36,030 --> 00:07:39,180 Alright, so now we've got the top of our nest, 143 00:07:39,180 --> 00:07:42,120 which is our A, B, and C. 144 00:07:42,120 --> 00:07:45,060 If we take a look at our goal, compare it, 145 00:07:45,060 --> 00:07:46,770 we've got A, B, C. 146 00:07:46,770 --> 00:07:51,770 Inside the bullet B we're going to embed, right here, 147 00:07:52,080 --> 00:07:53,970 a ordered list. 148 00:07:53,970 --> 00:07:58,827 So it's again gonna have three items, B1, B2, and B3. 149 00:07:58,827 --> 00:08:00,570 And we know it's an ordered list, 150 00:08:00,570 --> 00:08:03,993 because it starts off with the numbers one, two, and three. 151 00:08:05,160 --> 00:08:06,660 Let's go ahead and embed that 152 00:08:06,660 --> 00:08:10,980 inside this second B list item. 153 00:08:10,980 --> 00:08:12,180 Remember what I said, 154 00:08:12,180 --> 00:08:14,760 when you embed a list in another one, 155 00:08:14,760 --> 00:08:17,580 you find the list item you want to embed it in, 156 00:08:17,580 --> 00:08:20,430 and after the content of the list item, 157 00:08:20,430 --> 00:08:23,580 which is, of course, this B right here, 158 00:08:23,580 --> 00:08:26,790 then we go ahead and hit enter. 159 00:08:26,790 --> 00:08:30,060 And that is where we create our list. 160 00:08:30,060 --> 00:08:33,330 We're going to create an ordered list in this case 161 00:08:33,330 --> 00:08:36,390 and it's going to have three items. 162 00:08:36,390 --> 00:08:39,570 The first one is going to be B1, 163 00:08:39,570 --> 00:08:43,200 and then B2 and B3. 164 00:08:43,200 --> 00:08:45,900 Now let's, again, compare and contrast. 165 00:08:45,900 --> 00:08:48,510 We've got our B1, B2, B3, 166 00:08:48,510 --> 00:08:52,830 but take a look inside this B2 item. 167 00:08:52,830 --> 00:08:55,800 Again, we're going to nest another list 168 00:08:55,800 --> 00:09:00,800 and here we've got a unordered list, B2a B2b and B2c. 169 00:09:01,470 --> 00:09:03,363 Let's go ahead and do that. 170 00:09:06,600 --> 00:09:09,180 Right here inside the B2 list item 171 00:09:09,180 --> 00:09:13,530 we're going to create our unordered list, our ul, 172 00:09:13,530 --> 00:09:18,530 and we're going to have B2a, B2b and B2c. 173 00:09:21,300 --> 00:09:24,150 Let's compare. We've got B2a, B2b, B2c. 174 00:09:24,150 --> 00:09:27,030 So we've already got most of the parts done. 175 00:09:27,030 --> 00:09:31,410 The final nest in this big long chain is under B2a, 176 00:09:31,410 --> 00:09:36,410 we need to add a unordered list, B2aa, and B2ab. 177 00:09:36,720 --> 00:09:38,580 Now the way that I've named each of these 178 00:09:38,580 --> 00:09:40,710 hopefully should help you with the nesting. 179 00:09:40,710 --> 00:09:41,640 If it doesn't, 180 00:09:41,640 --> 00:09:43,950 then you just have to compare against the goal 181 00:09:43,950 --> 00:09:46,560 and try matching it visually. 182 00:09:46,560 --> 00:09:49,410 In this case, instead of under the second item, 183 00:09:49,410 --> 00:09:52,200 it's actually nested under the first item. 184 00:09:52,200 --> 00:09:54,360 And again, it's an unordered list 185 00:09:54,360 --> 00:09:59,360 with just two list items, B2aa, and B2ab. 186 00:10:05,460 --> 00:10:10,460 Now we've got pretty much all of this part sorted. 187 00:10:10,620 --> 00:10:13,410 All we need to do now is just to add 188 00:10:13,410 --> 00:10:18,410 the final ordered list enbed under the B3 list item. 189 00:10:19,860 --> 00:10:21,465 Let's find our B3 list item. 190 00:10:21,465 --> 00:10:25,380 After the text, let's hit enter to create a new line. 191 00:10:25,380 --> 00:10:29,010 And then we're gonna create an ordered list like this. 192 00:10:29,010 --> 00:10:34,010 And we're going to add our two list items, B31 and B32. 193 00:10:39,240 --> 00:10:41,340 So now if we compare our goal 194 00:10:41,340 --> 00:10:43,260 and what we've got in the preview, 195 00:10:43,260 --> 00:10:45,810 you should see it's completely identical. 196 00:10:45,810 --> 00:10:48,090 And through this process, hopefully, you've learned 197 00:10:48,090 --> 00:10:50,610 a little bit more about nesting. 198 00:10:50,610 --> 00:10:53,760 And one of the nice things about Visual Studio Code 199 00:10:53,760 --> 00:10:57,450 is that it will automatically indent things 200 00:10:57,450 --> 00:10:59,670 as you write your code. 201 00:10:59,670 --> 00:11:04,260 It knows, for example, list items go inside a list. 202 00:11:04,260 --> 00:11:09,260 So whether it's a ul or an ol, when you go to file and save 203 00:11:10,170 --> 00:11:12,390 or use the shortcut command here, 204 00:11:12,390 --> 00:11:14,940 in my case on a Mac, it's Command S. 205 00:11:14,940 --> 00:11:17,640 If you're on Windows, it's probably Ctrl S. 206 00:11:17,640 --> 00:11:21,960 When you do that, it automatically reinvents everything. 207 00:11:21,960 --> 00:11:25,110 So even if you kind of mess things up in a big way, 208 00:11:25,110 --> 00:11:27,840 as you type, like I've got here 209 00:11:27,840 --> 00:11:32,010 and you've made all of the structure look very weird, 210 00:11:32,010 --> 00:11:33,540 if you save, 211 00:11:33,540 --> 00:11:38,280 Visual Studio Code will reinvent everything for you. 212 00:11:38,280 --> 00:11:40,980 So you don't have to necessarily indent things 213 00:11:40,980 --> 00:11:44,040 but in important you understand what the indentation means. 214 00:11:44,040 --> 00:11:46,620 So here you see a line right here 215 00:11:46,620 --> 00:11:51,620 and it links the opening ul to the matching closing ul tag. 216 00:11:52,020 --> 00:11:56,610 And then it has indented these two list items over, 217 00:11:56,610 --> 00:12:00,690 so that you can see these two items probably belong 218 00:12:00,690 --> 00:12:04,260 to this unordered list. 219 00:12:04,260 --> 00:12:09,240 And very often in HTML you'll have matching tags. 220 00:12:09,240 --> 00:12:12,810 If there's an open tag, there's probably a closing tag. 221 00:12:12,810 --> 00:12:15,900 And all of these things on screen such as these lines 222 00:12:15,900 --> 00:12:18,720 and the indentation is here to help you 223 00:12:18,720 --> 00:12:21,270 to understand how your code looks, 224 00:12:21,270 --> 00:12:24,120 so that if you actually have an error, such as for example, 225 00:12:24,120 --> 00:12:27,660 if you had forgotten to close this ol, 226 00:12:27,660 --> 00:12:31,050 and when you see your code doing weird things, 227 00:12:31,050 --> 00:12:33,750 like for example, in this case, why is my C 228 00:12:33,750 --> 00:12:37,080 in an ordered list when it should be at the top level 229 00:12:37,080 --> 00:12:41,130 with the other unordered list, what is going on here? 230 00:12:41,130 --> 00:12:44,820 Well, I can then follow these indentations. 231 00:12:44,820 --> 00:12:48,150 I can see that this ul obviously matches 232 00:12:48,150 --> 00:12:52,800 along this line down to this closing one. 233 00:12:52,800 --> 00:12:55,860 And then this next one is a list item. 234 00:12:55,860 --> 00:12:59,010 So these two are on one line, they're matched, 235 00:12:59,010 --> 00:13:04,010 and then this next list item is matched up with this one. 236 00:13:05,370 --> 00:13:07,650 But then wait a minute, what's going on here? 237 00:13:07,650 --> 00:13:12,650 Why is this ol matched to a list item? 238 00:13:13,680 --> 00:13:17,340 Or maybe there's something missing right here. 239 00:13:17,340 --> 00:13:21,720 Well, it is, of course, the missing closing tag. 240 00:13:21,720 --> 00:13:24,030 So this way I can start to figure out 241 00:13:24,030 --> 00:13:25,950 where my errors come from. 242 00:13:25,950 --> 00:13:28,770 So we're gonna do a lot more of this kind of error checking 243 00:13:28,770 --> 00:13:31,800 and mistake correction, which we call debugging, 244 00:13:31,800 --> 00:13:33,240 in future lessons. 245 00:13:33,240 --> 00:13:36,000 But this is just a taster in this lesson 246 00:13:36,000 --> 00:13:38,070 for how you can use some of the tools 247 00:13:38,070 --> 00:13:41,160 to help you make sure that your code is working 248 00:13:41,160 --> 00:13:43,020 and that you are writing the correct things. 249 00:13:43,020 --> 00:13:46,470 And when you do make a mistake, as we all do, 250 00:13:46,470 --> 00:13:49,470 you can use the nesting and indentation 251 00:13:49,470 --> 00:13:52,440 in order to diagnose what's wrong with your code 252 00:13:52,440 --> 00:13:54,213 and help you fix it. 253 00:13:55,290 --> 00:13:58,500 So that's all for nesting and indentation. 254 00:13:58,500 --> 00:14:02,880 In the next lesson, we're gonna learn about anchor elements 255 00:14:02,880 --> 00:14:05,340 and we're going to start creating hyperlinks 256 00:14:05,340 --> 00:14:06,450 in our webpages. 257 00:14:06,450 --> 00:14:08,280 So for all of that and more 258 00:14:08,280 --> 00:14:09,880 I'll see you on the next lesson.