Let's dive into these optional lectures.
In case you missed the last text lecture,
please make sure to go back to this lecture
and learn more about these optional lectures.
In short words,
these lectures are just here to create the actual website,
HTML and the CSS code by applying concepts
we learned already throughout the course.
It has nothing to do with the responsive part though.
So no new content, no new concepts
will be explained right here.
So if you want to follow along,
and practice creating websites once again,
then you're very welcome to follow along these lectures.
If you directly want to skip to the responsive part,
then, as I said,
please go back to the text lecture
and find out more about where to continue.
With this out of the way,
we are back on the finished website, because as we know,
we typically look at the structure of the website
that we want to build before we actually build it.
Now, what does this website look like
from a semantical perspective?
You probably saw that we have a quite familiar
structure here on this website,
when comparing it to previous projects created
in this course.
For example here, this black area, this top part here,
which I can quickly highlight for you.
This area is a typical header.
So we use the semantic header element to indicate,
well kind of the header part of our webpage,
which contains the logo and to NAV items,
I'll come back to these in a few seconds though.
The second core part from a semantic point of view is,
well, the area with the main content of this website.
And main already describes what it is.
This area right here.
So actually the entire remaining website could be a perfect
main element, right?
Indicating that this is the core content of this website.
With this rough structure in mind,
we can now dive deeper
into both the header and the main part.
Inside our header we have two separate areas.
One area is here to the left, the logo off that website.
Again, this can simply be plain text,
maybe created as an anchor tag
to add a link which redirects us to this starting page,
to this landing page when we click onto the logo,
so also nothing new.
In the right part of our header,
we have two navigation items,
which brings us already to the next semantic element here.
This could be a perfect NAV element right here,
holding these two links.
Typically these NAV items are links,
redirecting us to other parts of our website.
Such links still are kind of related content, so to say,
or content which can be grouped together,
therefore following the logic learned
throughout this course,
we could simply say that our NAV element right here,
holds an unordered list,
because the order of these two elements here doesn't matter,
which then contains two list items,
which then hold the links,
the anchor tags for the different pages of our website.
So this would be the header part.
For our main part,
we can again find lots of elements
we learned about so far in this course.
The most obvious one is right here, our big headline,
this would be a perfect H1 element actually,
inside our main element.
Besides this H1 element,
our actual content of the page,
so these two cards,
would be a perfect example for a section.
So this entire part here is a section holding the entire
content of this page, meaning the cards in the end.
As you know a section is, again, just a semantic element
when it comes to the website structure,
but that's not perfectly describe what is actually inside
this element.
Inside this element,
we have the two cards as mentioned already,
two cards as two NAV items appear are, again,
content that is kind of related,
or that can be grouped together.
For this, we could also nest an unordered list
into our section here.
So the section element contains an unordered list
which then contains two list item.
The first item right here, first card.
And the second item right there.
Oops, like this.
The second card
So we have section on order list and two list items.
We could now say that our list items simply hold an image,
and an H2 element may be down here,
and a link for example, or button down here,
or we could be even more explicit
from a semantic point of view,
and say that the content of each single list item
is actually an article.
So each list item has a separate article.
So the article of this first list item right here,
would then contain the image.
It has the first element and then two additional elements,
the H2 element right here, and as I said,
maybe a button, hyper reference,
with this add to cart button.
You could also nest these two elements into a different
example, but this is something optional in the end,
which just helps us again to add more structure.
Same thing right here,
we could use another article right there to wrap the content
of the second list item.
And this is actually the core HTML structure
of this website.
In the next lecture, we'll create this logic together.
Now is of course a perfect time for you to practice
this on your own.
You now have the rough structure here,
indicated with this orange boxes.
And if you think back about what we learned so far,
you are hopefully able to kind of recreate the structure.
So good luck with this next challenge.
See you in the next lecture.
Where we'll see how we can solve this together.