1
00:00:02,100 --> 00:00:03,350
Up to this point,

2
00:00:03,350 --> 00:00:07,510
we always worked with one single HTML file.

3
00:00:07,510 --> 00:00:11,950
So our website is made up of one HTML document,

4
00:00:11,950 --> 00:00:13,620
and that's okay.

5
00:00:13,620 --> 00:00:16,500
Some sites don't need more than one document,

6
00:00:16,500 --> 00:00:20,050
but here I actually do want a second document.

7
00:00:20,050 --> 00:00:22,010
I want a second document,

8
00:00:22,010 --> 00:00:24,830
which basically shows us a preview

9
00:00:24,830 --> 00:00:29,000
of the challenges for the rest of this week,

10
00:00:29,000 --> 00:00:30,130
because on the main page,

11
00:00:30,130 --> 00:00:33,350
we have the daily challenge, so for today,

12
00:00:33,350 --> 00:00:36,010
and we would probably adjust this every day.

13
00:00:36,010 --> 00:00:38,470
But then I also want a second page

14
00:00:38,470 --> 00:00:41,880
where I can already see my goals for the other days,

15
00:00:41,880 --> 00:00:44,423
or for the next couple of days of this week.

16
00:00:45,280 --> 00:00:48,650
And therefore I'll add a new HTML file,

17
00:00:48,650 --> 00:00:50,740
a new page for this website,

18
00:00:50,740 --> 00:00:52,920
in that same directory.

19
00:00:52,920 --> 00:00:54,220
And you can name this file,

20
00:00:54,220 --> 00:00:55,240
however you want,

21
00:00:55,240 --> 00:00:57,230
you can't name it Index HTML,

22
00:00:57,230 --> 00:00:59,690
because dad file name is already taken,

23
00:00:59,690 --> 00:01:04,019
and I'll therefore name it "full-week.HTML".

24
00:01:04,019 --> 00:01:06,740
Now that's a second HTML document.

25
00:01:06,740 --> 00:01:07,720
And in there,

26
00:01:07,720 --> 00:01:08,980
I want to have a content

27
00:01:08,980 --> 00:01:13,510
for that preview off my challenges for the week.

28
00:01:13,510 --> 00:01:14,343
And of course,

29
00:01:14,343 --> 00:01:16,183
I also want to set some styles then.

30
00:01:17,110 --> 00:01:18,030
Now for this,

31
00:01:18,030 --> 00:01:20,470
the very first step now should be

32
00:01:20,470 --> 00:01:23,960
that we create our HTML skeleton,

33
00:01:23,960 --> 00:01:26,330
because we learned about this skeleton

34
00:01:26,330 --> 00:01:28,170
with DOCTYPE HTML.

35
00:01:28,170 --> 00:01:29,280
Head, body,

36
00:01:29,280 --> 00:01:33,053
and every HTML document should have this skeleton.

37
00:01:34,010 --> 00:01:36,190
So we want to create it here again,

38
00:01:36,190 --> 00:01:38,780
but instead of typing it all manually,

39
00:01:38,780 --> 00:01:42,060
Visual Studio Code has a nice convenience feature

40
00:01:42,060 --> 00:01:43,470
for us here.

41
00:01:43,470 --> 00:01:46,690
If you just type an exclamation mark,

42
00:01:46,690 --> 00:01:50,700
you should get this auto suggestion pop up here.

43
00:01:50,700 --> 00:01:55,003
And if you then hit enter, this skeleton is created for you.

44
00:01:56,130 --> 00:01:57,840
It actually has more elements

45
00:01:57,840 --> 00:02:00,190
than the skeleton on the first page,

46
00:02:00,190 --> 00:02:02,210
we have these meta elements,

47
00:02:02,210 --> 00:02:03,620
which we haven't seen before,

48
00:02:03,620 --> 00:02:06,760
and we have this lang attribute on HTML,

49
00:02:06,760 --> 00:02:09,130
but we can ignore this for the moment,

50
00:02:09,130 --> 00:02:11,020
and just fill out the title,

51
00:02:11,020 --> 00:02:13,240
and choose a title of our choice.

52
00:02:13,240 --> 00:02:14,073
For example,

53
00:02:14,073 --> 00:02:17,010
"my upcoming challenges".

54
00:02:17,010 --> 00:02:20,290
And then add the body off this page.

55
00:02:20,290 --> 00:02:22,800
Now a quick word about this lang attribute

56
00:02:22,800 --> 00:02:25,130
and those extra meta elements,

57
00:02:25,130 --> 00:02:26,940
this lang attribute defines

58
00:02:26,940 --> 00:02:31,440
the language we're using on this page and it's optional,

59
00:02:31,440 --> 00:02:32,680
but you can add it,

60
00:02:32,680 --> 00:02:35,770
and it will add it to the first page as well, therefore,

61
00:02:35,770 --> 00:02:39,950
and make it clear that I'm using English as a language here.

