1
00:00:02,130 --> 00:00:04,910
Let's continue with this module,

2
00:00:04,910 --> 00:00:09,260
and I think now is the time to add the remaining cards.

3
00:00:09,260 --> 00:00:12,740
Because, as you know, our places page should, of course,

4
00:00:12,740 --> 00:00:17,580
hold several destinations, not Barcelona only.

5
00:00:17,580 --> 00:00:21,000
What we can do for that is we can, as a first step,

6
00:00:21,000 --> 00:00:26,000
go back to our code, into the places HTML file,

7
00:00:27,070 --> 00:00:31,840
and now, we'll copy paste our list item here,

8
00:00:31,840 --> 00:00:32,673
this one.

9
00:00:34,010 --> 00:00:37,640
And, we will have 10 destinations at the end,

10
00:00:37,640 --> 00:00:41,663
so we can simply copy it down here once.

11
00:00:43,370 --> 00:00:44,273
Twice.

12
00:00:45,900 --> 00:00:47,880
So we are at number three,

13
00:00:47,880 --> 00:00:49,320
four,

14
00:00:49,320 --> 00:00:50,193
five,

15
00:00:52,240 --> 00:00:53,800
six,

16
00:00:53,800 --> 00:00:55,290
seven,

17
00:00:55,290 --> 00:00:56,750
eight,

18
00:00:56,750 --> 00:00:58,010
nine,

19
00:00:58,010 --> 00:00:59,483
and number 10.

20
00:01:00,690 --> 00:01:01,790
That's it.

21
00:01:01,790 --> 00:01:06,220
If we go back to our code now, we see we have,

22
00:01:06,220 --> 00:01:08,290
well, 10 times Barcelona,

23
00:01:08,290 --> 00:01:12,260
and each card sitting directly below each other.

24
00:01:12,260 --> 00:01:14,270
Not the final look of course,

25
00:01:14,270 --> 00:01:16,713
but we'll work on this in the next minutes.

26
00:01:17,560 --> 00:01:20,030
Before we work on the styling though,

27
00:01:20,030 --> 00:01:23,810
we first have to change the city, and the image,

28
00:01:23,810 --> 00:01:27,470
and the link here for all our remaining destinations.

29
00:01:27,470 --> 00:01:29,320
And for this, we need two things.

30
00:01:29,320 --> 00:01:31,830
We need to change the code, of course,

31
00:01:31,830 --> 00:01:35,163
and we need images for the corresponding cities.

32
00:01:36,080 --> 00:01:38,650
Now, you can find both the images

33
00:01:38,650 --> 00:01:41,000
and the code attached to this lecture

34
00:01:41,000 --> 00:01:44,340
to avoid repetitive work at this stage.

35
00:01:44,340 --> 00:01:48,463
First, make sure to download and unzip the images.

36
00:01:49,720 --> 00:01:52,680
So you should have the images of these cities then,

37
00:01:52,680 --> 00:01:54,710
somewhere on your machine.

38
00:01:54,710 --> 00:01:59,210
And then, simply open the images folder here,

39
00:01:59,210 --> 00:02:01,930
the places folder, inside the images folder,

40
00:02:01,930 --> 00:02:05,490
and then simply take each of these images

41
00:02:05,490 --> 00:02:09,740
and drag it into that folder step by step.

42
00:02:09,740 --> 00:02:13,270
This, this,

43
00:02:13,270 --> 00:02:17,110
like that, and Tokyo finally.

44
00:02:17,110 --> 00:02:17,943
All in all,

45
00:02:17,943 --> 00:02:22,943
this should be two, four, six, eight, 10, 11 images.

46
00:02:23,460 --> 00:02:25,190
So this was step one.

47
00:02:25,190 --> 00:02:28,450
So we can now go back to our code.

48
00:02:28,450 --> 00:02:30,490
There we can now find all these

49
00:02:30,490 --> 00:02:33,570
beautiful images of the cities, which we can, of course,

50
00:02:33,570 --> 00:02:38,570
also close here to not occupy all the space up here.

51
00:02:41,100 --> 00:02:42,993
And we can also close this folder.

52
00:02:44,610 --> 00:02:47,390
And now with the images being added,

53
00:02:47,390 --> 00:02:50,980
we have to change, well, all our list items,

54
00:02:50,980 --> 00:02:53,160
because basically we have to change the path

55
00:02:53,160 --> 00:02:56,640
to the corresponding image of the city, our old text,

56
00:02:56,640 --> 00:02:58,140
the headline,

57
00:02:58,140 --> 00:03:00,670
and, of course, also the link to the page

58
00:03:00,670 --> 00:03:03,830
that redirects us to the information about the city.

59
00:03:03,830 --> 00:03:07,140
Thankfully, as this is a kind of repetitive task,

