1 00:00:00,360 --> 00:00:00,810 All right. 2 00:00:00,810 --> 00:00:05,810 So in the last lesson we created the start of our beautiful, 3 00:00:06,150 --> 00:00:10,740 personal and website and we're modeling off Jon Kleinberg's homepage. 4 00:00:11,130 --> 00:00:14,220 So the next step that we want to achieve is this. 5 00:00:14,430 --> 00:00:19,430 How do we put in a bullet list into our website so that we can list maybe the 6 00:00:20,370 --> 00:00:23,220 books and courses that we're teaching in my case, 7 00:00:23,460 --> 00:00:27,060 or it could be your education background, which schools you attended, 8 00:00:27,180 --> 00:00:31,290 what degrees you attained, what courses you've completed, et cetera? 9 00:00:31,410 --> 00:00:33,750 So that's the next challenge. If you want, 10 00:00:33,780 --> 00:00:36,990 you can pause the video here and try to work it out yourself, 11 00:00:37,200 --> 00:00:41,010 using MDN and Google search. Alternatively, 12 00:00:41,010 --> 00:00:45,690 you can follow along with me and we're going to go through the same process. 13 00:00:45,720 --> 00:00:49,200 So we're looking for a bullet list maybe. 14 00:00:50,190 --> 00:00:54,750 Um, and it's going to be in HTML. That's the language we want to write it in. 15 00:00:55,170 --> 00:00:59,190 And I'm going to use MDN as my documentation source. 16 00:00:59,520 --> 00:01:00,720 So if you hit enter, 17 00:01:01,230 --> 00:01:05,520 you can see that the first one that comes up is the ul element 18 00:01:05,730 --> 00:01:07,950 and that's exactly what we want. 19 00:01:08,400 --> 00:01:11,670 UL stands for unordered list, 20 00:01:11,790 --> 00:01:16,790 so essentially a bullet point list. Now ordered list would be something that has, 21 00:01:17,790 --> 00:01:22,320 you know, a, b, c, or 1, 2, 3. But in our case, 22 00:01:22,380 --> 00:01:26,910 this is exactly what we want. And you can see that this is a simple example 23 00:01:27,090 --> 00:01:31,950 which will render like so where the ul tag encloses 24 00:01:31,980 --> 00:01:36,980 all the parts that will be included in the bullet list and the li tag or the 25 00:01:38,310 --> 00:01:41,460 list item tag encloses each 26 00:01:41,520 --> 00:01:45,450 and every bullet point. Alternatively, 27 00:01:45,450 --> 00:01:49,080 you have a slightly more complex, more nested unordered list. 28 00:01:49,470 --> 00:01:51,570 And that looks more like this. 29 00:01:51,720 --> 00:01:54,660 So let's go ahead and add this to our code. 30 00:01:55,830 --> 00:02:00,830 So we've got this h3 that is the subtitle for the books and courses that 31 00:02:01,440 --> 00:02:02,273 we're teaching. 32 00:02:02,370 --> 00:02:07,370 So I'm going to go ahead and add a new ul, unordered list, and a new list item. 33 00:02:10,950 --> 00:02:15,950 And I'll add something like The complete iOS App development 34 00:02:18,170 --> 00:02:19,003 Bootcamp. 35 00:02:21,080 --> 00:02:25,820 And then I'll go ahead and add another one, The complete-- 36 00:02:30,890 --> 00:02:34,070 And if we again hit save and check it out, 37 00:02:34,730 --> 00:02:39,730 you can see that they are there as an unordered list or as bullet points. 38 00:02:40,790 --> 00:02:41,623 All right, cool. 39 00:02:42,050 --> 00:02:46,550 So the next thing that I want to add is outside of the unordered list. 40 00:02:46,850 --> 00:02:48,800 I'm going to add another h3 41 00:02:48,920 --> 00:02:53,540 and this is going to have the subtitle of, let's say, my hobbies. 42 00:02:55,760 --> 00:03:00,460 And here, I want to have an ordered list that's 1, 2, 43 00:03:00,490 --> 00:03:03,970 3, and it's going to list some of my hobbies. 44 00:03:04,270 --> 00:03:09,270 So can you try and use MDN as well as search to figure out how to do that and 45 00:03:11,200 --> 00:03:14,470 then list your hobbies in that ordered list? 46 00:03:17,700 --> 00:03:17,940 Right. 47 00:03:17,940 --> 00:03:19,530 All right. So let's walk through it together. 48 00:03:20,010 --> 00:03:23,550 If we have a look at an unordered list, if you scroll to the bottom, 49 00:03:23,910 --> 00:03:27,120 there's usually a part where it says, see also on MDN. 50 00:03:27,240 --> 00:03:30,600 And this tells you these related HTML elements 51 00:03:30,900 --> 00:03:34,490 which are list items and the ordered list, 52 00:03:34,500 --> 00:03:39,500 the ol. So let's click on that and we can see how this works. 53 00:03:40,140 --> 00:03:43,530 This is a simple example of an ordered list, and you've got the first, 54 00:03:43,530 --> 00:03:45,510 second and third item as list items. 55 00:03:45,720 --> 00:03:49,710 So the format is exactly the same as the unordered or the bullet list, 56 00:03:50,010 --> 00:03:53,250 apart from the fact that this time replacing ul with ol. 57 00:03:53,310 --> 00:03:55,800 And similarly you can nest these lists. 58 00:03:56,040 --> 00:04:01,040 You can nest a ordered list inside an unordered list and also vice versa. 59 00:04:02,220 --> 00:04:05,850 And there's a whole bunch of modifications that you can have with your ordered 60 00:04:05,850 --> 00:04:10,290 list. For example, using Roman numerals instead of using numbers. 61 00:04:10,590 --> 00:04:13,650 And let's go ahead and put it into practice on our website. 62 00:04:14,100 --> 00:04:18,960 So I'm going to list a whole bunch of hobbies under a ordered list. 63 00:04:19,440 --> 00:04:23,760 And the first list item is going to be, let's say beer brewing, 64 00:04:25,380 --> 00:04:29,070 and the next one will be martial arts, 65 00:04:29,130 --> 00:04:29,963 yeah? 66 00:04:31,440 --> 00:04:36,180 And the last one can be motorcycles. 67 00:04:37,380 --> 00:04:38,250 There we go. Cool. 68 00:04:38,340 --> 00:04:43,340 So those are my hobbies and they're included under an ordered list inside list 69 00:04:43,950 --> 00:04:48,270 items. And if we go ahead and hit save, and then hit refresh, 70 00:04:48,600 --> 00:04:53,100 you can see that we've got our ordered list and our unordered list inside our 71 00:04:53,100 --> 00:04:57,690 homepage. All right, cool. So this lesson was all about HTML list. 72 00:04:57,840 --> 00:04:58,980 If you are interested, 73 00:04:59,040 --> 00:05:02,010 you can have a look at some of these other types of lists, 74 00:05:02,190 --> 00:05:03,330 such as the ordered list 75 00:05:03,330 --> 00:05:08,250 which starts at a particular number or the list that use Roman numerals. 76 00:05:08,550 --> 00:05:13,050 And you can mess around with that code inside your playbook or inside your 77 00:05:13,050 --> 00:05:16,560 website. In the next lesson, we're going to be covering the image element, 78 00:05:16,680 --> 00:05:20,010 and we're going to be brightening up a website with some pictures. 79 00:05:20,250 --> 00:05:23,280 So for all of that and more, I'll see you on the next lesson.