Our project will follow a certain structure
and you might remember this page here again
from the MDN Web Docs.
This was about the document and website structure,
and we learned that we have basic sections
of a document we can use to give our website some structure,
some semantic meaning in the end.
We learned about elements like the header, for example,
or the main element or the footer.
We also see elements
like the navigation bar here, for example.
And if we scroll down a bit further,
we see a typical website
with all these different elements here.
Now, feel free to dive deeper here once again
but we can use the basic concept
of this structure in our project now,
especially the header, the navigation bar,
the main part, the sections and the footer.
So keep these elements in mind or look it up here
and we'll now switch to our project
and see how we can implement this structure there.
This is our website, the landing page
of the website we are going to build.
And if you look at it,
you can already see some different parts this website has.
Let's get started with the top of the page here, this part.
We see that the image here is basically part
of the section, and also of the next section.
We will discover a bit later how this works
but if we ignore the fact that the image here
is also part of this part of the image,
well, then this could be a great header, right?
It's the top part of our page.
It holds our logo, Travel Goals to the left,
and it holds additional information.
These two items here.
This is a so-called navigation bar, a nav element.
We also just saw on the MDN.
So that's the first core structure of our website.
A header with our logo,
which contains the navigation bar,
so links which allow us to navigate to other pages
of our website.
Below our header, we have another huge area of our website.
This area could be the main part of our website.
It holds the core content
why users might visit our website.
And in this main area,
semantically created with the main element,
we have two additional, well, sections.
This is the first one,
and well, great thing, we also have a section element,
so adding it here makes a lot of sense,
and we have this section area,
which is well, the second section.
So that's the second core structure
of our website.
It's the main part with two different sections.
One holding the Joe's Travel Page part
and also this image.
It's called a so-called hero image,
so a big image,
which captures all the attention of the visitor
once he or she visits the landing page
and below, we have the second section
with our highlight destinations.
There is one third part of this landing page though
and you might guess which one that is.
It's that black lower part here
with our social media links,
and this is a perfect footer.
So this is the structure we are now going to recreate
in our code, in our HTML file
and then we will start bringing this to life,
so adding content to it.
Back in the code, let's now add content to our body element
and as we just learned,
we will get started with the header,
which will hold our logo of our website,
and additionally, a nav element, N-A-V.
Tab will auto complete this,
which will then hold our links
to other parts of our website.
At the moment, we'll just add the empty elements here,
so we just add the semantical structure of our website.
After the header,
we saw that we have our main part
with this hero image and below, the highlights.
So we create the main part with the main element.
And we add a first section.
Again, that's the section with the background image.
And afterwards, we'll add a second section.
This will then hold our highlights.
This will be our main part of the website.
Now, we'll finish things in the body element
with our footer here,
which will then hold the social media links.
So this is the core structure of our website.
We've finished our skeleton
and with that, we are now ready to bring this page to life,
so let's get started with the header.