Now, in the previous lesson, we learned a little bit about ordered and unordered lists.
Now in this lesson, we're going to take that concept a little bit further.
I want to show you how you can nest things inside others.
For example, we saw that we could already nest the list elements inside an unordered list and you would
see it indented like this.
But, we can actually go a step further and we can actually nest a list inside another list.
So in this case, what you see is we've got the first unordered list that starts here, and this is
where it ends,
but we've also got another unordered list here.
And this is where the second one begins and where it ends.
When this is rendered in a website, this is what you'll see.
You'll see it's looking like this.
So you've got the first list that is this entire part.
And then inside the first list, we've got a separate list
under this particular bullet point.
Now, how does the code look?
Well, it looks quite simple.
All you have to do is inside a list item
you see how the starting list item is right here,
and the end list item is down here. Inside this list item
instead of simply just having a single line of text such as what we've got up here, instead, we've
actually embedded an entire unordered list.
So first we'll write the text for the list item, and then after the text we embed our unordered list,
just as you would see in any other normal list.
And then we end up with what's called a nested list.
This is the part where indentation of your code becomes super important, because imagine the code looked
like this and not like this.
When you look at this code at a glance, it's a lot harder to see that you've got a list embedded inside
another list,
right?
Because you have to actually read what each of these tags are instead of using the clues that's offered
by that indentation.
And as you can imagine, we can have even crazier nested lists like what I've got right here.
So there's actually three lists here.
One is up here.
This is the first list.
This is an unordered list.
And then we've got a second list right here, which is again, an unordered list.
And that's embedded under the list item for "B".
And then to complicate things, I've added a third ordered list that's listed under this second item
right here.
This amount of craziness starts to really highlight the issues that you're going to have reading this
code.
Imagine somebody else gave you this code and you had to figure out without looking at the right hand
side, what is going on right here.
It's a lot easier if we have it indented, right? Because we can clearly see one unordered list, the
second unordered list and the third ordered list because they're all nicely indented and is a lot easier
visually for when we're reading code.
So when you're writing code, you also are thinking about how other people are going to find reading
your code.
Now let's try an exercise to really drill this home.
I want you to download the "Nesting and Indentation zipped file," from this current lesson, and I want you
to open up inside VS Code as you have done previously.
Now, in this case, if we take a look at our goal is to create a super complex nested list.
In the last lesson you already saw how you can create simple list elements, whether it's unordered
lists or it's ordered lists,
it's pretty simple to create just a list with some list items.
But in this challenge, I want you to create something a lot more complicated.
Let me walk you through it.
So firstly, we've got an unordered list that has just three list items A, B and C, but under item
B, notice here we've got an ordered list.
This ordered list also has three items and under item B2, the second item, we've got yet another unordered
list.
And inside the first item we've nested another unordered list.
And inside the third item we've embedded another ordered list.
This is a little bit complicated and in order to really understand it, you need to take a look at this
part of the video because here I've got the code that will create this simpler structure.
And the important thing to notice is that whereas normally you would probably have a list item that
starts like this and then you would have it closed like this.
In the case when we're embedding a list, that closing tag does not go here, but instead it goes all
the way at the end of the nested list.
Once we're done nesting, this unordered list right here, then do we close that list item?
So this is a really important thing to take notice of.
And then I want you to just study this page a little bit to see how I created this list using this code
and then take this and apply it to the challenge in the coding exercise.
Have a good think about it.
Take some time to try and complete this challenge.
I for one, believe that you can do this if you just spend some time thinking and trying it.
And as always, remember you can use the preview feature to see how your code is turning out and shaping
up while you're writing it.
And I think that will help you quite a lot.
Pause the video now and give that coding exercise a go.
All right.
So how did that go?
Now, if you didn't give that a go, I want you to stop the video now,
make sure that you've tried it.
You're not going to learn coding through just watching me code.
You're only going to learn programming by actually doing it.
Solving challenges, feeling stupid sometimes, feeling like you're not good enough,
but at the end, when you do get it, when you do succeed, it's going to feel amazing.
And I promise you it was the same for everybody who's gone through this journey.
So what I'm going to do is I'm going to run through the solution and I'm going to drag my goal up over
here so I can compare it to the preview as I go along.
So the first step is creating the first unordered list with three items: A, B and C. That should be pretty
easy to do.
And let's go ahead and create that.
All right, so now we've got the top of our nest, which is our A, B and C.
If we take a look at our goal, compare it,
we've got A, B, C. Inside the bullet
B, we're going to embed right here, an ordered list.
So it's again going to have three items B1, B2 and B3,
and we know it's an ordered list because it starts off with the numbers 1, 2, and 3.
Let's go ahead and embed that inside this second B list item.
Remember what I said? When you embed a list in another one, you find the list item you want to embed
it in,
and after the content of the list item, which is of course, this B right here, then we go ahead and
hit Enter and that is where we create our list.
We're going to create an ordered list in this case and it's going to have three items.
The first one is going to be B1 and then B2 and B3.
Now let's again compare and contrast.
We've got our B1, B2, B3, but take a look inside this B2 item.
Again, we're going to nest another list and here we've got an unordered list B2a B2b and B2c.
Let's go ahead and do that.
Right here inside the B2 list item, we're going to create our unordered list, our ul, and we're going
to have B2a B2b and B2c.
Let's compare.
We've got B2b, B2b, B2c, so we've already got most of the parts done.
The final nest in this big long chain is under B2a, we need to add an unordered list, B2aa and
B2ab.
Now, the way that I've named each of these hopefully should help you with the nesting,
i f it doesn't, then you just have to compare against the goal and try matching it visually.
In this case instead of under the second item, it's actually nested under the first item.
And again, it's an unordered list with just two list items B2aa and B2ab.
Now we've got pretty much all of this part sorted,
all we need to do now is just to add the final ordered list embed under the B3 list item.
Let's find our B3 list item.
After the text, let's hit Enter to create a new line and then we're going to create an ordered list
like this and we're going to add our two list items B31 and B32.
So now if we compare our goal and what we've got in the Preview, you should see it's completely identical,
and through this process, hopefully you've learned a little bit more about nesting.
And one of the nice things about Visual Studio Code is that it will automatically indent things as you
write your code.
It knows, for example, list items, go inside a list.
So whether if it's a ul or an ol, when you go to File and Save, or use the shortcut command here, in
my case on a mac, it's command+S.
If you're on a windows, it's probably Ctrl+S.
When you do that, it automatically re-indents everything.
So even if you kind of mess things up in a big way as you type like I've got here and you've made all
of the structure look very weird,
if you save Visual Studio Code will re-indent everything for you. So you don't have to necessarily indent
things, but it's important you understand what the indentation means.
So here you see a line right here and it links the opening ul to the matching closing ul tag, and then
it has indented these two list items over so that you can see these two items probably belong to this
unordered list.
And very often in HTML you will have matching tags.
If there's an open tag, there's probably a closing tag and all of these things on screen such as these
lines
and the indentation, is here to help you to understand how your code looks so that if you actually have
an error, such as, for example, if you had forgotten to close this ol and when you see your code
doing weird things like for example, in this case, why is my C in an ordered list when it should be
at the top level with the other unordered list?
What is going on here?
Well, I can then follow these indentations.
I can see that this ul obviously matches along this line down to this closing one.
And then this next one is a list item.
So these two are on one line, they're matched and then this next list item is matched up with this
one.
But then wait a minute, what's going on here?
Why is this ol matched to a list item?
Or maybe there's something missing right here?
Well, it is, of course, the missing closing tag.
So this way I can start to figure out where my errors come from.
So we're going to do a lot more of this kind of error checking and mistake correction, which we call
debugging, in future lessons.
But this is just a taster in this lesson for how you can use some of the tools to help you make sure
that your code is working and that you're writing the correct things.
And when you do make a mistake, as we all do, you can use the nesting and indentation in order to diagnose
what's wrong with your code and help you fix it.
So that's all for nesting and indentation.
In the next lesson, we're going to learn about Anchor Elements and we're going to start creating Hyperlinks
in our web pages.
So for all of that and more, I'll see you on the next lesson.