1
00:00:02,270 --> 00:00:05,350
I'm back in the index.html file

2
00:00:05,350 --> 00:00:07,700
of our landing page, so to say,

3
00:00:07,700 --> 00:00:10,990
and let me maybe close this folder here.

4
00:00:10,990 --> 00:00:13,729
And there, we need to go down a bit

5
00:00:13,729 --> 00:00:17,480
and work on our second section,

6
00:00:17,480 --> 00:00:20,994
the section with the ID highlights that we created.

7
00:00:20,994 --> 00:00:24,729
In this section, we will now add the HTML code we need.

8
00:00:24,729 --> 00:00:26,469
And then in the next lectures,

9
00:00:26,469 --> 00:00:31,020
we'll style it with our CSS code.

10
00:00:31,020 --> 00:00:32,983
Enough of the words, let's get started.

11
00:00:32,983 --> 00:00:35,450
As you saw, this section needs

12
00:00:35,450 --> 00:00:38,490
to have a specific background color.

13
00:00:38,490 --> 00:00:41,220
We need a highlights headline, so to say,

14
00:00:41,220 --> 00:00:43,466
and we need three different images

15
00:00:43,466 --> 00:00:47,750
with the corresponding country and city names.

16
00:00:47,750 --> 00:00:50,960
This brings us again to the concept we learned about

17
00:00:50,960 --> 00:00:52,714
when it comes to containers.

18
00:00:52,714 --> 00:00:56,890
So nesting elements into each other

19
00:00:56,890 --> 00:01:00,360
because basically, our entire section here

20
00:01:00,360 --> 00:01:01,630
could be the container,

21
00:01:01,630 --> 00:01:04,069
well for this entire content obviously,

22
00:01:04,069 --> 00:01:06,973
and therefore we could apply our background color

23
00:01:06,973 --> 00:01:08,600
to this section here

24
00:01:08,600 --> 00:01:12,725
and then work on the styling of the content of the section.

25
00:01:12,725 --> 00:01:15,477
What I mean by that is that inside the section,

26
00:01:15,477 --> 00:01:20,477
we only need two different adjacent elements, so to say.

27
00:01:21,080 --> 00:01:22,946
First, we need the headline.

28
00:01:22,946 --> 00:01:25,970
This highlights headline I was referring to.

29
00:01:25,970 --> 00:01:28,600
So we could use an h2 element here

30
00:01:28,600 --> 00:01:33,380
because h1 is typically used only once on a webpage

31
00:01:33,380 --> 00:01:36,750
and we have it already here in our hero content,

32
00:01:36,750 --> 00:01:40,725
therefore h2 for, well, second priority headlines

33
00:01:40,725 --> 00:01:44,940
or headlines of other sections of the website, so to say,

34
00:01:44,940 --> 00:01:48,863
could here be our highlights text this one here.

35
00:01:49,850 --> 00:01:51,030
And besides that,

36
00:01:51,030 --> 00:01:56,030
the next adjacent element I was referring to could be what?

37
00:01:56,130 --> 00:01:59,650
Well, an unordered list again, why?

38
00:01:59,650 --> 00:02:01,630
Because we have the free images

39
00:02:01,630 --> 00:02:04,229
with the corresponding information about the image,

40
00:02:04,229 --> 00:02:07,733
and this is basically grouped information again, right?

41
00:02:07,733 --> 00:02:10,244
All these three images kind of belong together

42
00:02:10,244 --> 00:02:13,140
to a specific type of information.

43
00:02:13,140 --> 00:02:17,160
Therefore, an unordered list is a good option here,

44
00:02:17,160 --> 00:02:17,993
an ordered list not

45
00:02:17,993 --> 00:02:20,459
because the order of these images doesn't matter,

46
00:02:20,459 --> 00:02:22,730
but this is nothing new to you.

47
00:02:22,730 --> 00:02:25,540
Therefore, I will add an unordered list here

48
00:02:26,930 --> 00:02:30,743
and insight this list, we will have three list items.

49
00:02:30,743 --> 00:02:32,377
One,

50
00:02:32,377 --> 00:02:33,618
two,

51
00:02:33,618 --> 00:02:35,040
and three.

52
00:02:35,040 --> 00:02:37,968
And each list item will then contain, well,

