1
00:00:02,270 --> 00:00:05,400
So, what did we learn in this module?

2
00:00:05,400 --> 00:00:09,060
Well, we got started in our Full Week HTML file

3
00:00:09,060 --> 00:00:13,000
and learned about ordered and unordered lists.

4
00:00:13,000 --> 00:00:15,710
Ordered and unordered lists are containers

5
00:00:15,710 --> 00:00:18,060
for our list items,

6
00:00:18,060 --> 00:00:19,360
which we can see here,

7
00:00:19,360 --> 00:00:22,450
and allow us to group specific elements

8
00:00:22,450 --> 00:00:24,540
which belong together.

9
00:00:24,540 --> 00:00:26,220
Now, talking about containers,

10
00:00:26,220 --> 00:00:27,530
we also learned a lot about

11
00:00:27,530 --> 00:00:30,310
the parent-child relationship.

12
00:00:30,310 --> 00:00:32,299
Our main element, for example here,

13
00:00:32,299 --> 00:00:35,250
is the parent for our ordered list.

14
00:00:35,250 --> 00:00:37,990
Our ordered list is the parent for our list items,

15
00:00:37,990 --> 00:00:41,223
where as the list items are children of the ordered list.

16
00:00:42,670 --> 00:00:45,140
We also learned about descendant elements,

17
00:00:45,140 --> 00:00:46,950
which are the direct children

18
00:00:46,950 --> 00:00:48,500
and children of the children.

19
00:00:48,500 --> 00:00:50,540
So, h1 would be a

20
00:00:50,540 --> 00:00:53,580
descendant of the ordered list.

21
00:00:53,580 --> 00:00:55,640
And about ancestors,

22
00:00:55,640 --> 00:00:58,110
here, the ordered list would be an ancestor

23
00:00:58,110 --> 00:01:00,940
of the h2 element, for example.

24
00:01:00,940 --> 00:01:04,080
We also did look at some CSS core concepts.

25
00:01:04,080 --> 00:01:08,690
Namely cascading, inheritance, and specificity.

26
00:01:08,690 --> 00:01:10,480
We learned that it is crucial

27
00:01:10,480 --> 00:01:12,400
to understand these concepts

28
00:01:12,400 --> 00:01:14,130
as these basically define

29
00:01:14,130 --> 00:01:18,070
why and how CSS styles are applied.

30
00:01:18,070 --> 00:01:20,620
Inheritance defines that

31
00:01:20,620 --> 00:01:21,940
selected container rules

32
00:01:21,940 --> 00:01:24,010
apply to descendants.

33
00:01:24,010 --> 00:01:24,960
As I said,

34
00:01:24,960 --> 00:01:27,580
the common sense helps a lot here.

35
00:01:27,580 --> 00:01:29,920
Properties like the width, for example,

36
00:01:29,920 --> 00:01:31,850
is not inherited.

37
00:01:31,850 --> 00:01:34,583
Other properties like the font family are.

38
00:01:35,840 --> 00:01:39,330
The 'cascading' word in Cascading Style Sheets

39
00:01:39,330 --> 00:01:41,350
means that multiple rules

40
00:01:41,350 --> 00:01:44,280
can be applied to the same elements.

41
00:01:44,280 --> 00:01:45,730
We also saw it as in combination

42
00:01:45,730 --> 00:01:48,000
with our concept of inheritance.

43
00:01:48,000 --> 00:01:50,230
So, if you apply a rule to the body,

44
00:01:50,230 --> 00:01:52,020
again, the font family, for example,

45
00:01:52,020 --> 00:01:55,140
this font family is also applied to a descendants,

46
00:01:55,140 --> 00:01:56,870
but also separate rules

47
00:01:56,870 --> 00:01:59,659
can be applied to these descendants.

48
00:01:59,659 --> 00:02:03,710
And if multiple rules can be applied to an elements,

49
00:02:03,710 --> 00:02:07,033
specificity defines which rule wins finally.

50
00:02:08,090 --> 00:02:12,200
We also learned a lot about the CSS box model.

51
00:02:12,200 --> 00:02:14,700
We learned that the CSS elements

52
00:02:14,700 --> 00:02:17,870
are defined by the content,

53
00:02:17,870 --> 00:02:21,030
the padding, the border, and the margin.

54
00:02:21,030 --> 00:02:23,280
And all of these parts of the box model

55
00:02:23,280 --> 00:02:26,670
help us to specifically style our elements

56
00:02:26,670 --> 00:02:29,510
exactly the way we want them to be.

57
00:02:29,510 --> 00:02:32,750
Further, we learned about HTML layouts.

58
00:02:32,750 --> 00:02:34,530
So, we use semantic elements

59
00:02:34,530 --> 00:02:36,770
to group parts of our website.

60
00:02:36,770 --> 00:02:39,420
Here, for example, main and footer.

61
00:02:39,420 --> 00:02:40,630
On our Full Week page,

62
00:02:40,630 --> 00:02:43,030
we had the header and the main element,

63
00:02:43,030 --> 00:02:45,193
just to give you some examples here.

64
00:02:46,420 --> 00:02:48,080
Besides that, we learned about

65
00:02:48,080 --> 00:02:49,673
different selectors.

66
00:02:50,560 --> 00:02:52,950
In our CSS files,

67
00:02:52,950 --> 00:02:54,733
for example, for a full week,

68
00:02:54,733 --> 00:02:57,240
we have the normal type selector,

