1
00:00:02,180 --> 00:00:04,520
You finished this module.

2
00:00:04,520 --> 00:00:05,810
Congratulations.

3
00:00:05,810 --> 00:00:07,850
This was a lot of content,

4
00:00:07,850 --> 00:00:10,080
a lot of important content though,

5
00:00:10,080 --> 00:00:14,150
to make sure you can grow further as developer.

6
00:00:14,150 --> 00:00:16,750
Which, by the way, is something you already are.

7
00:00:16,750 --> 00:00:19,360
You developed your second website.

8
00:00:19,360 --> 00:00:21,610
That's really awesome.

9
00:00:21,610 --> 00:00:23,510
Whilst developing this website,

10
00:00:23,510 --> 00:00:27,800
you learned a lot about HTML and CSS though.

11
00:00:27,800 --> 00:00:29,994
On the index HTML file, for example,

12
00:00:29,994 --> 00:00:34,330
we implemented again a semantic structure inside the body.

13
00:00:34,330 --> 00:00:36,890
So, with our header, with the main element,

14
00:00:36,890 --> 00:00:40,410
now with also adding the section element.

15
00:00:40,410 --> 00:00:43,940
This helped us to create an entire landing page here,

16
00:00:43,940 --> 00:00:45,963
a structured landing page.

17
00:00:48,040 --> 00:00:49,350
On this landing page,

18
00:00:49,350 --> 00:00:52,200
you also implemented a navigation bar.

19
00:00:52,200 --> 00:00:55,290
Here in our header, we added the page logo,

20
00:00:55,290 --> 00:00:56,520
this one right here.

21
00:00:56,520 --> 00:00:58,460
But then, inside the nav element,

22
00:00:58,460 --> 00:01:01,150
we used a list to be able to navigate

23
00:01:01,150 --> 00:01:04,340
to different places on our website.

24
00:01:04,340 --> 00:01:07,570
We also added this dummy link for the about page here.

25
00:01:07,570 --> 00:01:10,760
This is something you can of course add on your own

26
00:01:10,760 --> 00:01:12,883
to further practice what we learned.

27
00:01:14,420 --> 00:01:17,710
Besides these concepts, we also learned a lot about

28
00:01:17,710 --> 00:01:21,360
how to work on the layout of a website.

29
00:01:21,360 --> 00:01:24,980
We did this with two very important core technologies,

30
00:01:24,980 --> 00:01:28,323
CSS with Flexbox and the Grid.

31
00:01:29,440 --> 00:01:34,410
We started with Flexbox here in our style CSS file.

32
00:01:34,410 --> 00:01:37,420
We learned a lot about how Flexbox works

33
00:01:37,420 --> 00:01:41,240
and how we can use it well to align our items.

34
00:01:41,240 --> 00:01:42,970
We did this, for example, here

35
00:01:42,970 --> 00:01:44,890
for our different destinations,

36
00:01:44,890 --> 00:01:45,840
which we can find

37
00:01:47,560 --> 00:01:48,790
down here.

38
00:01:48,790 --> 00:01:52,680
We learned that we can use the flex container concept

39
00:01:52,680 --> 00:01:56,490
to have full control over the flex items.

40
00:01:56,490 --> 00:01:59,820
We also learned about properties like flex direction,

41
00:01:59,820 --> 00:02:02,640
which defined whether the items should be positioned

42
00:02:02,640 --> 00:02:04,290
next to each other in a row,

43
00:02:04,290 --> 00:02:06,450
or below each other as a column.

44
00:02:06,450 --> 00:02:10,169
We learned about flex-wrap and also about justify-content,

45
00:02:10,169 --> 00:02:13,710
which helps us to efficiently manage the way our elements,

46
00:02:13,710 --> 00:02:16,923
our items are displayed in our flex container.

47
00:02:17,913 --> 00:02:21,770
Besides that, we also learned more about images.

48
00:02:21,770 --> 00:02:25,300
Besides normal images, imported or added

49
00:02:25,300 --> 00:02:26,900
with the image element,

50
00:02:26,900 --> 00:02:30,940
we also learned how we can use background images.