53
00:02:37,968 --> 00:02:41,204
the image and the corresponding text to this image,

54
00:02:41,204 --> 00:02:42,793
I mentioned already.

55
00:02:43,920 --> 00:02:46,470
Let's add some more attributes still

56
00:02:46,470 --> 00:02:49,250
to keep our information structured.

57
00:02:49,250 --> 00:02:51,583
The unordered list, for example,

58
00:02:52,517 --> 00:02:57,460
is basically the container of all our destinations, right?

59
00:02:57,460 --> 00:03:00,734
We will have three different destinations.

60
00:03:00,734 --> 00:03:03,690
So again, Miami, Munich, and Germany.

61
00:03:03,690 --> 00:03:08,210
So the list holds all these destinations,

62
00:03:08,210 --> 00:03:11,956
therefore, a fitting attribute here, a fitting ID, actually,

63
00:03:11,956 --> 00:03:14,910
because it's a unique element here

64
00:03:14,910 --> 00:03:19,740
would be maybe destinations, right?

65
00:03:19,740 --> 00:03:23,000
So if you want to style our container of the destinations,

66
00:03:23,000 --> 00:03:25,283
then this would be our unordered list.

67
00:03:26,980 --> 00:03:28,530
Each list item though.

68
00:03:28,530 --> 00:03:31,640
So these three items here could also have a specific

69
00:03:31,640 --> 00:03:35,204
attribute because each list item contains what?

70
00:03:35,204 --> 00:03:37,664
Well, a single destination.

71
00:03:37,664 --> 00:03:38,750
For this case,

72
00:03:38,750 --> 00:03:41,986
we have three different items which contain destinations.

73
00:03:41,986 --> 00:03:45,870
Therefore using an ID will not be the right approach here.

74
00:03:45,870 --> 00:03:49,727
An ID is a unique attribute, only used once,

75
00:03:49,727 --> 00:03:51,966
but instead of using the ID,

76
00:03:51,966 --> 00:03:55,705
we can refer to, well, equal elements

77
00:03:55,705 --> 00:03:58,250
or elements containing the same content,

78
00:03:58,250 --> 00:04:00,470
in the end, with classes.

79
00:04:00,470 --> 00:04:02,500
All the attributes we learned about

80
00:04:02,500 --> 00:04:04,830
in earlier lectures of this course,

81
00:04:04,830 --> 00:04:07,710
therefore we can add the class here

82
00:04:07,710 --> 00:04:10,543
and we will give this class a name of destination.

83
00:04:11,476 --> 00:04:16,260
As I said, each list item holds a single destination.

84
00:04:16,260 --> 00:04:17,970
Therefore we can take this,

85
00:04:17,970 --> 00:04:22,236
copy the class or the attribute and the name of the class

86
00:04:22,236 --> 00:04:24,473
and paste it in the second,

87
00:04:24,473 --> 00:04:26,863
and the first list item.

88
00:04:27,721 --> 00:04:32,053
With that, we added more structure to our HTML code already.

89
00:04:33,470 --> 00:04:34,620
What's missing now

90
00:04:34,620 --> 00:04:37,708
is of course the content of each list item.

91
00:04:37,708 --> 00:04:40,520
Let's get started with the first one here.

92
00:04:40,520 --> 00:04:43,400
Then, as you saw the content consists of an image

93
00:04:43,400 --> 00:04:44,660
and some text,

94
00:04:44,660 --> 00:04:48,480
therefore let's get started with the image element here.

95
00:04:48,480 --> 00:04:50,726
Our source will be what?

96
00:04:50,726 --> 00:04:53,900
It will be the images folder,

97
00:04:53,900 --> 00:04:55,500
then into the places folder,

98
00:04:55,500 --> 00:04:58,733
and then, we'll refer to a specific image here.

99
00:04:58,733 --> 00:05:00,990
We are again using relative paths.

100
00:05:00,990 --> 00:05:03,958
So starting from the index HTML file,

101
00:05:03,958 --> 00:05:06,630
and we can either refer to an image now

102
00:05:06,630 --> 00:05:09,503
by adding the images folder name here, and then a slash,

103
00:05:09,503 --> 00:05:12,420
then we see we can select icons or places

