Welcome back, everyone, to this lecture where we're going to be discussing lists.
So a common form factor you've probably seen on a Web page is a list and each the mill has two main
types of lists.
That's an ordered list, which is set with the hotel opening and closing tax, and that is eight numbered
lists where you could see one, two, three four, etc., which is nice to get a tracking position of
items in the list.
There is an unordered list as well, which uses the usual tags, and those use bullet points instead.
They list items themselves are actually denoted the same way if you're using an unordered list or an
ordered list.
It's just an L.I tag for a list item.
Let's go ahead and check it out and our code editor.
And we're also going to explore how to preview the browser inside the editor so you can really quickly
work and iterate with your HTML code right in Visual Studio Code.
Let's get started.
OK, here I am inside a visual studio code to have the same example each HTML document we were working
with earlier.
Now you may have noticed a little item here on the top right, which is a split editor.
So if you just click on that without installing any extra extensions, then it's actually going to allow
you to kind of split your screen here.
And then you can actually open other files.
So for example, if I created a new file and call this, let's say to the HTML, I could have two that
HTML open here and then example that.
So this will be really useful if you end up working off multiple files and you want to see him and see
how they interact with each other.
We'll be using this when we learn about CSS as well.
But the other thing I wanted to point out is there's actually extensions you can install inside of Visual
Studio code.
And one of them allows you to add an extra button there to actually have a little browser being rendered.
I should point out at the time of filming, this is an experimental extension from Microsoft.
However, it should actually be OK to use.
So go ahead and click here or control Shift X if you're on windows to click extensions and then there's
a little marketplace you can search for.
I have all the Python and Jupyter extensions.
There's also recommended extensions as well.
The one we're looking for at the time of this filming is called Live Preview, so it's officially from
Microsoft, same people that created Visual Studio code, and it basically hosts a little local server
in your workspace to preview your web pages on.
It's super useful.
So I would recommend you go ahead and install it, and I'm then going to go back to Explorer and collapse
this a little further.
And what's really cool is once you have an HTML file here or really any major web file that can be rendered
in the browser, you'll notice there's now a little extra button and now this button says Live Preview
Show Preview.
So if you hit that, it's going to render the example the HTML in this little live preview.
And that means I can add a paragraph tag here and say This is a paragraph and you can see it basically
being updated live for us.
OK.
So super cool feature really helps out your development time.
I'm going to zoom in just a little more.
And I'm also going to collapse the explorer there.
OK, so I'm going to zoom in probably as much as I can really zoom in without distorting things too
much.
I may zoom out just a little bit.
But what I'm going to do is I'm going to write a unordered list and then an ordered list.
Now also talk about a nested list.
So how to create an unordered list?
We start off by saying you well.
And anything in between this is going to end up starting to get tagged as being part of that unordered
list.
So usually you're going to give yourself a little spacing between the start and the end tax of the unordered
list.
And then if you want a list item, you simply say, Well, I.
He enter.
And you notice it already creates a bullet point.
Remember, this is an unordered list, so I can say this is item one.
And if I want another list item, I simply say another ally tax and they'll say, this is item two.
And let's say I want another item.
I keep putting these items, and as long as they're inside this unordered list, then they'll be part
of this.
So then all I'm going to say, I know I'm.
Three Whoops.
There we go.
OK.
So you can see how this begins to build out a list.
The other thing I should point out again is H.M. technically doesn't really care about spacing or alignment.
If I really wanted to, I could have put all of this on a single line.
And you can see that it doesn't actually break any of the code.
So unlike Python, which we'll learn about later, it's not really sensitive to your spacing.
However, you should try to stay organized.
Often, people like to have the list items a little further indented, or at least on different lines
than your unordered kind of list tags here.
OK, so this is nicely organized and readable, and that's unordered list.
We're going to have bullet points.
Later on, we'll discover, of course, we can actually change these two like triangles or squares or
whatever we want them to be.
But the other thing to note is that there's the ability to have an ordered list.
So how do we do that?
Well, let me delete the opening you l and the closing you l.
That way you can discover that by default, if you just put in list items, it's going to try its best
to reach.
Timo will try its best to just put them with bullet points, and they're part of some unordered list.
But you notice it's no longer indented and it's not super clear what kind of list or part of.
But if I say, oh well, then that's going to create an ordered list.
And now let's actually start changing the order of where these tags and them going.
So I'm going to put item one inside my ordered list.
And notice how it actually has a number.
And let's actually grab these two list items.
Cut them out here.
And paste them.
OK.
So pretty cool.
Now I get to see the numbering one to three that comes with an ordered list.
The other thing to note is you can actually start to Nest List themselves.
So for, let's say, the second item in this list, I actually start in unordered list.
So inside this unordered list, I create another list item and I say inside.
List and notice that it's actually aware that it's inside another list, because now that bullet point
is not filled in.
OK, so is it super typical to have many lists nested inside each other?
Obviously not.
It just depends on the situation.
Certainly not typical to have something like this where you have just one random inside list, but I
hope you get the idea that you can actually nest these lists.
So you can imagine if you're creating a note taking up, this would actually be really useful.
So let's do one last practice and pretend we're kind of creating or developing some note taking application.
So what would this look like?
Maybe I want an unordered list and I want to take list items for my topics so I can say topic one.
Ally topic to.
And then I topic three.
OK, so maybe I want some details on some of these.
What could I do?
I could make yet another unordered list.
Inside of this and start with some details on topic one, and maybe I add another list item here.
And I say details further or whatever I want it to say, but hopefully you get the idea again.
This is where writing clean code and spacing things out, maybe even using Tab two and then stuff just
to make it clear that way.
The HTML itself is kind of reflective of what's going to be displayed.
Notice how this itself is actually much easier to read off the indentation because it's more reflective
of what's going to show up on the web page typically are each HTML is going to be rendered by jingo,
so we won't have to worry too much about having to organize things in such a fashion.
But it's just something to keep in mind that readable code is really going to help you out in the future.
OK, so that's it for this.
Again, you have an unordered list in order list, you can have nested lists and then the items on that
list are L.I tags.
That's it.
I'll see you at the next lecture.