All right so in the last lesson we created the start of our beautiful personal web site and we're modelling 1
off 2
Jon Kleinberg’s home page. 3
So the next step that we want to achieve is this - how do we put in a bullet list into our web site so 4
that we can list maybe the books and courses that we're teaching, 5
in my case, or it could be your education background, which schools you attended, 6
what degrees you attained, what courses you've completed etc.. 7
So that's the next challenge. 8
If you want you can pause the video here and try to work it out yourself using MDN and Google search. 9
Alternatively you can follow along with me and we're going to go through the same process. 10
So we're looking for a bullet list maybe. 11
And it's going to be in HTML, 12
that’s the language we want to write it in, and I'm going to use MDN as my documentation source. 13
So if you hit enter you can see that the first one that comes up is the ul element and that's exactly 14
what we want. 15
So ul stands for unordered list. 16
So essentially a bullet point list. Now, ordered list would be something that has you know A B C or 1 2 3 17
but in our case this is exactly what we want and can see that this is a simple example which will render 18
like so where the ul tag encloses all the parts that will be included in the bullet list and the 19
li tag or the list item tag encloses each and every bullet point. 20
Alternatively you have a slightly more complex more nested unordered list and that looks more like this. 21
So let's go ahead and add this to our code. 22
So we've got this h3 that is the subtitle for the books and courses that we're teaching. 23
So I'm going to go ahead and add a new ul unordered list and a new list item and I'll add something 24
like The Complete iOS Development Bootcamp. 25
And then I'll go ahead and add another one. 26
The Complete ... 27
and if we again hit save and check it out. 28
You can see that they are there as an unordered list or as bullet points. 29
All right cool. 30
So the next thing I want to add is outside of the unordered list I'm going to add another h3 and this 31
is going to have the subtitle of let's say My Hobbies 32
and here I want to have an ordered list that's one two three and it's going to list some of my hobbies. 33
So can you try and use MDN as well as search to figure out how to do that and then list your hobbies 34
in that ordered list? 35
All right so let's walk through it together. 36
So if we have a look at unordered list if you scroll to the bottom there's usually a part where it says 37
See also on MDN. 38
And this tells you these related HTML elements which are list items and the ordered list, 39
the ol, so let's click on that and we can see how this works. 40
This is a simple example of an ordered list and you've got the first second and third item and list 41
items. 42
So the format is exactly the same as the unordered or the bullet list, 43
apart from the fact this time replacing ul with ol. 44
And similarly you can nest these lists. 45
You can nest an ordered list inside an unordered list and also vice versa. 46
And there's a whole bunch of modifications that you can have with your ordered list. 47
For example using Roman numerals instead of using numbers. 48
And let's go ahead and put it into practice on our web site. 49
So I'm going to list a whole bunch of hobbies under a ordered list and the first list item is going 50
to be say beer brewing and the next one will be martial arts and the last one can be motorcycles. There we 51
go. 52
Cool. 53
So those are my hobbies and they’re included under an ordered list inside list items. 54
And if we go ahead and save and then hit refresh you can see that we've got our ordered list and our unordered 55
list inside our home page. 56
All right cool. 57
So this lesson was all about HTML lists. 58
If you're interested you can have a look at some of these other types of lists such as the the ordered lists 59
which start at a particular number or the lists that use roman numerals and you can mess around with 60
that code inside your playbook or inside your web site. 61
In the next lesson we're going to be covering the image element and we're going to be brightening up 62
our web site with some pictures. 63
So for all of that and more I'll see you on the next lesson.