1
00:00:05,220 --> 00:00:08,550
Welcome back, everyone, to this lecture where we're going to be discussing lists.

2
00:00:09,940 --> 00:00:14,620
So a common form factor you've probably seen on a Web page is a list and each the mill has two main

3
00:00:14,620 --> 00:00:15,460
types of lists.

4
00:00:15,530 --> 00:00:21,220
That's an ordered list, which is set with the hotel opening and closing tax, and that is eight numbered

5
00:00:21,220 --> 00:00:26,470
lists where you could see one, two, three four, etc., which is nice to get a tracking position of

6
00:00:26,470 --> 00:00:27,400
items in the list.

7
00:00:27,760 --> 00:00:33,700
There is an unordered list as well, which uses the usual tags, and those use bullet points instead.

8
00:00:35,280 --> 00:00:40,260
They list items themselves are actually denoted the same way if you're using an unordered list or an

9
00:00:40,260 --> 00:00:40,890
ordered list.

10
00:00:40,920 --> 00:00:43,470
It's just an L.I tag for a list item.

11
00:00:43,950 --> 00:00:45,940
Let's go ahead and check it out and our code editor.

12
00:00:45,960 --> 00:00:51,180
And we're also going to explore how to preview the browser inside the editor so you can really quickly

13
00:00:51,180 --> 00:00:54,900
work and iterate with your HTML code right in Visual Studio Code.

14
00:00:55,410 --> 00:00:56,070
Let's get started.

15
00:00:56,970 --> 00:01:02,220
OK, here I am inside a visual studio code to have the same example each HTML document we were working

16
00:01:02,220 --> 00:01:03,030
with earlier.

17
00:01:03,450 --> 00:01:07,960
Now you may have noticed a little item here on the top right, which is a split editor.

18
00:01:08,040 --> 00:01:13,080
So if you just click on that without installing any extra extensions, then it's actually going to allow

19
00:01:13,080 --> 00:01:14,740
you to kind of split your screen here.

20
00:01:14,940 --> 00:01:16,740
And then you can actually open other files.

21
00:01:16,740 --> 00:01:23,880
So for example, if I created a new file and call this, let's say to the HTML, I could have two that

22
00:01:24,030 --> 00:01:25,680
HTML open here and then example that.

23
00:01:26,190 --> 00:01:30,600
So this will be really useful if you end up working off multiple files and you want to see him and see

24
00:01:30,600 --> 00:01:31,670
how they interact with each other.

25
00:01:31,680 --> 00:01:33,810
We'll be using this when we learn about CSS as well.

26
00:01:34,230 --> 00:01:38,910
But the other thing I wanted to point out is there's actually extensions you can install inside of Visual

27
00:01:38,910 --> 00:01:39,600
Studio code.

28
00:01:40,020 --> 00:01:45,900
And one of them allows you to add an extra button there to actually have a little browser being rendered.

29
00:01:46,080 --> 00:01:51,420
I should point out at the time of filming, this is an experimental extension from Microsoft.

30
00:01:51,750 --> 00:01:54,600
However, it should actually be OK to use.

31
00:01:54,810 --> 00:02:01,410
So go ahead and click here or control Shift X if you're on windows to click extensions and then there's

32
00:02:01,410 --> 00:02:03,330
a little marketplace you can search for.

33
00:02:03,450 --> 00:02:05,460
I have all the Python and Jupyter extensions.

34
00:02:05,790 --> 00:02:07,890
There's also recommended extensions as well.

35
00:02:08,729 --> 00:02:15,540
The one we're looking for at the time of this filming is called Live Preview, so it's officially from

36
00:02:15,540 --> 00:02:20,340
Microsoft, same people that created Visual Studio code, and it basically hosts a little local server

37
00:02:20,340 --> 00:02:22,550
in your workspace to preview your web pages on.

38
00:02:22,560 --> 00:02:23,550
It's super useful.

39
00:02:23,820 --> 00:02:30,090
So I would recommend you go ahead and install it, and I'm then going to go back to Explorer and collapse

40
00:02:30,100 --> 00:02:31,230
this a little further.

41
00:02:31,830 --> 00:02:39,210
And what's really cool is once you have an HTML file here or really any major web file that can be rendered

42
00:02:39,210 --> 00:02:44,370
in the browser, you'll notice there's now a little extra button and now this button says Live Preview

43
00:02:44,370 --> 00:02:45,180
Show Preview.

