You finished this module.
Congratulations.
This was a lot of content,
a lot of important content though,
to make sure you can grow further as developer.
Which, by the way, is something you already are.
You developed your second website.
That's really awesome.
Whilst developing this website,
you learned a lot about HTML and CSS though.
On the index HTML file, for example,
we implemented again a semantic structure inside the body.
So, with our header, with the main element,
now with also adding the section element.
This helped us to create an entire landing page here,
a structured landing page.
On this landing page,
you also implemented a navigation bar.
Here in our header, we added the page logo,
this one right here.
But then, inside the nav element,
we used a list to be able to navigate
to different places on our website.
We also added this dummy link for the about page here.
This is something you can of course add on your own
to further practice what we learned.
Besides these concepts, we also learned a lot about
how to work on the layout of a website.
We did this with two very important core technologies,
CSS with Flexbox and the Grid.
We started with Flexbox here in our style CSS file.
We learned a lot about how Flexbox works
and how we can use it well to align our items.
We did this, for example, here
for our different destinations,
which we can find
down here.
We learned that we can use the flex container concept
to have full control over the flex items.
We also learned about properties like flex direction,
which defined whether the items should be positioned
next to each other in a row,
or below each other as a column.
We learned about flex-wrap and also about justify-content,
which helps us to efficiently manage the way our elements,
our items are displayed in our flex container.
Besides that, we also learned more about images.
Besides normal images, imported or added
with the image element,
we also learned how we can use background images.
This background image here is special
in a way that we additionally dive deeper
into the way we can create headers,
which are basically, well,
above an element,
here above the background image.
This led us to another important CSS concept,
the concept of positioning elements.
We learned about the default document flow,
positioning each block element one after another,
and we learned that we can break this default view
with different values
which are added to the position property.
Specifically, position absolute and position fixed.
And we applied all of these concepts,
all of these values, also into our project.
Here, for example,
we used position absolute for our header.
Besides some more advanced concepts,
like margin collapsing
which can occur between different block elements,
and also in a parent-child relationships,
we dive deeper into selected properties.
For example, object fit,
which allowed us to perfectly fit
these images into their container.
And we also had a look at the second core layout technology,
besides Flexbox.
Here on the destinations page
we learned how the CSS Grid works
and what the main difference to Flexbox is.
Flexbox is great for one dimensional layouts,
so row or column.
The Grid is awesome for two dimensional layouts,
so row and column combined.
Even more we combined both of these concepts
here on this page with the Grid being used
for the general concept,
and Flexbox being used twice inside our cards.
Once for the alignment of the image
and the content of the card.
And, as a second point,
for the content to be aligned
the way it is aligned here
in the right part of this card.
This was the core content of this module.
With this you learned even more about HTML and CSS,
and you can already create your own websites.
Nevertheless, this journey just started,
so happy to continue with you
to see what else we will explore throughout this course.