1
00:00:02,000 --> 00:00:04,000
In that hero.js file.

2
00:00:04,000 --> 00:00:06,000
We wanna build this hero component.

3
00:00:06,000 --> 00:00:10,000
So there's welcome component on the starting page

4
00:00:10,000 --> 00:00:14,000
where we present ourselves and therefore, of course

5
00:00:14,000 --> 00:00:18,000
create a functional component again and export that just

6
00:00:18,000 --> 00:00:21,000
as we always did it throughout this course.

7
00:00:21,000 --> 00:00:24,000
And now in this hero component

8
00:00:24,000 --> 00:00:25,000
I wanna return a section.

9
00:00:25,000 --> 00:00:28,000
So to standard section element.

10
00:00:28,000 --> 00:00:29,000
And in that section

11
00:00:29,000 --> 00:00:32,000
I then wanna have a couple of different elements.

12
00:00:32,000 --> 00:00:35,000
I wanna have an image where I show myself

13
00:00:35,000 --> 00:00:40,000
I wanna have some texts where I say hi, I'm Max.

14
00:00:40,000 --> 00:00:44,000
And some texts below that, where I introduce myself

15
00:00:44,000 --> 00:00:48,000
and write a couple of words about what this blog is about.

16
00:00:48,000 --> 00:00:51,000
Now I'll wrap the image in a div for styling purposes

17
00:00:51,000 --> 00:00:56,000
and we're going to add the actual image in a second.

18
00:00:56,000 --> 00:00:57,000
Below that div I then wanna

19
00:00:57,000 --> 00:01:01,000
have a h1 tag where I say, Hi, I'm Max.

20
00:01:03,000 --> 00:01:06,000
And of course, plug in your name here.

21
00:01:06,000 --> 00:01:09,000
And then below that a paragraph where I say something

22
00:01:09,000 --> 00:01:13,000
like I blog about web development

23
00:01:13,000 --> 00:01:18,000
especially front-end frameworks like Angular or React

24
00:01:20,000 --> 00:01:21,000
something like this.

25
00:01:21,000 --> 00:01:24,000
Of course feel free to fine tune this with your own texts

26
00:01:24,000 --> 00:01:27,000
and later also with your own image.

27
00:01:28,000 --> 00:01:30,000
Now we need some styling here.

28
00:01:30,000 --> 00:01:32,000
And for div we added to this hero modules

29
00:01:32,000 --> 00:01:35,000
CSS file and the effort to apply

30
00:01:35,000 --> 00:01:38,000
it we should import our classes from that file

31
00:01:38,000 --> 00:01:41,000
since we are using a .module.css file

32
00:01:41,000 --> 00:01:44,000
we are using CSS modules

33
00:01:44,000 --> 00:01:46,000
which means that the class is defined

34
00:01:46,000 --> 00:01:50,000
in that file will be transformed to behind the scenes, such

35
00:01:50,000 --> 00:01:54,000
that the styles effectively are scoped to this component.

36
00:01:54,000 --> 00:01:57,000
And don't spill over to other components.

37
00:01:57,000 --> 00:02:01,000
Even if we use the same elements and class name stair

38
00:02:01,000 --> 00:02:03,000
that's a pretty nice feature

39
00:02:03,000 --> 00:02:05,000
and that's why we're using it here.

40
00:02:05,000 --> 00:02:07,000
We have used it throughout this course already though.

41
00:02:08,000 --> 00:02:12,000
Now, which classes should be applied while on the section

42
00:02:12,000 --> 00:02:17,000
you'd wanna add a class of hero, which is simply one

43
00:02:17,000 --> 00:02:21,000
of the classes to find in the css file.

44
00:02:21,000 --> 00:02:26,000
On that image div I'll, add a class of image.

45
00:02:27,000 --> 00:02:30,000
And I don't have any classes on the h1

46
00:02:30,000 --> 00:02:35,000
and paragraph elements, because these will be styled

47
00:02:35,000 --> 00:02:38,000
with nested selectors inside of that css file.

48
00:02:40,000 --> 00:02:41,000
Okay, so now we got this.

49
00:02:41,000 --> 00:02:46,000
Now for the image I wanna use the next image component.

50
00:02:47,000 --> 00:02:51,000
So when we get this automatically optimized image

51
00:02:51,000 --> 00:02:54,000
which is automatically reduced in size

52
00:02:54,000 --> 00:02:57,000
and where different images are then loaded

53
00:02:57,000 --> 00:02:59,000
for different devices possibly.

54
00:02:59,000 --> 00:03:01,000
And which is also lazy loaded.