60
00:03:07,140 --> 00:03:11,110
you can also find this code attached to this lecture.

61
00:03:11,110 --> 00:03:14,360
So make sure to download this code and copy it.

62
00:03:14,360 --> 00:03:19,100
It is the code which contains our entire unordered list.

63
00:03:19,100 --> 00:03:21,363
So from opening tag up here,

64
00:03:22,660 --> 00:03:23,960
we can now select the code

65
00:03:25,090 --> 00:03:29,380
up until the bottom, so the closing tag of the list.

66
00:03:29,380 --> 00:03:32,820
So we basically now delete the entire content

67
00:03:32,820 --> 00:03:35,160
off our main element.

68
00:03:35,160 --> 00:03:37,700
And now you can copy and paste the code,

69
00:03:37,700 --> 00:03:42,430
which you can find attached to this lecture, so like this.

70
00:03:42,430 --> 00:03:44,540
Make sure that everything is all right,

71
00:03:44,540 --> 00:03:46,993
so let's scroll up a bit.

72
00:03:49,380 --> 00:03:51,480
Here we are in the main element,

73
00:03:51,480 --> 00:03:54,310
there we have the unordered list with the list items,

74
00:03:54,310 --> 00:03:57,470
so Barcelona, Hawaii, and so on.

75
00:03:57,470 --> 00:03:59,163
And also at the bottom here,

76
00:04:00,180 --> 00:04:02,390
make sure that your unordered list ends here,

77
00:04:02,390 --> 00:04:06,030
then the main element, and afterwards we have the footer.

78
00:04:06,030 --> 00:04:09,750
So if we save this and go back to our page,

79
00:04:09,750 --> 00:04:12,633
yeah, I think this doesn't look too shabby.

80
00:04:13,920 --> 00:04:17,500
However, although the look of our cards is fine,

81
00:04:17,500 --> 00:04:20,123
we are far from the desired result.

82
00:04:21,350 --> 00:04:25,590
You remember, this is what our page should look like.

83
00:04:25,590 --> 00:04:29,610
So we have two destinations next to each other,

84
00:04:29,610 --> 00:04:30,770
then here London,

85
00:04:30,770 --> 00:04:33,590
so the third destination here should be, well,

86
00:04:33,590 --> 00:04:36,500
occupying the entire space that we have right here,

87
00:04:36,500 --> 00:04:37,420
and so on.

88
00:04:37,420 --> 00:04:40,420
All other elements should be sitting next to each others,

89
00:04:40,420 --> 00:04:42,773
so basically in two columns, so to say.

90
00:04:43,900 --> 00:04:46,790
Now, we could try to achieve this look now.

91
00:04:46,790 --> 00:04:47,740
If we go back,

92
00:04:47,740 --> 00:04:50,850
we could say that we first increase, maybe,

93
00:04:50,850 --> 00:04:55,700
the width of our unordered list a bit, as a first step,

94
00:04:55,700 --> 00:04:57,950
because here we have it, at the moment,

95
00:04:57,950 --> 00:05:02,640
in our places CSS file set to 800 pixels.

96
00:05:02,640 --> 00:05:07,210
So let's maybe change this to 1,200 pixels.

97
00:05:07,210 --> 00:05:09,190
This gives our images, well,

98
00:05:09,190 --> 00:05:12,360
a bit more space as you see it here.

99
00:05:12,360 --> 00:05:17,360
Actually, I can zoom out a bit to 125% here in my case.

100
00:05:17,950 --> 00:05:20,463
So with that we would win some space,

101
00:05:21,340 --> 00:05:25,800
and now each list item could have a specific width.

102
00:05:25,800 --> 00:05:27,153
For example, here,

103
00:05:28,220 --> 00:05:31,140
our items could have a width of, let's say,

104
00:05:31,140 --> 00:05:33,483
500 pixels maybe.

105
00:05:34,430 --> 00:05:35,320
If we do that,

106
00:05:35,320 --> 00:05:38,440
we, well, kind of destroy the look of our cards,

107
00:05:38,440 --> 00:05:40,500
which is not a problem at this stage.

108
00:05:40,500 --> 00:05:44,280
But now, although our items are reduced in width,

109
00:05:44,280 --> 00:05:47,430
and actually our container has more space available,

110
00:05:47,430 --> 00:05:50,730
we have the problem that these items are block elements,

111
00:05:50,730 --> 00:05:52,290
our list elements here.

112
00:05:52,290 --> 00:05:53,150
And therefore,

113
00:05:53,150 --> 00:05:56,743
each element is positioned well below each other.

114
00:05:57,840 --> 00:06:01,520
Now you could say, well, with what I learned in this course,

115
00:06:01,520 --> 00:06:04,120
why don't we use Flexbox here

116
00:06:04,120 --> 00:06:07,350
to position the items next to each other?

