1
00:00:02,160 --> 00:00:03,930
To create the HTML code

2
00:00:03,930 --> 00:00:06,830
and to understand how we should create this code,

3
00:00:06,830 --> 00:00:08,910
it's important to have another look at

4
00:00:08,910 --> 00:00:10,653
the final result right here.

5
00:00:11,730 --> 00:00:13,030
Because right here,

6
00:00:13,030 --> 00:00:16,100
we have a logic that we saw multiple times

7
00:00:16,100 --> 00:00:17,850
throughout this course already.

8
00:00:17,850 --> 00:00:21,150
We again have related content, so to say,

9
00:00:21,150 --> 00:00:23,480
so we always have specific cities,

10
00:00:23,480 --> 00:00:25,930
we have an image, we have the name, a description,

11
00:00:25,930 --> 00:00:27,540
and then this link down here

12
00:00:28,747 --> 00:00:31,165
and we have this multiple times, of course.

13
00:00:31,165 --> 00:00:33,006
And then we have a certain structure

14
00:00:33,006 --> 00:00:34,910
inside each of these so-called cards.

15
00:00:34,910 --> 00:00:38,040
Now, when I talk about related content,

16
00:00:38,040 --> 00:00:40,330
the concept of grouping that content

17
00:00:40,330 --> 00:00:42,650
in 'lists' as list items,

18
00:00:42,650 --> 00:00:44,630
hopefully comes to your mind.

19
00:00:44,630 --> 00:00:46,330
And that's exactly the approach

20
00:00:46,330 --> 00:00:48,460
I would like to follow right here.

21
00:00:48,460 --> 00:00:52,530
Our main element will basically be an unordered list.

22
00:00:52,530 --> 00:00:53,363
Because again,

23
00:00:53,363 --> 00:00:56,010
the order of our cities is up to us in the end.

24
00:00:56,010 --> 00:00:57,800
And this unordered list

25
00:00:57,800 --> 00:00:59,320
will then have to list items

26
00:00:59,320 --> 00:01:01,040
their each single card.

27
00:01:01,040 --> 00:01:04,400
So each single city, is a list item.

28
00:01:04,400 --> 00:01:07,400
And inside this list item, which will then of course,

29
00:01:07,400 --> 00:01:10,140
act as a container for the entire content

30
00:01:10,140 --> 00:01:12,320
of each single city's cards.

31
00:01:12,320 --> 00:01:14,500
Inside of this list items,

32
00:01:14,500 --> 00:01:17,740
we will have another container like structure,

33
00:01:17,740 --> 00:01:19,500
well, we will have the image of course.

34
00:01:19,500 --> 00:01:20,450
But the city here,

35
00:01:20,450 --> 00:01:22,040
so the name and the description

36
00:01:22,941 --> 00:01:25,710
will be a separate container containing this information.

37
00:01:25,710 --> 00:01:27,410
And then we'll have a third container

38
00:01:27,410 --> 00:01:29,243
with this 'explore' part here.

39
00:01:30,361 --> 00:01:31,850
So basically we have an unordered list.

40
00:01:31,850 --> 00:01:33,390
We have lists items,

41
00:01:33,390 --> 00:01:36,260
which contain the entire content of the city.

42
00:01:36,260 --> 00:01:37,480
We have an image,

43
00:01:37,480 --> 00:01:40,500
one container for the city name and the city description.

44
00:01:40,500 --> 00:01:42,650
Here of course, just some dummy text

45
00:01:42,650 --> 00:01:46,380
and another container for this explore link here.

46
00:01:46,380 --> 00:01:48,370
That's the theoretical background.

47
00:01:48,370 --> 00:01:50,210
Let's now go back to our code

48
00:01:50,210 --> 00:01:53,043
and recreate the structure in HTML.

49
00:01:54,410 --> 00:01:57,890
For this, I'm in the 'places' HTML file.

50
00:01:57,890 --> 00:02:01,343
And here, we'll now go into our main element.

51
00:02:03,794 --> 00:02:07,019
As I said, we will again use an unordered list.

