So, what did we learn in this module?
Well, we got started in our Full Week HTML file
and learned about ordered and unordered lists.
Ordered and unordered lists are containers
for our list items,
which we can see here,
and allow us to group specific elements
which belong together.
Now, talking about containers,
we also learned a lot about
the parent-child relationship.
Our main element, for example here,
is the parent for our ordered list.
Our ordered list is the parent for our list items,
where as the list items are children of the ordered list.
We also learned about descendant elements,
which are the direct children
and children of the children.
So, h1 would be a
descendant of the ordered list.
And about ancestors,
here, the ordered list would be an ancestor
of the h2 element, for example.
We also did look at some CSS core concepts.
Namely cascading, inheritance, and specificity.
We learned that it is crucial
to understand these concepts
as these basically define
why and how CSS styles are applied.
Inheritance defines that
selected container rules
apply to descendants.
As I said,
the common sense helps a lot here.
Properties like the width, for example,
is not inherited.
Other properties like the font family are.
The 'cascading' word in Cascading Style Sheets
means that multiple rules
can be applied to the same elements.
We also saw it as in combination
with our concept of inheritance.
So, if you apply a rule to the body,
again, the font family, for example,
this font family is also applied to a descendants,
but also separate rules
can be applied to these descendants.
And if multiple rules can be applied to an elements,
specificity defines which rule wins finally.
We also learned a lot about the CSS box model.
We learned that the CSS elements
are defined by the content,
the padding, the border, and the margin.
And all of these parts of the box model
help us to specifically style our elements
exactly the way we want them to be.
Further, we learned about HTML layouts.
So, we use semantic elements
to group parts of our website.
Here, for example, main and footer.
On our Full Week page,
we had the header and the main element,
just to give you some examples here.
Besides that, we learned about
different selectors.
In our CSS files,
for example, for a full week,
we have the normal type selector,
which selects the element type.
We have pseudo selectors
like hover here.
And,
we also have class and ID selectors,
which allow us to, well, specifically elements
with that specific ID or that specific class.
We also learned about combinators,
for example, right here,
which allow us to specifically select elements,
which are part of another element.
So, nest it into another element.
Talking about classes down here,
we also learned about this concept.
Previously, we only knew about
type selectors
or IDs,
like here,
and we had a very close look
at the difference between
block and inline elements.
We saw this, right here,
at the example of our
Upcoming Challenges page
in our header,
we have an H1 element,
a block element,
paragraph block element,
and an anchor tag in an element.
And we learned about the differences
between these elements.
Block elements always use
the entire width of the page by default,
and are displayed one after another.
So, line by line.
Inline elements are displayed
next to each other and only use the space
they need to display the content.
We learned about the differences
when it comes to applying vertical margins
or padding to inline elements.
And we also learned that some limitations,
for example, vertical margins
not being applicable to inline elements
are only true for so-called
non-replaced inline elements,
like the anchor tag.
For replaced inline elements
like our image on the landing page, here,
this is not the case.
Finally, we also had a look
at the concept of margin collapsing.
For example, in our different challenges
we have for the different days,
here, we learned that in certain situations,
top and bottom margins are collapsing.
Meaning, if we have a bottom margin of
24 for this element
and the top margin of
24 for the following element,
the distance between these two elements
is not 48, but 24.
That's the concept of margin collapsing.
So, this was a long module
with a lot of important content.
But the great thing now is
with these concepts
and the concepts of the previous modules in mind,
we can now finish this project
and continue with an even better project.
Really looking forward to this.
So, let's continue with the next module.