55
00:03:01,000 --> 00:03:03,000
And therefore we can import

56
00:03:03,000 --> 00:03:08,000
the image component from next image

57
00:03:08,000 --> 00:03:12,000
and of course, import should start with a lower case I,

58
00:03:12,000 --> 00:03:15,000
and then we can use this image component here inside

59
00:03:15,000 --> 00:03:16,000
of this image div.

60
00:03:16,000 --> 00:03:21,000
Now this image component needs a couple of attributes

61
00:03:22,000 --> 00:03:24,000
a couple of props.

62
00:03:24,000 --> 00:03:27,000
It needs to know its source, so a path

63
00:03:27,000 --> 00:03:31,000
to the image that should be loaded a path to the base image

64
00:03:31,000 --> 00:03:33,000
which is then automatically optimized

65
00:03:33,000 --> 00:03:35,000
and transformed by next.

66
00:03:35,000 --> 00:03:37,000
A alt text where I will simply

67
00:03:37,000 --> 00:03:41,000
say an image showing max, because I will soon add

68
00:03:41,000 --> 00:03:46,000
an image that shows myself and then a width and a height.

69
00:03:46,000 --> 00:03:49,000
And here you should kind of calculate

70
00:03:49,000 --> 00:03:51,000
and estimate which width

71
00:03:51,000 --> 00:03:53,000
and height you will need for your image.

72
00:03:54,000 --> 00:03:56,000
Now regarding the image file

73
00:03:56,000 --> 00:04:00,000
you find an example image attached, which you can use

74
00:04:00,000 --> 00:04:03,000
but of course you can also bring your own image.

75
00:04:03,000 --> 00:04:06,000
You don't have to use the one you find attached.

76
00:04:06,000 --> 00:04:11,000
Attached you, however, find a max.png file and you can drag

77
00:04:12,000 --> 00:04:16,000
and drop that into that public folder of your project.

78
00:04:16,000 --> 00:04:21,000
Though, there, I will actually create a sub folder images

79
00:04:21,000 --> 00:04:23,000
and in there I'll create another

80
00:04:23,000 --> 00:04:26,000
sub folder, site and I'll then drag

81
00:04:26,000 --> 00:04:30,000
this max.png file into that site folder.

82
00:04:30,000 --> 00:04:34,000
Now I'll do that because soon I will

83
00:04:34,000 --> 00:04:38,000
have another folder inside of images

84
00:04:38,000 --> 00:04:41,000
side by side to the site folder

85
00:04:41,000 --> 00:04:44,000
with the images for the block posts.

86
00:04:44,000 --> 00:04:47,000
That's why I have to separate site sub folder

87
00:04:47,000 --> 00:04:49,000
for images that belong to the site

88
00:04:49,000 --> 00:04:51,000
but not to the blog posts.

89
00:04:51,000 --> 00:04:52,000
For the moment of course,

90
00:04:52,000 --> 00:04:54,000
it's the only image we have though

91
00:04:54,000 --> 00:04:58,000
and now we wanna point at it with our image component.

92
00:04:58,000 --> 00:05:00,000
So they have a source here

93
00:05:00,000 --> 00:05:03,000
should be a path to that image.

94
00:05:03,000 --> 00:05:05,000
Now you learned that the path you

95
00:05:05,000 --> 00:05:08,000
construct here is ignoring the fact

96
00:05:08,000 --> 00:05:12,000
that the image lives in a public folder.

97
00:05:12,000 --> 00:05:15,000
Because content from the public folder is exposed

98
00:05:15,000 --> 00:05:19,000
on the root level of the running website in the end.

99
00:05:19,000 --> 00:05:22,000
So you don't need to dive into public here.

100
00:05:22,000 --> 00:05:24,000
You shouldn't dive into public here.

101
00:05:24,000 --> 00:05:29,000
Instead, this path can start on your route level

102
00:05:29,000 --> 00:05:34,000
and then just directly dive into images and then into site

103
00:05:34,000 --> 00:05:37,000
and then in my case point, that max.png

104
00:05:37,000 --> 00:05:39,000
since that's the image file.

105
00:05:40,000 --> 00:05:43,000
Now since we're using the next image component

106
00:05:43,000 --> 00:05:45,000
we also should find the width

107
00:05:45,000 --> 00:05:49,000
and height we want here since that is required by next image

108
00:05:49,000 --> 00:05:52,000
to produce the optimized images

109
00:05:52,000 --> 00:05:55,000
because it will then automatically shrink the base image

110
00:05:55,000 --> 00:05:58,000
which might be much bigger to that width and height.