44
00:02:45,510 --> 00:02:51,960
So if you hit that, it's going to render the example the HTML in this little live preview.

45
00:02:52,320 --> 00:02:59,640
And that means I can add a paragraph tag here and say This is a paragraph and you can see it basically

46
00:02:59,640 --> 00:03:01,650
being updated live for us.

47
00:03:02,040 --> 00:03:02,310
OK.

48
00:03:02,370 --> 00:03:05,730
So super cool feature really helps out your development time.

49
00:03:06,090 --> 00:03:07,870
I'm going to zoom in just a little more.

50
00:03:07,890 --> 00:03:10,890
And I'm also going to collapse the explorer there.

51
00:03:12,660 --> 00:03:17,190
OK, so I'm going to zoom in probably as much as I can really zoom in without distorting things too

52
00:03:17,190 --> 00:03:17,470
much.

53
00:03:17,490 --> 00:03:18,990
I may zoom out just a little bit.

54
00:03:19,320 --> 00:03:24,870
But what I'm going to do is I'm going to write a unordered list and then an ordered list.

55
00:03:24,900 --> 00:03:27,090
Now also talk about a nested list.

56
00:03:27,360 --> 00:03:29,310
So how to create an unordered list?

57
00:03:29,820 --> 00:03:31,830
We start off by saying you well.

58
00:03:32,840 --> 00:03:38,000
And anything in between this is going to end up starting to get tagged as being part of that unordered

59
00:03:38,000 --> 00:03:38,360
list.

60
00:03:38,810 --> 00:03:43,760
So usually you're going to give yourself a little spacing between the start and the end tax of the unordered

61
00:03:43,760 --> 00:03:44,090
list.

62
00:03:44,360 --> 00:03:48,260
And then if you want a list item, you simply say, Well, I.

63
00:03:49,200 --> 00:03:49,880
He enter.

64
00:03:50,270 --> 00:03:52,430
And you notice it already creates a bullet point.

65
00:03:52,460 --> 00:03:56,540
Remember, this is an unordered list, so I can say this is item one.

66
00:03:56,960 --> 00:04:03,710
And if I want another list item, I simply say another ally tax and they'll say, this is item two.

67
00:04:04,280 --> 00:04:06,050
And let's say I want another item.

68
00:04:06,050 --> 00:04:11,840
I keep putting these items, and as long as they're inside this unordered list, then they'll be part

69
00:04:11,840 --> 00:04:12,230
of this.

70
00:04:12,230 --> 00:04:13,850
So then all I'm going to say, I know I'm.

71
00:04:15,560 --> 00:04:16,320
Three Whoops.

72
00:04:16,970 --> 00:04:17,420
There we go.

73
00:04:17,720 --> 00:04:17,959
OK.

74
00:04:17,990 --> 00:04:21,019
So you can see how this begins to build out a list.

75
00:04:21,140 --> 00:04:26,890
The other thing I should point out again is H.M. technically doesn't really care about spacing or alignment.

76
00:04:26,900 --> 00:04:30,600
If I really wanted to, I could have put all of this on a single line.

77
00:04:31,040 --> 00:04:33,710
And you can see that it doesn't actually break any of the code.

78
00:04:33,740 --> 00:04:39,140
So unlike Python, which we'll learn about later, it's not really sensitive to your spacing.

79
00:04:39,500 --> 00:04:41,360
However, you should try to stay organized.

80
00:04:41,390 --> 00:04:47,420
Often, people like to have the list items a little further indented, or at least on different lines

81
00:04:47,660 --> 00:04:50,630
than your unordered kind of list tags here.

82
00:04:51,260 --> 00:04:55,370
OK, so this is nicely organized and readable, and that's unordered list.

83
00:04:55,670 --> 00:04:57,030
We're going to have bullet points.

84
00:04:57,050 --> 00:05:01,550
Later on, we'll discover, of course, we can actually change these two like triangles or squares or

85
00:05:01,550 --> 00:05:02,690
whatever we want them to be.

86
00:05:03,260 --> 00:05:06,500
But the other thing to note is that there's the ability to have an ordered list.

87
00:05:06,620 --> 00:05:07,490
So how do we do that?

88
00:05:07,910 --> 00:05:12,260
Well, let me delete the opening you l and the closing you l.

89
00:05:12,590 --> 00:05:18,170
That way you can discover that by default, if you just put in list items, it's going to try its best

90
00:05:18,170 --> 00:05:18,980
to reach.

