Instructor: Now, in the previous lesson
we learned a little bit about ordered and unordered lists.
Now in this lesson,
we're gonna take that concept a little bit further.
I wanna 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 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 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 a 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 gonna 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 it's a lot easier visually for when we are 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 and exercise to really drill this home.
I want you to download the Nesting and Indentation zip 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,
it's 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 a unordered list
that has just three list items, A, B, and C.
But under item B, notice here we've got a 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 are 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 gonna learn coding through just watching me code.
You're only gonna 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 gonna feel amazing.
And I promise you it was the same for everybody
who's gone through this journey.
So what I'm gonna do is I'm gonna 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.
Alright, 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,
a ordered list.
So it's again gonna have three items, B1, B2, and B3.
And we know it's an ordered list,
because it starts off with the numbers one, two, and three.
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 a 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 B2a, 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 a unordered list, B2aa, and B2ab.
Now the way that I've named each of these
hopefully should help you with the nesting.
If 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 enbed 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 gonna 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 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 Windows, it's probably Ctrl S.
When you do that, it automatically reinvents 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 reinvent everything for you.
So you don't have to necessarily indent things
but in 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'll 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 gonna 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 are 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 gonna learn about anchor elements
and we're going to start creating hyperlinks
in our webpages.
So for all of that and more
I'll see you on the next lesson.