52
00:02:07,019 --> 00:02:10,120
So let's create this one and we'll have multiple list items.

53
00:02:10,120 --> 00:02:12,440
I'll just start with a single list item here,

54
00:02:12,440 --> 00:02:15,260
because once the structure for this list item is finished,

55
00:02:15,260 --> 00:02:18,520
we can of course, duplicate this logic.

56
00:02:18,520 --> 00:02:19,353
As I said,

57
00:02:19,353 --> 00:02:22,610
the unordered list is the container of the list items.

58
00:02:22,610 --> 00:02:24,500
And each single list item will be

59
00:02:24,500 --> 00:02:27,560
the container of the content of this card.

60
00:02:27,560 --> 00:02:31,680
And the first content type we have in these cards

61
00:02:31,680 --> 00:02:34,520
will be the image of the city.

62
00:02:34,520 --> 00:02:37,890
For this, we can again use our image element

63
00:02:37,890 --> 00:02:41,750
and what is missing now is a link to our source files.

64
00:02:41,750 --> 00:02:44,260
Here again, we need images.

65
00:02:44,260 --> 00:02:47,320
Now, the great thing is, for this first list item,

66
00:02:47,320 --> 00:02:48,830
we have the image already

67
00:02:48,830 --> 00:02:52,750
because I want to get started with our Barcelona image.

68
00:02:52,750 --> 00:02:54,100
So this one right here.

69
00:02:54,100 --> 00:02:58,350
For other cities, which we'll add in a few minutes,

70
00:02:58,350 --> 00:03:00,320
you can of course find these images

71
00:03:00,320 --> 00:03:01,460
attached to this lecture.

72
00:03:01,460 --> 00:03:05,160
We'll do this together though, in a few minutes, as I said.

73
00:03:05,160 --> 00:03:06,333
For the first image,

74
00:03:07,348 --> 00:03:09,820
we'll refer to our Barcelona image, as I said.

75
00:03:09,820 --> 00:03:12,730
So let's go to images, places,

76
00:03:12,730 --> 00:03:15,530
and here select barcelona.jpg.

77
00:03:15,530 --> 00:03:18,793
I'm selecting these with tab, I mentioned this already.

78
00:03:19,762 --> 00:03:22,257
And our alt text here will be, well,

79
00:03:22,257 --> 00:03:24,497
"City of Barcelona".

80
00:03:27,550 --> 00:03:31,200
So that's the first thing, this is the image.

81
00:03:31,200 --> 00:03:32,270
And now I said,

82
00:03:32,270 --> 00:03:36,380
that I would like to have two containers.

83
00:03:36,380 --> 00:03:37,930
The first container holding

84
00:03:37,930 --> 00:03:40,210
the city name and the description,

85
00:03:40,210 --> 00:03:44,310
and the second container holding the link to the city,

86
00:03:44,310 --> 00:03:45,623
to the Wikipedia page.

87
00:03:47,220 --> 00:03:50,710
This means these containers well are just containers,

88
00:03:50,710 --> 00:03:53,910
but these are non-semantic containers in the end.

89
00:03:53,910 --> 00:03:58,120
Therefore, I'll go for a non-semantic block element.

90
00:03:58,120 --> 00:04:00,793
And this is our good old friend, the div.

91
00:04:02,930 --> 00:04:04,193
Inside this div,

92
00:04:05,390 --> 00:04:07,740
we'll have two elements.

93
00:04:07,740 --> 00:04:12,570
The first one will be our h2 element.

94
00:04:12,570 --> 00:04:16,240
We don't have an h1 element on this page of our website.

95
00:04:16,240 --> 00:04:18,720
Still we'll stick to h1 elements

96
00:04:18,720 --> 00:04:21,690
for the real headlines of our website, so to say.

97
00:04:21,690 --> 00:04:25,300
And here h2 is just a headline for each single city.

98
00:04:25,300 --> 00:04:27,290
And also typically,

99
00:04:27,290 --> 00:04:29,380
you tend to have the h1 element

100
00:04:29,380 --> 00:04:32,375
only once on each webpage.