91
00:05:18,980 --> 00:05:23,290
Timo will try its best to just put them with bullet points, and they're part of some unordered list.

92
00:05:23,300 --> 00:05:27,290
But you notice it's no longer indented and it's not super clear what kind of list or part of.

93
00:05:27,620 --> 00:05:32,000
But if I say, oh well, then that's going to create an ordered list.

94
00:05:32,210 --> 00:05:36,500
And now let's actually start changing the order of where these tags and them going.

95
00:05:36,510 --> 00:05:39,800
So I'm going to put item one inside my ordered list.

96
00:05:40,880 --> 00:05:42,470
And notice how it actually has a number.

97
00:05:43,070 --> 00:05:45,380
And let's actually grab these two list items.

98
00:05:46,070 --> 00:05:46,940
Cut them out here.

99
00:05:47,990 --> 00:05:48,710
And paste them.

100
00:05:49,190 --> 00:05:49,550
OK.

101
00:05:49,610 --> 00:05:50,570
So pretty cool.

102
00:05:50,930 --> 00:05:56,360
Now I get to see the numbering one to three that comes with an ordered list.

103
00:05:56,870 --> 00:06:01,280
The other thing to note is you can actually start to Nest List themselves.

104
00:06:01,640 --> 00:06:07,280
So for, let's say, the second item in this list, I actually start in unordered list.

105
00:06:08,210 --> 00:06:13,040
So inside this unordered list, I create another list item and I say inside.

106
00:06:14,060 --> 00:06:19,610
List and notice that it's actually aware that it's inside another list, because now that bullet point

107
00:06:19,610 --> 00:06:21,890
is not filled in.

108
00:06:22,550 --> 00:06:27,710
OK, so is it super typical to have many lists nested inside each other?

109
00:06:28,070 --> 00:06:29,040
Obviously not.

110
00:06:29,060 --> 00:06:30,950
It just depends on the situation.

111
00:06:31,230 --> 00:06:36,650
Certainly not typical to have something like this where you have just one random inside list, but I

112
00:06:36,650 --> 00:06:39,500
hope you get the idea that you can actually nest these lists.

113
00:06:39,500 --> 00:06:43,460
So you can imagine if you're creating a note taking up, this would actually be really useful.

114
00:06:43,610 --> 00:06:49,970
So let's do one last practice and pretend we're kind of creating or developing some note taking application.

115
00:06:50,000 --> 00:06:51,020
So what would this look like?

116
00:06:51,320 --> 00:06:59,360
Maybe I want an unordered list and I want to take list items for my topics so I can say topic one.

117
00:07:00,860 --> 00:07:02,960
Ally topic to.

118
00:07:04,920 --> 00:07:07,440
And then I topic three.

119
00:07:07,980 --> 00:07:11,020
OK, so maybe I want some details on some of these.

120
00:07:11,040 --> 00:07:11,730
What could I do?

121
00:07:11,820 --> 00:07:15,090
I could make yet another unordered list.

122
00:07:16,100 --> 00:07:23,420
Inside of this and start with some details on topic one, and maybe I add another list item here.

123
00:07:23,540 --> 00:07:29,570
And I say details further or whatever I want it to say, but hopefully you get the idea again.

124
00:07:29,580 --> 00:07:36,110
This is where writing clean code and spacing things out, maybe even using Tab two and then stuff just

125
00:07:36,110 --> 00:07:37,690
to make it clear that way.

126
00:07:37,730 --> 00:07:41,450
The HTML itself is kind of reflective of what's going to be displayed.

127
00:07:41,810 --> 00:07:47,600
Notice how this itself is actually much easier to read off the indentation because it's more reflective

128
00:07:47,600 --> 00:07:54,170
of what's going to show up on the web page typically are each HTML is going to be rendered by jingo,

129
00:07:54,170 --> 00:07:57,530
so we won't have to worry too much about having to organize things in such a fashion.

130
00:07:57,800 --> 00:08:01,970
But it's just something to keep in mind that readable code is really going to help you out in the future.

131
00:08:02,840 --> 00:08:04,140
OK, so that's it for this.

132
00:08:04,160 --> 00:08:09,350
Again, you have an unordered list in order list, you can have nested lists and then the items on that

133
00:08:09,350 --> 00:08:10,880
list are L.I tags.

134
00:08:11,330 --> 00:08:11,750
That's it.

135
00:08:11,780 --> 00:08:12,800
I'll see you at the next lecture.