104
00:05:12,420 --> 00:05:14,720
with the up and lower arrow keys.

105
00:05:14,720 --> 00:05:16,955
Or as I did it up here, for example,

106
00:05:16,955 --> 00:05:19,831
you can also refer to these paths with a slash

107
00:05:19,831 --> 00:05:21,697
and then you get immediately the option

108
00:05:21,697 --> 00:05:25,120
of all the current folders and files you have

109
00:05:25,120 --> 00:05:26,979
starting from your current path,

110
00:05:26,979 --> 00:05:30,230
both is valid code, so you can choose whatever you prefer.

111
00:05:30,230 --> 00:05:32,691
Personally, I prefer this approach

112
00:05:32,691 --> 00:05:36,510
as you immediately can navigate through the entire folder

113
00:05:36,510 --> 00:05:41,470
and file structure, in my case images then places.

114
00:05:41,470 --> 00:05:45,486
And then we'll get started with the Miami JPEG here.

115
00:05:45,486 --> 00:05:47,736
I'm always selecting these folders and files

116
00:05:47,736 --> 00:05:50,447
with the tab key, by the way.

117
00:05:50,447 --> 00:05:52,969
We also will add the old attribute

118
00:05:52,969 --> 00:05:54,704
for visually impaired people

119
00:05:54,704 --> 00:05:57,630
or in case the image can't be loaded properly

120
00:05:57,630 --> 00:05:58,974
for some of our users.

121
00:05:58,974 --> 00:06:00,413
The text here

122
00:06:00,413 --> 00:06:04,160
should be descriptive of what can be seen on the image.

123
00:06:04,160 --> 00:06:05,130
So in our case,

124
00:06:05,130 --> 00:06:07,213
the Miami image here holds, well,

125
00:06:07,213 --> 00:06:09,730
the streets of Miami on a sunny day,

126
00:06:09,730 --> 00:06:12,660
which would also be a great description off this image.

127
00:06:12,660 --> 00:06:14,193
So let's add this text.

128
00:06:15,480 --> 00:06:20,047
So Miami streets on, oops, on sunny day.

129
00:06:21,621 --> 00:06:23,712
So this was the first image.

130
00:06:23,712 --> 00:06:24,974
And besides that,

131
00:06:24,974 --> 00:06:29,150
we also need the description of the country and the city.

132
00:06:29,150 --> 00:06:31,583
For this, we'll just use a paragraph.

133
00:06:33,010 --> 00:06:37,653
And here, this should be Miami, USA.

134
00:06:39,468 --> 00:06:44,079
However, here, if you, again, check our page,

135
00:06:44,079 --> 00:06:48,741
you'll see that the country here has a bigger font weight

136
00:06:48,741 --> 00:06:51,969
when comparing it to the city here.

137
00:06:51,969 --> 00:06:55,230
And the code of course do this with CSS,

138
00:06:55,230 --> 00:06:59,215
but there also is a built in HTML element,

139
00:06:59,215 --> 00:07:02,000
which allows us to exactly do that to, well,

140
00:07:02,000 --> 00:07:04,213
make the font weight a bit bolder.

141
00:07:04,213 --> 00:07:07,226
Typically we use CSS for such things,

142
00:07:07,226 --> 00:07:09,723
but in this case it will be great example,

143
00:07:09,723 --> 00:07:13,353
but we can also achieve this goal via HTML.

144
00:07:13,353 --> 00:07:17,620
Therefore, we can simply add the strong element here.

145
00:07:17,620 --> 00:07:19,690
Strong is again, an inland element,

146
00:07:19,690 --> 00:07:24,690
just, well, enhancing the width of texts, so to say.

147
00:07:25,390 --> 00:07:28,227
So with this like that.

148
00:07:28,227 --> 00:07:32,383
So with this, we also finished the text part already.

149
00:07:35,010 --> 00:07:36,610
What do we have to do now is, well,

150
00:07:36,610 --> 00:07:40,175
we have to do the same thing for our two other list items.

151
00:07:40,175 --> 00:07:42,500
I'll speed things up a bit here now,

152
00:07:42,500 --> 00:07:43,482
as we know how it works.

153
00:07:43,482 --> 00:07:45,980
So we'll add the image attribute,

