Up to this point,
we always worked with one single HTML file.
So our website is made up of one HTML document,
and that's okay.
Some sites don't need more than one document,
but here I actually do want a second document.
I want a second document,
which basically shows us a preview
of the challenges for the rest of this week,
because on the main page,
we have the daily challenge, so for today,
and we would probably adjust this every day.
But then I also want a second page
where I can already see my goals for the other days,
or for the next couple of days of this week.
And therefore I'll add a new HTML file,
a new page for this website,
in that same directory.
And you can name this file,
however you want,
you can't name it Index HTML,
because dad file name is already taken,
and I'll therefore name it "full-week.HTML".
Now that's a second HTML document.
And in there,
I want to have a content
for that preview off my challenges for the week.
And of course,
I also want to set some styles then.
Now for this,
the very first step now should be
that we create our HTML skeleton,
because we learned about this skeleton
with DOCTYPE HTML.
Head, body,
and every HTML document should have this skeleton.
So we want to create it here again,
but instead of typing it all manually,
Visual Studio Code has a nice convenience feature
for us here.
If you just type an exclamation mark,
you should get this auto suggestion pop up here.
And if you then hit enter, this skeleton is created for you.
It actually has more elements
than the skeleton on the first page,
we have these meta elements,
which we haven't seen before,
and we have this lang attribute on HTML,
but we can ignore this for the moment,
and just fill out the title,
and choose a title of our choice.
For example,
"my upcoming challenges".
And then add the body off this page.
Now a quick word about this lang attribute
and those extra meta elements,
this lang attribute defines
the language we're using on this page and it's optional,
but you can add it,
and it will add it to the first page as well, therefore,
and make it clear that I'm using English as a language here.
This can help if you, for example,
have different documents in different languages,
and you want search engines
to pick up the language correctly,
but also screen readers
to understand which language you're actually using,
because it's, of course, not necessarily English,
it could be German or French.
So adding this doesn't hurt.
Now, the other meta elements here
are not too important for us right now.
With meta charset UTF-8,
We're basically just telling the browser
which characters we're using on this screen.
And we can copy this to the first page as well,
but at the moment it won't make any difference at all,
but adding it also doesn't hurt.
This is a line of code, which we can remove here.
We don't need it at the moment.
And then this here,
that will become more important later,
once we talk about responsive websites
and responsive website designs,
which don't just work on a desktop browser, but instead,
which also look good on mobile phones.
So if the available width is way smaller,
then this will become important.
At the moment we can remove it, because at the moment,
we're just focusing on this desktop website,
and we're going to dive into responsive web design,
which also looks good on other devices later.
So then, for now,
that's the adjusted skeleton for this second HTML page.
And now I want to link to this page from my first page,
and there we have this paragraph with a link,
and I'll use this paragraph
and just change the text slightly,
instead of linking to some learning resources or Google,
actually in this case, I'll just say, "explore the",
and then inside of the link, I'll say "full week".
So here, I'll say "full week",
and now I want to link to this other HTML file.
And that's easy,
we can link to a full URL as we did it here for Google,
but you can also link to another HTML file
by just providing a relative path to this file.
In this case,
I want to just link to full week HTML.
And since that's in the same folder as index HTML,
we can just use that file name
to create a link to that file.
And if I now save this, maybe even restructure this,
because I think that's also very readable.
If I saved this,
now we have this text and if I click this link,
I'm taken to that second HTML file,
as you can tell by the title in that tab here.
But of course we have no content there yet,
because that is something which we have to add now.