1
00:00:02,080 --> 00:00:04,600
Now with all that theory out of the way,

2
00:00:04,600 --> 00:00:08,310
let's get back to our code and let's start writing more code

3
00:00:08,310 --> 00:00:11,450
because that's what we're all here for in the end.

4
00:00:11,450 --> 00:00:14,300
So I am back in that HTML file,

5
00:00:14,300 --> 00:00:17,470
that index HTML file we traded earlier.

6
00:00:17,470 --> 00:00:20,430
And it's still the only file,

7
00:00:20,430 --> 00:00:23,270
I do have a second file in my folder now,

8
00:00:23,270 --> 00:00:25,680
that is a file you don't have right now,

9
00:00:25,680 --> 00:00:27,430
and you don't need right now.

10
00:00:27,430 --> 00:00:31,340
It's just a file for me, that helps me manage my code,

11
00:00:31,340 --> 00:00:33,610
and make it easier for me to provide code

12
00:00:33,610 --> 00:00:35,690
snapshot attachments in this course,

13
00:00:35,690 --> 00:00:39,520
so that's not a file, this gitignore file, which you have.

14
00:00:39,520 --> 00:00:41,750
And therefore this index HTML file

15
00:00:41,750 --> 00:00:44,160
is still the only file we have here.

16
00:00:44,160 --> 00:00:47,560
And now I wanna work towards that end result

17
00:00:47,560 --> 00:00:50,210
we wanna have, towards that first website

18
00:00:50,210 --> 00:00:51,470
we wanna build here.

19
00:00:51,470 --> 00:00:53,770
And that means that for example, here,

20
00:00:53,770 --> 00:00:55,920
instead of saying hello world,

21
00:00:55,920 --> 00:01:00,920
I wanna say, max challenge for, and then the current date,

22
00:01:03,410 --> 00:01:04,690
because, keep in mind,

23
00:01:04,690 --> 00:01:08,470
we're building this daily challenge website,

24
00:01:08,470 --> 00:01:11,950
where we can set ourself a daily challenge

25
00:01:11,950 --> 00:01:14,420
and make it public to the world,

26
00:01:14,420 --> 00:01:16,720
to put some pressure on ourselves.

27
00:01:16,720 --> 00:01:19,930
And therefore, here the title for this website

28
00:01:19,930 --> 00:01:24,930
should be your name, challenge for, and then today's date.

29
00:01:25,800 --> 00:01:30,273
And that could for example be, Wednesday, August 4th,

30
00:01:34,350 --> 00:01:35,880
something like this.

31
00:01:35,880 --> 00:01:38,420
So that's now my new title,

32
00:01:38,420 --> 00:01:41,920
but of course that still just gives us such a heading.

33
00:01:41,920 --> 00:01:45,540
The only thing that changed now is the text content,

34
00:01:45,540 --> 00:01:48,680
but it's still a h1 element.

35
00:01:48,680 --> 00:01:52,330
And hence, if we load this in the browser,

36
00:01:52,330 --> 00:01:55,880
we still just see that text content here,

37
00:01:55,880 --> 00:01:58,970
formatted as such a title.

38
00:01:58,970 --> 00:02:03,320
By the way, make sure you always save your code files

39
00:02:03,320 --> 00:02:05,150
after you change them.

40
00:02:05,150 --> 00:02:07,150
Here in the Visual Studio Code,

41
00:02:07,150 --> 00:02:11,270
you can tell that a file has unsaved changes,

42
00:02:11,270 --> 00:02:15,800
by this white dot, which you see next to the file name.

43
00:02:15,800 --> 00:02:18,090
Now, if you load your page in a browser,

44
00:02:18,090 --> 00:02:20,700
you only see the latest saved version,

45
00:02:20,700 --> 00:02:24,510
so to see those latest changes, you need to save that file,

46
00:02:24,510 --> 00:02:27,270
and you can do that with file, save,