154
00:07:45,980 --> 00:07:50,980
refer to the images places and here to the Munich JPEG file.

155
00:07:53,220 --> 00:07:56,253
We'll add an alternative text in here.

156
00:07:57,728 --> 00:08:01,226
We can see to Munich football stadium in winter.

157
00:08:01,226 --> 00:08:02,993
So let's add this text,

158
00:08:02,993 --> 00:08:05,883
Munich football stadium in winter.

159
00:08:07,954 --> 00:08:11,427
We can simply copy and paste the paragraph,

160
00:08:11,427 --> 00:08:14,723
including the strong element here,

161
00:08:14,723 --> 00:08:16,252
and pasting it right there.

162
00:08:16,252 --> 00:08:21,249
So this should be Munich, Germany now.

163
00:08:21,249 --> 00:08:26,241
And then one less time we'll again add the image element,

164
00:08:26,241 --> 00:08:31,241
refer to images, places, and here now to Barcelona JPEG,

165
00:08:32,489 --> 00:08:33,840
the text here

166
00:08:36,260 --> 00:08:37,490
could be, well,

167
00:08:37,490 --> 00:08:41,226
maybe Palm Beach in Barcelona,

168
00:08:41,226 --> 00:08:45,303
Palm Beach in Barcelona.

169
00:08:47,270 --> 00:08:52,270
And then we, again paste our city, Barcelona here

170
00:08:54,958 --> 00:08:56,981
written like this,

171
00:08:56,981 --> 00:09:00,153
and this is Spain.

172
00:09:01,610 --> 00:09:04,465
And one thing that would ultimately help here would be,

173
00:09:04,465 --> 00:09:08,983
if we now take our image and paragraph

174
00:09:08,983 --> 00:09:12,004
and put it into the list element,

175
00:09:12,004 --> 00:09:13,930
otherwise this will not work.

176
00:09:13,930 --> 00:09:17,123
Let's quickly format the code to see what it looks like.

177
00:09:17,980 --> 00:09:20,731
Yep. I think we have a nice structure now.

178
00:09:20,731 --> 00:09:23,720
So we have our section, the h2 element,

179
00:09:23,720 --> 00:09:27,010
the unordered list with our destinations,

180
00:09:27,010 --> 00:09:31,910
and then three different single destinations as list items.

181
00:09:31,910 --> 00:09:33,474
Let's save this now.

182
00:09:33,474 --> 00:09:37,280
And let's have a look at our HTML page.

183
00:09:37,280 --> 00:09:39,980
And if we scroll down, we see, we have the highlights.

184
00:09:39,980 --> 00:09:42,450
We have some very big images.

185
00:09:42,450 --> 00:09:44,313
We have the text below,

186
00:09:45,260 --> 00:09:47,000
another image, texts below,

187
00:09:47,000 --> 00:09:48,730
another image, text below.

188
00:09:48,730 --> 00:09:49,742
Basically it worked.

189
00:09:49,742 --> 00:09:51,090
What is missing here

190
00:09:51,090 --> 00:09:53,970
is a space between the city and the country.

191
00:09:53,970 --> 00:09:58,460
This can be easily fixed by adding the space here

192
00:09:58,460 --> 00:10:00,724
after the city name.

193
00:10:00,724 --> 00:10:04,930
So right here, right there and right there.

194
00:10:04,930 --> 00:10:05,763
Save this.

195
00:10:05,763 --> 00:10:07,533
Yeah, now this looks better.

196
00:10:08,980 --> 00:10:12,523
And if we zoom in a bit here, I'll do this for you.

197
00:10:12,523 --> 00:10:14,741
You'll see that strong alt has an impact.

198
00:10:14,741 --> 00:10:18,910
Here we have the slightly thinner font weight.

199
00:10:18,910 --> 00:10:20,969
Here we have a bigger font weight.

200
00:10:20,969 --> 00:10:25,393
So this is sufficient to emphasize our country name here.

201
00:10:26,750 --> 00:10:28,250
So this was step one.

202
00:10:28,250 --> 00:10:29,460
The HTML part.

203
00:10:29,460 --> 00:10:32,125
What's missing off course is the styling.

204
00:10:32,125 --> 00:10:34,593
This is what we will work on next.