111
00:05:58,000 --> 00:06:02,000
And it will also reduce the quality and much more.

112
00:06:02,000 --> 00:06:04,000
And here a width and height

113
00:06:04,000 --> 00:06:07,000
of roughly 300 pixels should work.

114
00:06:07,000 --> 00:06:10,000
We can then still overwrite the actual size

115
00:06:10,000 --> 00:06:13,000
of the image with css by targeting

116
00:06:13,000 --> 00:06:17,000
it with certain css rules and changing width and height.

117
00:06:17,000 --> 00:06:19,000
But of course the width and height you use here

118
00:06:19,000 --> 00:06:22,000
should be close to the actual width and height.

119
00:06:22,000 --> 00:06:24,000
You then render on the screen

120
00:06:24,000 --> 00:06:28,000
since otherwise you just waste size.

121
00:06:28,000 --> 00:06:31,000
If you load a pretty big image here

122
00:06:31,000 --> 00:06:35,000
and then you would use css code to render it with 100 pixels

123
00:06:35,000 --> 00:06:40,000
width and height, then you would just load a too big image

124
00:06:40,000 --> 00:06:42,000
even though you don't need it.

125
00:06:42,000 --> 00:06:45,000
On the upper hand if you load a too small image

126
00:06:45,000 --> 00:06:48,000
and you then use CSS to render a large image

127
00:06:48,000 --> 00:06:52,000
it would also be bad because then you would lose quality.

128
00:06:52,000 --> 00:06:53,000
That's why you wanna get close

129
00:06:53,000 --> 00:06:55,000
to the actual image you need.

130
00:06:55,000 --> 00:06:58,000
And the image component is pretty flexible.

131
00:06:58,000 --> 00:07:01,000
And in case your image can't have different sizes depending

132
00:07:01,000 --> 00:07:04,000
on the screen size and so on.

133
00:07:04,000 --> 00:07:05,000
You can always dive

134
00:07:05,000 --> 00:07:09,000
into the next image article to learn about different ways

135
00:07:09,000 --> 00:07:12,000
of configuring the image, specifically the layout prop

136
00:07:12,000 --> 00:07:16,000
which also allows you to define an image which can scale

137
00:07:16,000 --> 00:07:20,000
up and down with the viewport, with the responsive layout.

138
00:07:20,000 --> 00:07:24,000
By default, the image will have a layout of intrinsic

139
00:07:24,000 --> 00:07:27,000
and that will scale the image down to smaller view ports

140
00:07:27,000 --> 00:07:29,000
but not up for bigger view ports.

141
00:07:30,000 --> 00:07:34,000
So it will not produce any bigger images than the width

142
00:07:34,000 --> 00:07:35,000
and height we set here.

143
00:07:35,000 --> 00:07:37,000
And that will make sense

144
00:07:37,000 --> 00:07:41,000
for this application for the way we use the image here.

145
00:07:41,000 --> 00:07:43,000
So long story short with that, we set

146
00:07:43,000 --> 00:07:47,000
up the image with a certain width and height.

147
00:07:47,000 --> 00:07:49,000
We got our other content, and now we

148
00:07:49,000 --> 00:07:53,000
wanna use that hero component on the starting page.

149
00:07:53,000 --> 00:07:55,000
Now I am already rendering it here.

150
00:07:55,000 --> 00:07:57,000
Now we just need to import it.

151
00:07:57,000 --> 00:08:01,000
So we import Hero from and then let's

152
00:08:01,000 --> 00:08:02,000
go up one level, dive

153
00:08:02,000 --> 00:08:06,000
Into /components/home-page/ hero to import

154
00:08:06,000 --> 00:08:09,000
this component into the homepage.

155
00:08:09,000 --> 00:08:12,000
And I'll then get rid of the featured posts for the moment

156
00:08:12,000 --> 00:08:15,000
since we haven't populated that component yet.

157
00:08:16,000 --> 00:08:19,000
With that if we now run our development server

158
00:08:19,000 --> 00:08:24,000
with npm run dev we can visit local host free thousand

159
00:08:24,000 --> 00:08:28,000
and we should see this on the screen.

160
00:08:28,000 --> 00:08:32,000
This is this hero section with the styles I provided to you

161
00:08:32,000 --> 00:08:36,000
with the image I provided to you, or with your own image

162
00:08:36,000 --> 00:08:38,000
if you brought your own image.

163
00:08:38,000 --> 00:08:39,000
And that's looking good

164
00:08:39,000 --> 00:08:42,000
that's working now, let's take the next steps

165
00:08:42,000 --> 00:08:45,000
and let's continue working on this website.