101
00:04:32,375 --> 00:04:33,630
Well and if we have these cities multiple times,

102
00:04:33,630 --> 00:04:35,900
then this won't work.

103
00:04:35,900 --> 00:04:38,190
Here, we can now add the city name,

104
00:04:38,190 --> 00:04:40,550
so 'Barcelona' in this case.

105
00:04:40,550 --> 00:04:44,490
And afterwards I'll add a paragraph with the description.

106
00:04:44,490 --> 00:04:47,510
Here, I'll go with some dummy text, as I said.

107
00:04:47,510 --> 00:04:51,470
And if you enter 'lorem' here in little studio code,

108
00:04:51,470 --> 00:04:53,530
you get the Emmet helper,

109
00:04:53,530 --> 00:04:55,330
which adds this text automatically.

110
00:04:55,330 --> 00:04:57,430
So by pressing tab,

111
00:04:57,430 --> 00:04:59,783
you get this, a little bit too long texts,

112
00:05:01,712 --> 00:05:03,062
so let's scroll to the left

113
00:05:04,649 --> 00:05:07,360
and maybe stop this right here

114
00:05:07,360 --> 00:05:08,830
and add some dots.

115
00:05:08,830 --> 00:05:10,290
Simply with that,

116
00:05:10,290 --> 00:05:12,113
I think this should be sufficient.

117
00:05:13,620 --> 00:05:16,550
So this is the description of the city.

118
00:05:16,550 --> 00:05:19,890
What's missing for our div though here

119
00:05:19,890 --> 00:05:24,120
is maybe a way to select it later easily.

120
00:05:24,120 --> 00:05:25,870
Keep in mind that we will have this div

121
00:05:25,870 --> 00:05:29,100
in each single list item.

122
00:05:29,100 --> 00:05:31,840
Therefore, we will not use an ID here,

123
00:05:31,840 --> 00:05:34,360
but a 'class' once again, with that,

124
00:05:34,360 --> 00:05:37,890
we can apply the same styles to all our containers

125
00:05:37,890 --> 00:05:40,550
for the city description and the name.

126
00:05:40,550 --> 00:05:44,147
And here we'll simply call this 'item-content'.

127
00:05:45,290 --> 00:05:47,160
And besides the item content,

128
00:05:47,160 --> 00:05:50,500
so after this div, we'll have a second div

129
00:05:52,427 --> 00:05:56,090
with a class of "actions" here,

130
00:05:56,090 --> 00:05:58,040
because these actions will be what?

131
00:05:58,040 --> 00:06:00,400
Well, these actions will be an anchor tag.

132
00:06:00,400 --> 00:06:02,740
So a link to the corresponding

133
00:06:02,740 --> 00:06:05,130
Wikipedia page of that city,

134
00:06:05,130 --> 00:06:07,370
and here we'll go for

135
00:06:10,603 --> 00:06:15,603
"https://en.wikipedia.org/wiki/Barcelona"

136
00:06:23,157 --> 00:06:26,303
written like this maybe would be the better approach.

137
00:06:28,310 --> 00:06:29,420
So let's save this and format it.

138
00:06:29,420 --> 00:06:31,003
And let's now add,

139
00:06:32,030 --> 00:06:34,740
the content of this link,

140
00:06:34,740 --> 00:06:37,793
which could simply be 'Explore' here.

141
00:06:38,860 --> 00:06:40,320
With this on our page,

142
00:06:40,320 --> 00:06:43,830
yeah we have a very big image, so to say.

143
00:06:43,830 --> 00:06:45,200
Scroll down though,

144
00:06:45,200 --> 00:06:48,690
we have the content, name, the description and the link.

145
00:06:48,690 --> 00:06:49,990
And if we click onto the link,

146
00:06:49,990 --> 00:06:52,550
we are redirected to the right page.

147
00:06:52,550 --> 00:06:54,403
So this worked perfectly,

148
00:06:55,290 --> 00:06:58,090
we still have a problem with the styling here though.

149
00:06:58,090 --> 00:07:01,313
So this is what we will tackle in the next lecture.