117
00:06:07,350 --> 00:06:09,300
And that's indeed one option.

118
00:06:09,300 --> 00:06:12,540
We could say that our unordered list here is, again,

119
00:06:12,540 --> 00:06:15,810
a flex container, holding all the list items,

120
00:06:15,810 --> 00:06:18,750
which are then flex items.

121
00:06:18,750 --> 00:06:23,480
And with that, we have more control about our page layout.

122
00:06:23,480 --> 00:06:25,380
Let's give this a try.

123
00:06:25,380 --> 00:06:28,903
We now can go to the unordered list selector here,

124
00:06:30,120 --> 00:06:33,610
and change it to display flex.

125
00:06:33,610 --> 00:06:35,650
With this, yeah.

126
00:06:35,650 --> 00:06:39,060
Now we have our images sitting next to each other,

127
00:06:39,060 --> 00:06:43,230
but, well, that's actually also not the desired result.

128
00:06:43,230 --> 00:06:44,160
We could, of course,

129
00:06:44,160 --> 00:06:48,893
change our flex direction again to column instead of row,

130
00:06:49,820 --> 00:06:50,680
like this.

131
00:06:50,680 --> 00:06:52,363
Well, also not working.

132
00:06:53,730 --> 00:06:57,670
Here we have the initial state back before we edit Flexbox.

133
00:06:57,670 --> 00:06:59,900
Or, let's delete this.

134
00:06:59,900 --> 00:07:02,370
We could say flex-wrap.

135
00:07:02,370 --> 00:07:05,160
You remember, you also learned about this property,

136
00:07:05,160 --> 00:07:08,483
and set it to wrap like this.

137
00:07:09,720 --> 00:07:14,170
Yeah, this would indeed bring us a bit closer here.

138
00:07:14,170 --> 00:07:16,600
However, we still have some styling issues.

139
00:07:16,600 --> 00:07:21,510
And if we would change the width of our unordered list to,

140
00:07:21,510 --> 00:07:24,313
for example, 1,500 pixels,

141
00:07:25,290 --> 00:07:26,180
then we would have

142
00:07:26,180 --> 00:07:29,083
three elements sitting next to each other.

143
00:07:30,560 --> 00:07:34,570
This means we don't have full control of our layout

144
00:07:34,570 --> 00:07:36,130
here at the moment.

145
00:07:36,130 --> 00:07:40,320
The problem is that the perfect application area for Flexbox

146
00:07:40,320 --> 00:07:42,980
are one dimensional layouts,

147
00:07:42,980 --> 00:07:45,000
meaning here in our header,

148
00:07:45,000 --> 00:07:48,890
we want to have this horizontal allocation of our items.

149
00:07:48,890 --> 00:07:51,540
Same thing here on the starting page, down here,

150
00:07:51,540 --> 00:07:54,260
all items should be positioned next to each other.

151
00:07:54,260 --> 00:07:55,850
But here in the destinations,

152
00:07:55,850 --> 00:07:59,133
we now have a two dimensional problem, so to say.

153
00:08:00,010 --> 00:08:04,450
We want to make sure that our cards here are positioned

154
00:08:04,450 --> 00:08:06,420
in two dimensions.

155
00:08:06,420 --> 00:08:09,260
So we want to have a specific column count,

156
00:08:09,260 --> 00:08:12,210
two columns in our example here,

157
00:08:12,210 --> 00:08:14,600
and then the cards should be divided

158
00:08:14,600 --> 00:08:16,770
between the different rows.

159
00:08:16,770 --> 00:08:20,200
Also think about the problem we have that we want to

160
00:08:20,200 --> 00:08:24,690
position the London card here across one entire row.

161
00:08:24,690 --> 00:08:27,300
So we have Barcelona and Hawaii next to each other,

162
00:08:27,300 --> 00:08:29,810
and then London should come.

163
00:08:29,810 --> 00:08:30,643
So as you'll see,

164
00:08:30,643 --> 00:08:34,419
although we could kind of create this with Flexbox,

165
00:08:34,419 --> 00:08:37,650
it requires a lot of, well, changes, adjustments,

166
00:08:37,650 --> 00:08:40,653
and it will not be easy to create in the end.

167
00:08:41,799 --> 00:08:44,980
We want to create our layouts as easy as possible.

168
00:08:44,980 --> 00:08:48,130
Therefore, we will not use Flexbox here.

169
00:08:48,130 --> 00:08:53,130
This means we can delete our flex code here.

170
00:08:53,260 --> 00:08:55,550
So we are back in the initial state.

171
00:08:55,550 --> 00:08:58,720
But instead, we have another tool which allows us

172
00:08:58,720 --> 00:09:02,350
to easily create two dimensional layouts.

173
00:09:02,350 --> 00:09:04,203
The CSS grid.