0
1
00:00:00,400 --> 00:00:08,670
All right so in the last lesson we created the start of our beautiful personal web site and we're modelling 
1

2
00:00:08,670 --> 00:00:09,000
off
2

3
00:00:09,000 --> 00:00:11,220
Jon Kleinberg’s home page.
3

4
00:00:11,220 --> 00:00:19,140
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

5
00:00:19,140 --> 00:00:22,590
that we can list maybe the books and courses that we're teaching,
5

6
00:00:22,590 --> 00:00:27,230
in my case, or it could be your education background, which schools you attended, 
6

7
00:00:27,270 --> 00:00:31,460
what degrees you attained, what courses you've completed etc..
7

8
00:00:31,500 --> 00:00:33,110
So that's the next challenge.
8

9
00:00:33,210 --> 00:00:40,130
If you want you can pause the video here and try to work it out yourself using MDN and Google search.
9

10
00:00:40,290 --> 00:00:45,800
Alternatively you can follow along with me and we're going to go through the same process.
10

11
00:00:45,810 --> 00:00:51,030
So we're looking for a bullet list maybe.
11

12
00:00:51,180 --> 00:00:53,130
And it's going to be in HTML, 
12

13
00:00:53,130 --> 00:00:59,560
that’s the language we want to write it in, and I'm going to use MDN as my documentation source.
13

14
00:00:59,610 --> 00:01:07,140
So if you hit enter you can see that the first one that comes up is the ul element and that's exactly
14

15
00:01:07,470 --> 00:01:08,230
what we want.
15

16
00:01:08,460 --> 00:01:12,310
So ul stands for unordered list.
16

17
00:01:12,330 --> 00:01:21,570
So essentially a bullet point list. Now, ordered list would be something that has you know A B C or 1 2 3
17

18
00:01:21,960 --> 00:01:28,990
but in our case this is exactly what we want and can see that this is a simple example which will render
18

19
00:01:29,000 --> 00:01:37,440
like so where the ul tag encloses all the parts that will be included in the bullet list and the
19

20
00:01:37,550 --> 00:01:44,480
li tag or the list item tag encloses each and every bullet point.
20

21
00:01:45,090 --> 00:01:52,350
Alternatively you have a slightly more complex more nested unordered list and that looks more like this.
21

22
00:01:52,350 --> 00:01:55,740
So let's go ahead and add this to our code.
22

23
00:01:56,460 --> 00:02:02,810
So we've got this h3 that is the subtitle for the books and courses that we're teaching.
23

24
00:02:03,000 --> 00:02:12,540
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

25
00:02:12,540 --> 00:02:21,590
like The Complete iOS Development Bootcamp.
25

26
00:02:21,750 --> 00:02:24,800
And then I'll go ahead and add another one.
26

27
00:02:25,020 --> 00:02:26,430
The Complete ...
27

28
00:02:31,530 --> 00:02:35,130
and if we again hit save and check it out.
28

29
00:02:35,370 --> 00:02:41,430
You can see that they are there as an unordered list or as bullet points.
29

30
00:02:41,430 --> 00:02:42,690
All right cool.
30

31
00:02:42,750 --> 00:02:50,070
So the next thing I want to add is outside of the unordered list I'm going to add another h3 and this
31

32
00:02:50,070 --> 00:02:54,210
is going to have the subtitle of let's say My Hobbies 
32

33
00:02:57,270 --> 00:03:04,910
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

34
00:03:04,980 --> 00:03:13,710
So can you try and use MDN as well as search to figure out how to do that and then list your hobbies
34

35
00:03:13,860 --> 00:03:18,640
in that ordered list?
35

36
00:03:18,660 --> 00:03:20,600
All right so let's walk through it together.
36

37
00:03:20,670 --> 00:03:26,580
So if we have a look at unordered list if you scroll to the bottom there's usually a part where it says
37

38
00:03:26,590 --> 00:03:28,470
See also on MDN.
38

39
00:03:28,470 --> 00:03:35,920
And this tells you these related HTML elements which are list items and the ordered list,
39

40
00:03:36,000 --> 00:03:41,400
the ol, so let's click on that and we can see how this works.
40

41
00:03:41,400 --> 00:03:46,320
This is a simple example of an ordered list and you've got the first second and third item and list
41

42
00:03:46,320 --> 00:03:47,010
items.
42

43
00:03:47,010 --> 00:03:51,170
So the format is exactly the same as the unordered or the bullet list,
43

44
00:03:51,240 --> 00:03:54,550
apart from the fact this time replacing ul with ol.
44

45
00:03:54,570 --> 00:03:57,200
And similarly you can nest these lists.
45

46
00:03:57,330 --> 00:04:02,940
You can nest an ordered list inside an unordered list and also vice versa.
46

47
00:04:03,510 --> 00:04:07,430
And there's a whole bunch of modifications that you can have with your ordered list.
47

48
00:04:07,430 --> 00:04:11,670
For example using Roman numerals instead of using numbers.
48

49
00:04:11,850 --> 00:04:15,290
And let's go ahead and put it into practice on our web site.
49

50
00:04:15,360 --> 00:04:22,800
So I'm going to list a whole bunch of hobbies under a ordered list and the first list item is going
50

51
00:04:22,800 --> 00:04:38,840
to be say beer brewing and the next one will be martial arts and the last one can be motorcycles. There we
51

52
00:04:38,840 --> 00:04:39,150
go.
52

53
00:04:39,170 --> 00:04:39,570
Cool.
53

54
00:04:39,620 --> 00:04:45,840
So those are my hobbies and they’re included under an ordered list inside list items.
54

55
00:04:45,890 --> 00:04:52,940
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

56
00:04:52,940 --> 00:04:55,220
list inside our home page.
56

57
00:04:55,220 --> 00:04:55,790
All right cool.
57

58
00:04:55,790 --> 00:04:58,580
So this lesson was all about HTML lists.
58

59
00:04:58,640 --> 00:05:03,950
If you're interested you can have a look at some of these other types of lists such as the the ordered lists 
59

60
00:05:04,090 --> 00:05:10,580
which start at a particular number or the lists that use roman numerals and you can mess around with
60

61
00:05:10,580 --> 00:05:14,360
that code inside your playbook or inside your web site.
61

62
00:05:14,510 --> 00:05:18,710
In the next lesson we're going to be covering the image element and we're going to be brightening up
62

63
00:05:18,710 --> 00:05:21,070
our web site with some pictures.
63

64
00:05:21,080 --> 00:05:24,230
So for all of that and more I'll see you on the next lesson.