All language subtitles for 016 HTML Lists.en_US

All right.

So in the last lesson we created the start of our beautiful,

personal and website and we're modeling off Jon Kleinberg's homepage.

So the next step that we want to achieve is this.

How do we put in a bullet list into our website so that we can list maybe the

books and courses that we're teaching in my case,

or it could be your education background, which schools you attended,

what degrees you attained, what courses you've completed, et cetera?

So that's the next challenge. If you want,

you can pause the video here and try to work it out yourself,

using MDN and Google search. Alternatively,

you can follow along with me and we're going to go through the same process.

So we're looking for a bullet list maybe.

Um, and it's going to be in HTML. That's the language we want to write it in.

And I'm going to use MDN as my documentation source.

So if you hit enter,

you can see that the first one that comes up is the ul element

and that's exactly what we want.

UL stands for unordered list,

so essentially a bullet point list. Now ordered list would be something that has,

you know, a, b, c, or 1, 2, 3. But in our case,

this is exactly what we want. And you can see that this is a simple example

which will render like so where the ul tag encloses

all the parts that will be included in the bullet list and the li tag or the

list item tag encloses each

and every bullet point. Alternatively,

you have a slightly more complex, more nested unordered list.

And that looks more like this.

So let's go ahead and add this to our code.

So we've got this h3 that is the subtitle for the books and courses that

we're teaching.

So I'm going to go ahead and add a new ul, unordered list, and a new list item.

And I'll add something like The complete iOS App development

Bootcamp.

And then I'll go ahead and add another one, The complete--

And if we again hit save and check it out,

you can see that they are there as an unordered list or as bullet points.

All right, cool.

So the next thing that I want to add is outside of the unordered list.

I'm going to add another h3

and this is going to have the subtitle of, let's say, my hobbies.

And here, I want to have an ordered list that's 1, 2,

3, and it's going to list some of my hobbies.

So can you try and use MDN as well as search to figure out how to do that and

then list your hobbies in that ordered list?

Right.

All right. So let's walk through it together.

If we have a look at an unordered list, if you scroll to the bottom,

there's usually a part where it says, see also on MDN.

And this tells you these related HTML elements

which are list items and the ordered list,

the ol. So let's click on that and we can see how this works.

This is a simple example of an ordered list, and you've got the first,

second and third item as list items.

So the format is exactly the same as the unordered or the bullet list,

apart from the fact that this time replacing ul with ol.

And similarly you can nest these lists.

You can nest a ordered list inside an unordered list and also vice versa.

And there's a whole bunch of modifications that you can have with your ordered

list. For example, using Roman numerals instead of using numbers.

And let's go ahead and put it into practice on our website.

So I'm going to list a whole bunch of hobbies under a ordered list.

And the first list item is going to be, let's say beer brewing,

and the next one will be martial arts,

yeah?

And the last one can be motorcycles.

There we go. Cool.

So those are my hobbies and they're included under an ordered list inside list

items. And if we go ahead and hit save, and then hit refresh,

you can see that we've got our ordered list and our unordered list inside our

homepage. All right, cool. So this lesson was all about HTML list.

If you are interested,

you can have a look at some of these other types of lists,

such as the ordered list

which starts at a particular number or the list that use Roman numerals.

And you can mess around with that code inside your playbook or inside your

website. In the next lesson, we're going to be covering the image element,

and we're going to be brightening up a website with some pictures.

So for all of that and more, I'll see you on the next lesson.