51
00:02:30,940 --> 00:02:33,650
This background image here is special

52
00:02:33,650 --> 00:02:36,340
in a way that we additionally dive deeper

53
00:02:36,340 --> 00:02:38,800
into the way we can create headers,

54
00:02:38,800 --> 00:02:40,533
which are basically, well,

55
00:02:40,533 --> 00:02:43,050
above an element,

56
00:02:43,050 --> 00:02:45,430
here above the background image.

57
00:02:45,430 --> 00:02:49,040
This led us to another important CSS concept,

58
00:02:49,040 --> 00:02:52,010
the concept of positioning elements.

59
00:02:52,010 --> 00:02:55,381
We learned about the default document flow,

60
00:02:55,381 --> 00:02:59,310
positioning each block element one after another,

61
00:02:59,310 --> 00:03:02,320
and we learned that we can break this default view

62
00:03:02,320 --> 00:03:03,710
with different values

63
00:03:03,710 --> 00:03:05,880
which are added to the position property.

64
00:03:05,880 --> 00:03:10,290
Specifically, position absolute and position fixed.

65
00:03:10,290 --> 00:03:12,730
And we applied all of these concepts,

66
00:03:12,730 --> 00:03:15,540
all of these values, also into our project.

67
00:03:15,540 --> 00:03:16,630
Here, for example,

68
00:03:16,630 --> 00:03:19,293
we used position absolute for our header.

69
00:03:20,250 --> 00:03:23,210
Besides some more advanced concepts,

70
00:03:23,210 --> 00:03:24,790
like margin collapsing

71
00:03:24,790 --> 00:03:27,530
which can occur between different block elements,

72
00:03:27,530 --> 00:03:31,040
and also in a parent-child relationships,

73
00:03:31,040 --> 00:03:34,200
we dive deeper into selected properties.

74
00:03:34,200 --> 00:03:36,070
For example, object fit,

75
00:03:36,070 --> 00:03:37,700
which allowed us to perfectly fit

76
00:03:37,700 --> 00:03:40,620
these images into their container.

77
00:03:40,620 --> 00:03:45,330
And we also had a look at the second core layout technology,

78
00:03:45,330 --> 00:03:46,420
besides Flexbox.

79
00:03:46,420 --> 00:03:48,440
Here on the destinations page

80
00:03:48,440 --> 00:03:51,180
we learned how the CSS Grid works

81
00:03:51,180 --> 00:03:54,440
and what the main difference to Flexbox is.

82
00:03:54,440 --> 00:03:57,580
Flexbox is great for one dimensional layouts,

83
00:03:57,580 --> 00:03:58,930
so row or column.

84
00:03:58,930 --> 00:04:02,150
The Grid is awesome for two dimensional layouts,

85
00:04:02,150 --> 00:04:04,663
so row and column combined.

86
00:04:05,590 --> 00:04:08,020
Even more we combined both of these concepts

87
00:04:08,020 --> 00:04:10,490
here on this page with the Grid being used

88
00:04:10,490 --> 00:04:11,940
for the general concept,

89
00:04:11,940 --> 00:04:15,750
and Flexbox being used twice inside our cards.

90
00:04:15,750 --> 00:04:18,240
Once for the alignment of the image

91
00:04:18,240 --> 00:04:20,940
and the content of the card.

92
00:04:20,940 --> 00:04:22,690
And, as a second point,

93
00:04:22,690 --> 00:04:24,670
for the content to be aligned

94
00:04:24,670 --> 00:04:26,270
the way it is aligned here

95
00:04:26,270 --> 00:04:28,293
in the right part of this card.

96
00:04:30,870 --> 00:04:34,590
This was the core content of this module.

97
00:04:34,590 --> 00:04:38,010
With this you learned even more about HTML and CSS,

98
00:04:38,010 --> 00:04:41,330
and you can already create your own websites.

99
00:04:41,330 --> 00:04:44,490
Nevertheless, this journey just started,

100
00:04:44,490 --> 00:04:46,219
so happy to continue with you

101
00:04:46,219 --> 00:04:50,073
to see what else we will explore throughout this course.