62
00:02:39,950 --> 00:02:41,810
This can help if you, for example,

63
00:02:41,810 --> 00:02:44,230
have different documents in different languages,

64
00:02:44,230 --> 00:02:45,760
and you want search engines

65
00:02:45,760 --> 00:02:47,530
to pick up the language correctly,

66
00:02:47,530 --> 00:02:48,860
but also screen readers

67
00:02:48,860 --> 00:02:52,740
to understand which language you're actually using,

68
00:02:52,740 --> 00:02:55,630
because it's, of course, not necessarily English,

69
00:02:55,630 --> 00:02:57,930
it could be German or French.

70
00:02:57,930 --> 00:02:59,793
So adding this doesn't hurt.

71
00:03:00,640 --> 00:03:02,890
Now, the other meta elements here

72
00:03:02,890 --> 00:03:05,600
are not too important for us right now.

73
00:03:05,600 --> 00:03:08,150
With meta charset UTF-8,

74
00:03:08,150 --> 00:03:10,210
We're basically just telling the browser

75
00:03:10,210 --> 00:03:13,100
which characters we're using on this screen.

76
00:03:13,100 --> 00:03:16,660
And we can copy this to the first page as well,

77
00:03:16,660 --> 00:03:19,740
but at the moment it won't make any difference at all,

78
00:03:19,740 --> 00:03:22,320
but adding it also doesn't hurt.

79
00:03:22,320 --> 00:03:25,750
This is a line of code, which we can remove here.

80
00:03:25,750 --> 00:03:27,950
We don't need it at the moment.

81
00:03:27,950 --> 00:03:29,510
And then this here,

82
00:03:29,510 --> 00:03:31,730
that will become more important later,

83
00:03:31,730 --> 00:03:34,370
once we talk about responsive websites

84
00:03:34,370 --> 00:03:37,300
and responsive website designs,

85
00:03:37,300 --> 00:03:41,290
which don't just work on a desktop browser, but instead,

86
00:03:41,290 --> 00:03:44,670
which also look good on mobile phones.

87
00:03:44,670 --> 00:03:47,600
So if the available width is way smaller,

88
00:03:47,600 --> 00:03:49,350
then this will become important.

89
00:03:49,350 --> 00:03:52,530
At the moment we can remove it, because at the moment,

90
00:03:52,530 --> 00:03:56,050
we're just focusing on this desktop website,

91
00:03:56,050 --> 00:03:59,180
and we're going to dive into responsive web design,

92
00:03:59,180 --> 00:04:02,353
which also looks good on other devices later.

93
00:04:03,640 --> 00:04:04,473
So then, for now,

94
00:04:04,473 --> 00:04:09,473
that's the adjusted skeleton for this second HTML page.

95
00:04:09,620 --> 00:04:14,460
And now I want to link to this page from my first page,

96
00:04:14,460 --> 00:04:17,519
and there we have this paragraph with a link,

97
00:04:17,519 --> 00:04:19,070
and I'll use this paragraph

98
00:04:19,070 --> 00:04:21,283
and just change the text slightly,

99
00:04:22,190 --> 00:04:26,670
instead of linking to some learning resources or Google,

100
00:04:26,670 --> 00:04:30,940
actually in this case, I'll just say, "explore the",

101
00:04:30,940 --> 00:04:34,290
and then inside of the link, I'll say "full week".

102
00:04:34,290 --> 00:04:37,690
So here, I'll say "full week",

103
00:04:37,690 --> 00:04:40,853
and now I want to link to this other HTML file.

104
00:04:41,700 --> 00:04:42,910
And that's easy,

105
00:04:42,910 --> 00:04:47,900
we can link to a full URL as we did it here for Google,

106
00:04:47,900 --> 00:04:51,390
but you can also link to another HTML file

107
00:04:51,390 --> 00:04:55,030
by just providing a relative path to this file.

108
00:04:55,030 --> 00:04:56,180
In this case,

109
00:04:56,180 --> 00:04:59,390
I want to just link to full week HTML.

110
00:04:59,390 --> 00:05:02,660
And since that's in the same folder as index HTML,

111
00:05:02,660 --> 00:05:04,690
we can just use that file name

112
00:05:04,690 --> 00:05:06,723
to create a link to that file.

113
00:05:08,250 --> 00:05:13,070
And if I now save this, maybe even restructure this,

114
00:05:13,070 --> 00:05:15,590
because I think that's also very readable.

115
00:05:15,590 --> 00:05:16,893
If I saved this,

116
00:05:17,850 --> 00:05:21,800
now we have this text and if I click this link,

117
00:05:21,800 --> 00:05:24,660
I'm taken to that second HTML file,

118
00:05:24,660 --> 00:05:27,590
as you can tell by the title in that tab here.

119
00:05:27,590 --> 00:05:29,970
But of course we have no content there yet,

120
00:05:29,970 --> 00:05:32,923
because that is something which we have to add now.