47
00:02:27,270 --> 00:02:29,470
or of course, way quicker,

48
00:02:29,470 --> 00:02:31,870
by using the shortcut which you see here.

49
00:02:31,870 --> 00:02:34,910
And I'm using the shortcut all the time here in this course,

50
00:02:34,910 --> 00:02:38,020
and I recommended you also use it all the time,

51
00:02:38,020 --> 00:02:39,920
whenever you changed something.

52
00:02:39,920 --> 00:02:43,560
Press that shortcut, by default control S,

53
00:02:43,560 --> 00:02:47,400
or on macOS, command S, and ensure that you save

54
00:02:47,400 --> 00:02:50,130
those changes you made to your code.

55
00:02:50,130 --> 00:02:54,890
However, I now wanna add a second HTML element here,

56
00:02:54,890 --> 00:02:57,620
I wanna add more content to this page.

57
00:02:57,620 --> 00:03:02,170
And the content I wanna is the concrete goal I have

58
00:03:02,170 --> 00:03:05,410
for today, which could be that I wanna learn

59
00:03:05,410 --> 00:03:09,760
about the basics of web development,

60
00:03:09,760 --> 00:03:14,760
specifically dive into HTML and CSS.

61
00:03:15,830 --> 00:03:18,350
That could be my goal for today,

62
00:03:18,350 --> 00:03:21,260
that I wanna dive into those technologies.

63
00:03:21,260 --> 00:03:24,050
So that's now the second piece of content I add,

64
00:03:24,050 --> 00:03:26,820
and very important, I add that,

65
00:03:26,820 --> 00:03:30,560
outside of my first HTML element.

66
00:03:30,560 --> 00:03:34,460
So after this closing HTML tag,

67
00:03:34,460 --> 00:03:36,970
I'm adding this plain text like this.

68
00:03:36,970 --> 00:03:40,570
Now if we save it like this, and I reload my page,

69
00:03:40,570 --> 00:03:43,800
we therefore now see this text here.

70
00:03:43,800 --> 00:03:48,800
And that is important and not necessarily obvious,

71
00:03:49,160 --> 00:03:51,660
we see this text here,

72
00:03:51,660 --> 00:03:56,500
even though this is actually not wrapped in HTML tags.

73
00:03:56,500 --> 00:03:59,080
Remember what I said in the last lecture?

74
00:03:59,080 --> 00:04:02,020
That the browser is quite forgiving?

75
00:04:02,020 --> 00:04:04,530
You should describe your content,

76
00:04:04,530 --> 00:04:07,600
because that adds more meaning for search engines

77
00:04:07,600 --> 00:04:10,060
and people with assistive technologies,

78
00:04:10,060 --> 00:04:12,702
but you technically don't have to.

79
00:04:12,702 --> 00:04:15,280
It doesn't matter which element you choose,

80
00:04:15,280 --> 00:04:17,410
or if you use an element at all,

81
00:04:17,410 --> 00:04:20,140
it's just that some meaning might be missing.

82
00:04:20,140 --> 00:04:23,940
And whilst visually, this page works for us,

83
00:04:23,940 --> 00:04:27,760
if we're not blind, people that are blind,

84
00:04:27,760 --> 00:04:32,590
or a search engines would see less than we do at the moment,

85
00:04:32,590 --> 00:04:35,490
they would see that there is some text,

86
00:04:35,490 --> 00:04:38,810
but they wouldn't know if that should actually be a title,

87
00:04:38,810 --> 00:04:42,310
or if it should be just some regular text.

88
00:04:42,310 --> 00:04:46,890
And that's why we should not add plain text like this,

89
00:04:46,890 --> 00:04:50,760
but why we should also wrap this in some HTML tags,

90
00:04:50,760 --> 00:04:53,630
to turn it into an HTML element,

91
00:04:53,630 --> 00:04:55,520
because you want to add meaning

92
00:04:55,520 --> 00:04:59,399
to every piece of content you add to your page.

