Angela: Hey, guys, in the previous lesson,
you've learned a lot about different types of HTML elements,
and you already got started using them to create websites.
Now, in this section,
we're gonna take it a little bit further
and explore some more intermediate
and advanced concepts in HTML.
We're gonna get started in this lesson
by learning about list elements,
the ordered and unordered lists.
Now, if you've spent any time around
on the internet recently,
you'll notice that it's completely full of lists.
If you go onto Buzzfeed
or any of these sort of clickbaity articles,
usually they'll create a list of something,
such as great items
that must have been invented by geniuses.
But also if you look at something
like the FBI's 10 most wanted fugitives,
this is already created in this website using a list.
So how do we create these lists ourselves?
Well, let's start off with one of the most common types,
the unordered list.
And it's super simple to create.
Simply you have a starting tag with ul
and then have a closing tag.
Now, normally we've had one-line elements such as this
where we get to add some content
in between the open and closing tags.
Now, in this case, however, it's a little bit different.
They actually go on separate lines
because in between these two open and closing tags,
we need an extra type of tag
in order to complete this unordered list.
And these are called list items.
So here you can see we've got three list items,
and each of them contain some piece of content.
But all three items are enclosed inside this unordered list.
So for any list to work and display content,
then you're gonna have to add list items into it.
So what does this look like if we actually run the code?
Well, this is what you would see.
Essentially, unordered list items
will create these bullet points,
because such as in the case of a shopping list here,
the order of the items doesn't matter.
So that's why an unordered list
would be perfect for the situation.
However, on the other hand,
if you needed your list items to be arranged
in a particular order,
then you would create an ordered list.
And once you've added the list items inside there,
what this will do is it will give you numbers.
So it would start from one,
and the number next to each list item will depend
on the order that you put
into this ordered list element.
If this milk was down here,
then it would get the number three, and so on and so forth.
That's all pretty simple.
So if we compare the ordered list, the ol element,
that gives us numbers,
and versus the ul, the unordered list item,
which just gives us bullet points.
Simple as that.
And coming back to our FBI 10 most wanted fugitives website,
you can see they actually created this website using lists.
So when you right-click on any of these images
and select Inspect,
you can see that each of these photos
are actually a list item placed inside an unordered list.
Now, there's a whole bunch more to this website,
which we're gonna learn in future lessons.
But the really important thing is for you to see
that this is a really important part
that you see in websites all over on the internet,
so it's really important that we understand how to use them.
So now that we've learned a little bit
about ordered and unordered lists,
let's try an exercise to make sure
that you've understood everything.
Go ahead and download the List Elements ZIP file
from this current lesson.
And as always, if you forget how to do that
or if you just started on this lesson,
then I recommend going to one of the earlier lessons
where I show you how to download course resources.
Now, once you've downloaded
and extracted the folder 3.0 List Elements
and dragged it into VS Code
or your web development project folder,
then you should be able to see it here
on the File Explorer on the left.
If we explore some of the files
for this current coding exercise,
you can see we've got an index.html
that contains some plain text
which you're going to be formatting into lists.
And if we take a look at the goal,
feel free to choose whichever heading sizes you want,
but for me, I think it made the most sense to have one h1,
and then the ingredients and the instructions as h2s,
and then any other headings,
like this part and this part, as h3s.
But the most important thing I care about
in this exercise is you manage to create these lists.
So we've got an unordered list
for the section one of the ingredients to create the dough,
and then we've got another unordered list
for the filling ingredients.
And finally, we've got all the rest
of the instructions as a ordered list.
Think about how you're going to create this,
and don't worry about typing all the text out,
because if you look inside the index.html,
you'll see all the text typed out for you already.
All you need to do is to add the HTML tags
and to format the document into an HTML website.
And in the end, we should end up with this recipe website
for creating delicious cinnamon rolls.
Now, if you watched my recent Instagram takeover
of the Udemy account,
you'll see me making the same cinnamon rolls.
And if you want to do the same,
then this is the recipe for you.
This is what you're aiming for,
and using what you've learned about list elements,
I want you to go ahead and pause the video
and complete this challenge.
All right, so did you manage to do that?
Let's go ahead and walk through the solution together.
So I'm gonna show the previous on the right side
so you can see the website update as I type.
First, we're gonna start off with our heading tags.
So I'm just gonna add a bunch of headings in quite quickly.
All right, so that's all the headings out of the way.
So now we're onto the proper work,
which is creating our list.
As I said, the ingredients don't really need an order,
so we're gonna create an unordered list.
So in between our start and end ul tags,
we're going to have each of these as a list item.
So I'm gonna create the list item tag.
And once I've created that,
then all I need to do is to drag my first list item
in between the list item.
Now, if clicking and dragging doesn't work for you,
if this doesn't show up,
then you can also just right-click, copy, and paste.
That also works.
Now, I need to do this many times, so for efficiency's sake,
I'm just going to paste in another four or five of these
and drag in all of the other ingredients
into each of these list items.
Now, when you're actually coding this from scratch,
you won't need to do all of this dragging
because you'll be typing your list item,
and then you'll be writing your item name in here like so.
But because we've written all the text for you,
hopefully to save you some time
so that you're actually doing more coding
and less sort of busywork, then this is how we do it.
Again, for the filling, we've got another unordered list,
and then inside there are three list items.
So let me go ahead and paste those three list items in
and drag each of them in between the tags like so.
So now we've got our ingredients,
and we've got our two unordered lists showing up perfectly.
Now all we have to do is to create the final list,
which is going to be an ordered list,
because if you think about it,
instructions have an order, right?
You can't first bake the thing
if you haven't created it yet.
Inside this ordered list,
we again need these list item elements,
and we need to create as many of them as we have steps.
So I'm gonna drag each of the lines into the list elements.
And there we have it, we've got all of our list items
and all of our instructions showing up perfectly
inside an ordered list.
And if we check against the goal,
then you can see we've pretty much
completed everything perfectly.
Now, one thing to talk about at this point is notice
how some HTML elements are one line
and other HTML elements are on multiple lines.
When you paste long lines of text
in between the start and end tags of an element,
sometimes VS Code will automatically put the closing tag
onto the next line.
Now, you can edit this
so that it all goes onto the same line,
or you can purposely make sure they're on different lines,
and you see it being sandwiched
between the open and closing tags.
Now, this is a personal preference,
so it really doesn't matter how you want to do this,
so you can do this however you like.
But for me, I like to have list items all on the same line.
This just kind of helps me see visually
how many list items I have,
and it doesn't clutter up the list
with all of these list items.
So have a think about whether
if you like to see your elements like this,
all on one line with the content enclosed,
or if you prefer to have it like this
where things are more indented,
and you have the content in between two lines
of your list item.
In the next lesson, we're gonna talk a little bit more
about this type of indentation,
so don't worry if that doesn't make sense just yet.
We're gonna talk about nesting,
and we're gonna talk about indentation of HTML elements.
So once you're ready, head over to the next lesson,
and we'll continue from there.