Hey guys. 1
In the previous lesson, you've learned a lot about different types of HTML elements and you already 2
got started using them to create websites. 3
Now in this section, we're going to take it a little bit further and explore some more intermediate and 4
advanced concepts in HTML. 5
We're going to get started in this lesson by learning about list elements, the ordered and unordered 6
lists. 7
Now, if you've spent any time around on the Internet recently, you'll notice that it's completely 8
full of lists. 9
If you go on to BuzzFeed or any of these sort of clickbaity articles, usually they'll create a list 10
of something such as great items that must have been invented by geniuses. 11
But also if you look at something like the, "FBI's ten Most Wanted Fugitives," this is also created in 12
this website using a list. 13
So how do we create these lists ourselves? 14
Well, let's start off with one of the most common types, the unordered list. 15
And it's super simple to create simply, you have a starting tag with ul (<ul>)and then have a closing tag (</ul>). 16
Now, normally we've had one line elements such as this where we get to add some content in between 17
the opening and closing tags. 18
Now in this case, however, it's a little bit different, 19
they actually go on separate lines because in between these two opening and closing tags, we need an extra 20
type of tag in order to complete this unordered list. 21
And these are called list items (<li>). 22
So here you can see we've got three list items and each of them contain some piece of content. 23
But all three items are enclosed inside this unordered list. 24
So for any list to work and display content, then you're going to have to add list items into it. 25
So what does this look like if we actually run the code? 26
Well, this is what you would see. 27
Essentially unordered list items will create these bullet points, because such as in the case of a shopping 28
list here, the order of the items doesn't matter. 29
So that's why an unordered list would be perfect for this situation. 30
However, on the other hand, if you needed your list items to be arranged in a particular order, then 31
you would create an ordered list (<ol>). 32
And once you've added the list items inside there, what this will do is it will give you numbers. 33
So it would start from one and the number next to each list item will depend on the order that you put 34
into this ordered list element. 35
If this milk was down here, then it would get the number three and so on and so forth. 36
That's all pretty simple. 37
So if we compare the ordered list, the ol element that gives us numbers and versus the ul, the unordered 38
list item, which just gives us bullet points, simple as that. 39
And coming back to our "FBI ten Most Wanted Fugitives" website, you can see they actually created this 40
website using lists. 41
So when you right-click on any of these images and select Inspect, you can see that each of these photos 42
are actually a list item placed inside an unordered list. 43
Now there's a whole bunch more to this website which we're going to learn in future lessons, 44
but the really important thing is for you to see that this is a really important part that you see in 45
websites all over on the Internet. 46
So it's really important that we understand how to use them. 47
So now that we've learned a little bit about ordered and unordered lists, let's try an exercise to 48
make sure that you've understood everything. 49
Go ahead and download the List Elements zipped file from this current lesson. 50
And as always, if you forget how to do that, or if you just started on this lesson, then I recommend 51
going to one of the earlier lessons where I show you, "How to Download Course Resources." 52
Now, once you've downloaded and extracted the folder, 3.0 List Elements and dragged it into VS Code 53
or your web development projects folder, then you should be able to see it here on the file Explorer 54
on the left. 55
If we explore some of the files for this current coding exercise, you can see we've got an index.html 56
that contains some plain text which you're going to be formatting into lists. 57
And if we take a look at the goal, feel free to choose whichever heading sizes you want, 58
but for me, I think it made the most sense to have one h1 and then the ingredients and the instructions 59
as h2's and then any other headings like this part and this part as h3's. 60
But the most important thing I care about in this exercise, is you manage to create these lists. 61
So we've got an unordered list for the 62
Section 1 of the ingredients to create the dough. 63
And then we've got another unordered list for the filling ingredients. 64
And finally, we've got all the rest of the instructions as an ordered list. 65
Think about how you're going to create this and don't worry about typing all the text out because if 66
you look inside the index.html, you'll see all the text typed out for you already. 67
All you need to do is to add the HTML tags and to format the document into an HTML website. 68
And in the end we should end up with this recipe website for creating delicious cinnamon rolls. 69
Now, if you watched my recent Instagram takeover of the Udemy account, you'll see me making the same 70
cinnamon rolls 71
and if you want to do the same, then this is the recipe for you. 72
This is what you're aiming for and using what you've learnt about list elements. 73
I want you to go ahead and pause the video and complete this challenge. 74
All right. 75
So did you manage to do that? 76
Let's go ahead and walk through the solution together. 77
So I'm going to show you the preview on the right side so you can see the website update as I type. 78
First, we're going to start off with our heading tags. 79
So I'm just going to add a bunch of headings in quite quickly. 80
All right, so that's all the headings out of the way. 81
So now we're on to the proper work, which is creating our lists. 82
As I said, the ingredients don't really need an order, so we're going to create an unordered list. 83
So in between our start and end ul tags, we're going to have each of these as a list item. 84
So I'm going to create the list item tag. 85
And once I've created that, then all I need to do is to drag my first list item in between the list 86
item. 87
Now, if clicking and dragging doesn't work for you, if this doesn't show up, then you can also just 88
right click, copy and paste, that also works. 89
Now I need to do this many times, so for efficiency's sake, I'm just going to paste in another 4 or 90
5 of these and drag in all of the other ingredients into each of these list items. 91
Now, when you're actually coding this from scratch, you won't need to do all of this dragging because 92
you'll be typing your list item and then you'll be writing your item name in here like so. 93
But because we've written all the text for you, hopefully to save you some time so that you're actually 94
doing more coding and less sort of busy work, then this is how we do it. 95
Again For the filling, 96
we've got another unordered list and then inside there are three list items. 97
So let me go ahead and paste those three list items in and drag each of them in between the tags like 98
so. 99
So now we've got our ingredients and we've got our two unordered lists showing up perfectly. 100
Now all we have to do is to create the final list, which is going to be an ordered list, because if 101
you think about it, instructions have an order, right? 102
You can't first bake the thing if you haven't created it yet. 103
Inside this ordered list, we again need these list item elements and we need to create as many of them 104
as we have steps. 105
So I'm going to drag each of the lines into the list elements. 106
And there we have it. 107
We've got all of our list items and all of our instructions showing up perfectly inside an ordered list. 108
And if we check against the goal, then you can see we've pretty much completed everything perfectly. 109
Now, one thing to talk about at this point is notice how some HTML elements are one line and other 110
HTML elements are on multiple lines. 111
When you paste long lines of text in between the start and end tags of an element, sometimes VS Code 112
will automatically put the closing tag onto the next line. 113
Now, you can edit this so that it all goes onto the same line, or you can purposely make sure they're 114
on different lines and you see it being sandwiched between the open and closing tags. 115
Now this is a personal preference, so it really doesn't matter how you want to do this. So you can do 116
this however you like. 117
But for me, I like to have list items all on the same line. 118
This just kind of helps me see visually how many list items I have, and it doesn't clutter up the list 119
with all of these list items. 120
So have a think about whether, if you like to see your elements like this all on one line with the 121
content enclosed or if you prefer to have it like this where things are more indented and you have the 122
content in between two lines of your list item. 123
In the next lesson, we're going to talk a little bit more about this type of indentation. 124
So don't worry if that doesn't make sense just yet. 125
We're going to talk about nesting and we're going to talk about indentation of HTML elements. 126
So once you're ready, head over to the next lesson and we'll continue from there.