93
00:04:59,399 --> 00:05:03,040
But what is the meaning of this text here?

94
00:05:03,040 --> 00:05:08,040
It's certainly not another title, we have one main title,

95
00:05:08,110 --> 00:05:13,110
now that's kind of the content that belongs to that title.

96
00:05:13,520 --> 00:05:18,370
So I would say it indeed is just some regular text,

97
00:05:18,370 --> 00:05:21,350
a paragraph of regular text.

98
00:05:21,350 --> 00:05:25,270
And therefore we now wanna use a different HTML element,

99
00:05:25,270 --> 00:05:28,117
we don't want to use a h1 element again.

100
00:05:28,117 --> 00:05:33,117
Now I showed you this HTML element reference on MDN,

101
00:05:33,260 --> 00:05:36,080
and you'll find a link to this reference attached.

102
00:05:36,080 --> 00:05:38,470
And there we can look for another element

103
00:05:38,470 --> 00:05:40,470
that might make sense here.

104
00:05:40,470 --> 00:05:41,950
Now, if you're here for the first time,

105
00:05:41,950 --> 00:05:43,150
this can be overwhelming,

106
00:05:43,150 --> 00:05:44,890
because there are loads of elements,

107
00:05:44,890 --> 00:05:46,870
and hence I'll speed this up a bit.

108
00:05:46,870 --> 00:05:49,060
We know that we have some text content,

109
00:05:49,060 --> 00:05:50,740
so we wanna find a fitting element

110
00:05:50,740 --> 00:05:53,860
for this specific text content.

111
00:05:53,860 --> 00:05:57,030
And we don't really have a quote here,

112
00:05:57,030 --> 00:05:59,520
we also don't really have a figure here,

113
00:05:59,520 --> 00:06:01,010
or anything like that,

114
00:06:01,010 --> 00:06:04,910
but I would say we have a paragraph here,

115
00:06:04,910 --> 00:06:07,720
and that's a very common HTML element.

116
00:06:07,720 --> 00:06:11,410
As a web developer, you're going to use the p element a lot,

117
00:06:11,410 --> 00:06:15,310
because you work with text a lot, with standard text.

118
00:06:15,310 --> 00:06:18,250
And if you have a standard paragraph of text,

119
00:06:18,250 --> 00:06:22,620
that's nothing else than just regular text, the p element,

120
00:06:22,620 --> 00:06:25,130
the paragraph element is your friend.

121
00:06:25,130 --> 00:06:27,730
So therefore here, I'll go back to my code,

122
00:06:27,730 --> 00:06:31,263
and I'll wrap this text with the p tags.

123
00:06:32,180 --> 00:06:34,140
And I'll grab that closing tag here

124
00:06:34,140 --> 00:06:35,673
and add it off of this text.

125
00:06:37,500 --> 00:06:40,900
And now we added our second element,

126
00:06:40,900 --> 00:06:45,160
we turned this plain text into a paragraph element,

127
00:06:45,160 --> 00:06:48,730
where the content now is that text,

128
00:06:48,730 --> 00:06:51,210
but now we added more meaning.

129
00:06:51,210 --> 00:06:54,510
Now, visually, if we reload this page,

130
00:06:54,510 --> 00:06:56,330
it looks exactly as before,

131
00:06:56,330 --> 00:07:00,400
so it has no visual difference here in this case,

132
00:07:00,400 --> 00:07:03,980
because the paragraph text, unlike the heading here,

133
00:07:03,980 --> 00:07:05,090
which we had before,

134
00:07:05,090 --> 00:07:08,800
doesn't get any default styling by the browser.

135
00:07:08,800 --> 00:07:10,830
But from a semantic perspective,

136
00:07:10,830 --> 00:07:13,840
so to meaning that is presented to search engines

137
00:07:13,840 --> 00:07:18,210
and assistive technologies, we did now improve our content.

138
00:07:18,210 --> 00:07:22,437
And now the second HTML element we added therefore.