69
00:02:57,240 --> 00:02:59,290
which selects the element type.

70
00:02:59,290 --> 00:03:00,810
We have pseudo selectors

71
00:03:00,810 --> 00:03:02,300
like hover here.

72
00:03:02,300 --> 00:03:03,133
And,

73
00:03:04,370 --> 00:03:07,610
we also have class and ID selectors,

74
00:03:07,610 --> 00:03:10,950
which allow us to, well, specifically elements

75
00:03:10,950 --> 00:03:14,223
with that specific ID or that specific class.

76
00:03:15,090 --> 00:03:17,010
We also learned about combinators,

77
00:03:17,010 --> 00:03:18,350
for example, right here,

78
00:03:18,350 --> 00:03:21,140
which allow us to specifically select elements,

79
00:03:21,140 --> 00:03:23,660
which are part of another element.

80
00:03:23,660 --> 00:03:25,733
So, nest it into another element.

81
00:03:26,910 --> 00:03:28,750
Talking about classes down here,

82
00:03:28,750 --> 00:03:31,390
we also learned about this concept.

83
00:03:31,390 --> 00:03:34,310
Previously, we only knew about

84
00:03:34,310 --> 00:03:35,650
type selectors

85
00:03:36,750 --> 00:03:37,740
or IDs,

86
00:03:37,740 --> 00:03:38,573
like here,

87
00:03:39,880 --> 00:03:41,750
and we had a very close look

88
00:03:41,750 --> 00:03:42,970
at the difference between

89
00:03:42,970 --> 00:03:45,193
block and inline elements.

90
00:03:46,460 --> 00:03:47,700
We saw this, right here,

91
00:03:47,700 --> 00:03:49,350
at the example of our

92
00:03:49,350 --> 00:03:51,080
Upcoming Challenges page

93
00:03:51,080 --> 00:03:52,090
in our header,

94
00:03:52,090 --> 00:03:53,480
we have an H1 element,

95
00:03:53,480 --> 00:03:55,150
a block element,

96
00:03:55,150 --> 00:03:57,030
paragraph block element,

97
00:03:57,030 --> 00:03:59,040
and an anchor tag in an element.

98
00:03:59,040 --> 00:04:01,050
And we learned about the differences

99
00:04:01,050 --> 00:04:03,030
between these elements.

100
00:04:03,030 --> 00:04:04,890
Block elements always use

101
00:04:04,890 --> 00:04:07,200
the entire width of the page by default,

102
00:04:07,200 --> 00:04:09,470
and are displayed one after another.

103
00:04:09,470 --> 00:04:10,930
So, line by line.

104
00:04:10,930 --> 00:04:12,440
Inline elements are displayed

105
00:04:12,440 --> 00:04:15,440
next to each other and only use the space

106
00:04:15,440 --> 00:04:17,392
they need to display the content.

107
00:04:18,550 --> 00:04:20,220
We learned about the differences

108
00:04:20,220 --> 00:04:22,680
when it comes to applying vertical margins

109
00:04:22,680 --> 00:04:25,310
or padding to inline elements.

110
00:04:25,310 --> 00:04:27,430
And we also learned that some limitations,

111
00:04:27,430 --> 00:04:29,600
for example, vertical margins

112
00:04:29,600 --> 00:04:32,860
not being applicable to inline elements

113
00:04:32,860 --> 00:04:35,520
are only true for so-called

114
00:04:35,520 --> 00:04:37,570
non-replaced inline elements,

115
00:04:37,570 --> 00:04:39,400
like the anchor tag.

116
00:04:39,400 --> 00:04:41,340
For replaced inline elements

117
00:04:41,340 --> 00:04:44,660
like our image on the landing page, here,

118
00:04:44,660 --> 00:04:46,313
this is not the case.

119
00:04:47,750 --> 00:04:49,550
Finally, we also had a look

120
00:04:49,550 --> 00:04:52,590
at the concept of margin collapsing.

121
00:04:52,590 --> 00:04:55,310
For example, in our different challenges

122
00:04:55,310 --> 00:04:56,667
we have for the different days,

123
00:04:56,667 --> 00:05:00,080
here, we learned that in certain situations,

124
00:05:00,080 --> 00:05:02,920
top and bottom margins are collapsing.

125
00:05:02,920 --> 00:05:05,190
Meaning, if we have a bottom margin of

126
00:05:05,190 --> 00:05:07,140
24 for this element

127
00:05:07,140 --> 00:05:08,390
and the top margin of

128
00:05:08,390 --> 00:05:10,340
24 for the following element,

129
00:05:10,340 --> 00:05:12,230
the distance between these two elements

130
00:05:12,230 --> 00:05:14,460
is not 48, but 24.

131
00:05:14,460 --> 00:05:16,763
That's the concept of margin collapsing.

132
00:05:18,090 --> 00:05:20,050
So, this was a long module

133
00:05:20,050 --> 00:05:22,370
with a lot of important content.

134
00:05:22,370 --> 00:05:23,840
But the great thing now is

135
00:05:23,840 --> 00:05:25,230
with these concepts

136
00:05:25,230 --> 00:05:28,070
and the concepts of the previous modules in mind,

137
00:05:28,070 --> 00:05:30,420
we can now finish this project

138
00:05:30,420 --> 00:05:33,840
and continue with an even better project.

139
00:05:33,840 --> 00:05:35,250
Really looking forward to this.

140
00:05:35,250 --> 00:05:37,633
So, let's continue with the next module.