1
00:00:01,440 --> 00:00:06,450
So in this video, we'll see how to start creating the header of our website.

2
00:00:08,430 --> 00:00:15,420
So the final hurdle will look like this, though, e-shop tighten the search bar signing for logging

3
00:00:15,420 --> 00:00:20,520
and authentication and your basket item where you can find the checkout items in the checkout amount.

4
00:00:21,030 --> 00:00:23,910
So this hair dark part we're going to build in this video.

5
00:00:24,420 --> 00:00:26,310
So basically, we are going to build this complete.

6
00:00:28,200 --> 00:00:28,340
It.

7
00:00:34,210 --> 00:00:38,230
So now we are going to divide the divide this header into three divisions.

8
00:00:38,500 --> 00:00:40,630
So the first division is Heather.

9
00:00:41,920 --> 00:00:44,890
The second division will be held search by.

10
00:00:46,920 --> 00:00:52,200
And the third division will be had that navigation, so inside the head, that navigation will be having

11
00:00:52,200 --> 00:00:53,250
another three divisions.

12
00:00:53,790 --> 00:00:59,400
One is for the signing and one is for the yacht shop icon and the other one is red basket icon and Belmont.

13
00:01:00,210 --> 00:01:01,800
So basically, this is what we are going to be.

14
00:01:04,170 --> 00:01:04,500
OK.

15
00:01:06,000 --> 00:01:06,480
So.

16
00:01:09,280 --> 00:01:15,340
Here we are now in Sarah Clark's name app, deaf, so internet app, we are going to create the header

17
00:01:15,340 --> 00:01:21,880
component, so as you know, in the act, will be dealing with components, so we interpret the whole

18
00:01:21,880 --> 00:01:23,080
website into components.

19
00:01:23,440 --> 00:01:27,340
For example, this header will be one component and then the home page will be component.

20
00:01:27,580 --> 00:01:30,010
And this individual product will be a component.

21
00:01:30,220 --> 00:01:36,480
So how to parse data from one component to other as props and also use the reducer hooks for that purpose

22
00:01:36,490 --> 00:01:40,000
using the React Context API with celebrity?

23
00:01:41,200 --> 00:01:43,420
So this is how the page will look like.

24
00:01:43,750 --> 00:01:45,100
So first, when going to header.

25
00:01:45,280 --> 00:01:48,360
So we are going to create the first, that is the law.

26
00:01:49,270 --> 00:01:50,500
So let me create the first two.

27
00:01:56,210 --> 00:02:02,510
So I created the first hurdle over, so the shortcut, I'll be using it, I'll be using a Mac, and

28
00:02:02,510 --> 00:02:07,520
that is a tool that will be helping us easily to create divisions with class names.

29
00:02:07,520 --> 00:02:10,730
For example, I want to create a class name called temporary.

30
00:02:11,030 --> 00:02:18,440
So don't I have to use Dart Temple Ready and then click Enter so it will automatically created division

31
00:02:18,590 --> 00:02:20,150
with the class name temporary.

32
00:02:20,750 --> 00:02:23,030
So to enable this, we have to follow three steps.

33
00:02:24,080 --> 00:02:25,610
So you have to follow these three steps.

34
00:02:25,610 --> 00:02:31,220
You have to open the scoring after you click control plus comma.

35
00:02:31,250 --> 00:02:35,830
If you are in, windows are commonplace, combine Mac cycle control plus comma.

36
00:02:35,840 --> 00:02:39,470
You will see this window opening and insert settings search for a Mac.

37
00:02:40,700 --> 00:02:46,340
So when you go item, you'll find I might include languages you have to click on add item and item,

38
00:02:46,340 --> 00:02:48,410
plus add JavaScript and in the value place.

39
00:02:48,560 --> 00:02:51,370
Add JavaScript react as mentioned already.

40
00:02:51,830 --> 00:02:58,160
So when you apply these rules and then click Control Shift Copy and then reload your window.

41
00:02:59,380 --> 00:03:04,120
Once you're in on your window, you can you can use dynamic shortcuts for willingness.

42
00:03:04,330 --> 00:03:07,720
So, OK, now I have created love for her that Laura.

43
00:03:11,150 --> 00:03:16,520
Now, I'll created the first search by so as you can see, we have to create for her to search, but

44
00:03:17,420 --> 00:03:18,130
technically it.

45
00:03:20,780 --> 00:03:21,860
Doc had that search.

46
00:03:42,390 --> 00:03:45,930
So there is a rear window positioning, yeah.

47
00:03:51,580 --> 00:03:55,390
So I have to one search for the sitting still.

48
00:03:58,320 --> 00:04:03,240
Let me go to Settings once again, follow these three steps that I show doing it.

49
00:04:11,590 --> 00:04:14,290
Light item, it is JavaScript.

50
00:04:14,770 --> 00:04:20,050
So as you can see, I lost the Settings related order, so I will have JavaScript and JavaScript react

51
00:04:20,050 --> 00:04:23,830
in that value so that I can use the shortcut.

52
00:04:26,940 --> 00:04:31,290
Click on OK, and then you have to close this in advance of the pitch.

53
00:04:34,450 --> 00:04:40,180
Now you can see you can use that shortcuts, and I'll be creating a of such do not further.

54
00:04:41,830 --> 00:04:42,940
Search and then click Continue.

55
00:04:43,510 --> 00:04:45,550
We are getting a deal that is automatically created.

56
00:04:47,730 --> 00:04:48,900
So we are to this.

57
00:04:49,380 --> 00:04:53,850
Now I want to create a navigation order to create this.

58
00:04:54,210 --> 00:04:57,090
As I showed you advocating this, do not.

59
00:05:02,890 --> 00:05:04,030
So that will be hard enough.

60
00:05:08,210 --> 00:05:08,840
And not now.

61
00:05:11,480 --> 00:05:15,020
Now in Senator, now we are going to create three divisions.

62
00:05:15,230 --> 00:05:15,500
OK.

63
00:05:15,740 --> 00:05:17,240
That will be item division today.

64
00:05:17,570 --> 00:05:17,960
So.

65
00:05:23,480 --> 00:05:28,130
Now, I don't know, I'll be creating these three lives, but three items.

66
00:05:30,200 --> 00:05:35,720
So now in each item, as you can see in each item, we're having two lines.

67
00:05:36,050 --> 00:05:41,450
One is the longest sign in your shop and then your basket and then integer value.

68
00:05:41,870 --> 00:05:44,810
So we have to again create both banks, right?

69
00:05:45,230 --> 00:05:51,710
So I'll be creating a span watch band that is its default inline block, which will take the exact amount

70
00:05:51,710 --> 00:05:54,110
of space that the content within it has.

71
00:05:54,640 --> 00:05:59,690
So I instead now double data span the class names.

72
00:06:00,470 --> 00:06:00,920
Now.

73
00:06:02,160 --> 00:06:03,720
Item Lane one.

74
00:06:05,100 --> 00:06:05,490
OK.

75
00:06:07,050 --> 00:06:09,240
And then I'll give it a name like hello against.

76
00:06:10,820 --> 00:06:11,480
In August.

77
00:06:13,190 --> 00:06:19,340
And then again, the same procedure I'll be doing now, Item Line two.

78
00:06:22,300 --> 00:06:22,720
Simon.

79
00:06:26,380 --> 00:06:30,670
So this will be the first item, the same, I'll copy the rest of their lives as well.

80
00:06:39,140 --> 00:06:40,710
Have to change this thing.

81
00:06:41,160 --> 00:06:45,990
I try to be creating your and then here will be shot.

82
00:06:49,890 --> 00:06:51,270
So you going to be a basket?

83
00:06:53,290 --> 00:06:55,600
And then this in, for example, let me say zero.

84
00:07:01,270 --> 00:07:07,460
So now what we'll do is instead of basket will be using a basket image.

85
00:07:07,480 --> 00:07:08,770
So we want this image right?

86
00:07:08,800 --> 00:07:10,600
We'll be using this image basket image.

87
00:07:10,780 --> 00:07:13,760
So I'll go get basket image, but this will be using material you like.

88
00:07:14,590 --> 00:07:16,570
So let me throw the material away.

89
00:07:20,510 --> 00:07:28,390
So immediately, I have and started using this come in so many ways react to technology or framework

90
00:07:28,400 --> 00:07:31,730
and call where we can get our icons and images like stuff.

91
00:07:32,690 --> 00:07:34,280
So now how to install it?

92
00:07:34,280 --> 00:07:35,750
I'll be going to the terminal.

93
00:07:36,170 --> 00:07:37,340
I'll be in the folder.

94
00:07:37,340 --> 00:07:41,780
Like since there is no we are running the app in the terminal.

95
00:07:41,780 --> 00:07:45,560
I'll be using another terminal and we're going to new terminal.

96
00:07:57,090 --> 00:07:59,730
And my Deidre will be going to the shop.

97
00:08:01,830 --> 00:08:05,880
So now I have to follow these two commands of code, as you can see.

98
00:08:08,270 --> 00:08:10,760
NPM install material you code.

99
00:08:23,900 --> 00:08:27,680
And then once it gets into early afternoon style icon material, the icon.

100
00:08:41,270 --> 00:08:47,550
So long as you install a material, you know, we have been stuck and you've been, I mean, since you've

101
00:08:47,570 --> 00:08:48,890
read material.

102
00:08:51,370 --> 00:08:55,810
You write icons, Venezuelan style icons, and now you have to search for icons.

103
00:08:56,480 --> 00:08:57,920
So I will be searching for icons.

104
00:08:57,950 --> 00:08:58,210
Yeah.

105
00:09:03,250 --> 00:09:10,210
And then you can search over four icons, components, box, live inputs, navigation services, feedback,

106
00:09:10,210 --> 00:09:10,820
data display.

107
00:09:11,500 --> 00:09:15,090
So can you go through the documentation style system?

108
00:09:15,100 --> 00:09:15,610
Everything.

109
00:09:17,170 --> 00:09:19,810
So now here I'll be searching for we want a basket on.

110
00:09:21,500 --> 00:09:21,960
All right.

111
00:09:24,040 --> 00:09:30,940
Shopping basket in the materialI concession shall be taken on Dec. two, so you can see you can find

112
00:09:31,090 --> 00:09:36,130
many Bousquet items like you are getting this item, search for icons or here.

113
00:09:37,790 --> 00:09:42,230
So I've got two icons on its sports basket, and every shopping basket will be using this shopping basket

114
00:09:42,230 --> 00:09:42,590
icon.

115
00:09:43,010 --> 00:09:48,320
So as you can see, we can import the shopping basket with the line of with this one single line.

116
00:09:48,560 --> 00:09:50,510
So this is the beauty of materials, right?

117
00:09:50,830 --> 00:09:53,870
You can import whatever icons we want with the single line.

118
00:09:54,850 --> 00:10:01,000
So as you can see, it can also add attributes when we are using this, we can use props such as font

119
00:10:01,000 --> 00:10:03,370
size, large font size, medium on foreign text one.

120
00:10:03,760 --> 00:10:05,260
But let me put this first.

121
00:10:09,180 --> 00:10:13,980
So my installation service was like a now, including I have to import adaptogens.

122
00:10:19,390 --> 00:10:19,640
No.

123
00:10:21,820 --> 00:10:25,210
So I can use this shopping basket icon or instead of basket.

124
00:10:25,930 --> 00:10:27,160
I'll be using it here in here.

125
00:10:32,620 --> 00:10:33,850
Shopping basket icon.

126
00:10:39,130 --> 00:10:41,350
Outside of Beijing, Foreign Secretary calls to large.

127
00:10:46,530 --> 00:10:47,640
That's it, so with this.

128
00:10:49,060 --> 00:10:49,660
We can.

129
00:10:52,890 --> 00:10:59,060
Create a shopping basket icon, and then I've created the three items and then let us see how upset

130
00:10:59,070 --> 00:11:04,110
it's looking like, so you can see everything is created, but it is not in the correct styling manner.

131
00:11:04,770 --> 00:11:07,200
So now we have to access to the components.

132
00:11:08,480 --> 00:11:14,750
And also in the logo, in the aisles, I'll be using a, you know, a lot like this symbol that I am

133
00:11:14,750 --> 00:11:17,960
using the store symbol, so and search for the stored symbol.

134
00:11:23,630 --> 00:11:27,920
So you can see there are so many stalled foreign fronts, I would be using this thing.

135
00:11:28,160 --> 00:11:29,000
This copy this.

136
00:11:30,800 --> 00:11:32,270
And then you can paste your over here.

137
00:11:33,900 --> 00:11:36,930
And in the header logo, you can directly call this.

138
00:11:38,590 --> 00:11:40,360
Shopping storefront icon.

139
00:11:43,570 --> 00:11:49,090
So that's it with this week, and we'll be done with now, but that's HTML coding, but now we have

140
00:11:49,090 --> 00:11:52,360
to do with it, do the serious part.

141
00:11:52,510 --> 00:11:54,370
So here I'll give this a class name.

142
00:11:55,750 --> 00:11:57,850
As that little boy image.

143
00:12:02,650 --> 00:12:04,060
And font size will be large.

144
00:12:11,970 --> 00:12:16,800
He had no need to use funds as large because it is a it is an item, we'll never know what should be

145
00:12:16,800 --> 00:12:21,900
allowed and the remaining should remain in our country or not or what shareholders funds you give this

146
00:12:21,900 --> 00:12:25,050
and then I'll give a hedge to attack of it.

147
00:12:25,200 --> 00:12:25,920
Class name.

148
00:12:28,110 --> 00:12:30,760
As I said that, I don't know what I did, I.

149
00:12:35,240 --> 00:12:36,700
And the title issue.

150
00:12:38,370 --> 00:12:43,080
When you say when you look at the website, you can see, like we have got everything the content we

151
00:12:43,080 --> 00:12:44,070
need in the header.

152
00:12:44,550 --> 00:12:46,320
As you can see, but we have to style it, OK?

153
00:12:47,670 --> 00:12:49,680
So annoying search in search.

154
00:12:49,680 --> 00:12:51,550
What I do is we need a bomb, right?

155
00:12:51,570 --> 00:12:56,310
Like that that's such a controlled Echo Input, but what it.

156
00:13:00,850 --> 00:13:03,100
And Typekit protection class name will be.

157
00:13:06,430 --> 00:13:07,240
Her that searching.

158
00:13:10,350 --> 00:13:15,360
You can do any classroom next time I prefer, I prefer to use these kind of classrooms because it will

159
00:13:15,450 --> 00:13:17,340
give me more detail about what I am doing.

160
00:13:20,010 --> 00:13:23,670
And then I need this search, I can write it, president, any of this search I can, I'll work on.

161
00:13:24,090 --> 00:13:25,860
I just find the search icon.

162
00:13:27,920 --> 00:13:28,160
OK.

163
00:13:28,430 --> 00:13:29,240
I prefer it here.

164
00:13:30,780 --> 00:13:34,350
You can see the search icon where you can directly imported.

165
00:13:36,430 --> 00:13:38,560
Like this and then use the icon over here.

166
00:13:47,460 --> 00:13:47,640
But.

167
00:13:49,030 --> 00:13:53,590
Class names, I'll give this class name so that we can style this at the.

168
00:13:56,400 --> 00:13:57,810
Search icon.

169
00:14:00,790 --> 00:14:01,060
Yeah.

170
00:14:04,560 --> 00:14:07,680
So now we are done with the family, but now we have no stylist.

171
00:14:08,070 --> 00:14:12,630
All the all the classes we have to file, we have to target them inside the boxes.

172
00:14:13,080 --> 00:14:15,720
So as I said before, we will deal with components.

173
00:14:16,170 --> 00:14:20,490
So we have to use the header thing in a computer and try to create the header component.

174
00:14:22,170 --> 00:14:24,440
And that Dodger and Dodgers.

175
00:14:26,400 --> 00:14:29,550
€13 hydrologists.

176
00:14:30,710 --> 00:14:32,720
And then Alligator did not see us as well.

177
00:14:34,910 --> 00:14:37,110
I'm using the snippets of Visual Studio code for.

178
00:14:39,940 --> 00:14:45,070
Is the creation of the function and export default that the remaining can import?

179
00:14:49,660 --> 00:14:51,130
And Port react and react and.

180
00:14:58,800 --> 00:14:59,880
Another CSIS.

181
00:15:02,370 --> 00:15:06,930
So once we're done, we can copy the copy and paste the whole cultivated, for example, the header

182
00:15:07,530 --> 00:15:08,460
from the header thing.

183
00:15:08,490 --> 00:15:11,550
We can create a new class here with.

184
00:15:13,590 --> 00:15:19,500
With the title, had that OK, and then we can patch the whole code that is present over there from

185
00:15:19,590 --> 00:15:21,180
the logo to and.

186
00:15:24,170 --> 00:15:24,950
Had other guests.

187
00:15:28,370 --> 00:15:30,200
So that's good enough.

188
00:15:31,720 --> 00:15:33,400
So we've completed this.

189
00:15:34,090 --> 00:15:35,920
We can just call the over here.

190
00:15:41,110 --> 00:15:42,210
And then important.

191
00:15:46,120 --> 00:15:49,060
Import from abroad slash.

192
00:15:52,130 --> 00:15:56,740
And then this icons will be using hadrosaur, so I'll be importing these icons already.

193
00:16:01,520 --> 00:16:03,290
Further, OK.

194
00:16:03,380 --> 00:16:07,580
There is no added, so they've completed the successful creation of the company, and now we'll see

195
00:16:07,580 --> 00:16:08,390
the styling part.

196
00:16:10,560 --> 00:16:16,440
In the head of CSIS, what I need to do is I have to fight each and every element so that to give the

197
00:16:16,440 --> 00:16:23,190
look like this, so to be so something that isn't so this is a risk project will be dealing mostly with

198
00:16:23,220 --> 00:16:25,020
react concepts, other then styling.

199
00:16:25,320 --> 00:16:30,420
So I'll give you what styles like these styles will be telling that are like the position that are in

200
00:16:30,900 --> 00:16:36,570
the display, the border, the padding we have to you have to basically trilateral, which suits the

201
00:16:36,570 --> 00:16:38,430
best way possible and you have to do that.

202
00:16:38,880 --> 00:16:40,540
So I already prepared this project.

203
00:16:40,560 --> 00:16:45,280
I will be using the scissors first already that I have been used and then expand what is happening.

204
00:16:45,310 --> 00:16:48,420
This is the same with our concentration will be more on the React pack.

205
00:16:52,950 --> 00:16:54,790
But I can see to her part.

206
00:16:55,270 --> 00:17:00,400
So we have what we have to do is we have to give that last names to the basket icons and the count that

207
00:17:00,400 --> 00:17:01,510
we are using over there.

208
00:17:01,510 --> 00:17:04,750
So this class will be item basket.

209
00:17:07,600 --> 00:17:09,540
So that we can strike it properly.

210
00:17:13,940 --> 00:17:19,370
And then here and here in the line, too, it is also in the future when we are shackled, when we are

211
00:17:19,370 --> 00:17:23,100
doing checkout page, we have to update this dynamically version of the item line.

212
00:17:23,190 --> 00:17:24,450
We have to give it another class.

213
00:17:24,560 --> 00:17:25,790
So that is basket.

214
00:17:27,240 --> 00:17:32,250
App Basket conflict can we can name it anything, but we have to make sure that the class that you use

215
00:17:32,250 --> 00:17:33,140
them to get.

216
00:17:33,270 --> 00:17:38,940
You have to use the same class and introductions and I want will take a look at the case file, so I

217
00:17:38,940 --> 00:17:40,470
have to style the elements over here.

218
00:17:42,040 --> 00:17:44,830
So basically, the hitter will be height of 16 display flex.

219
00:17:45,070 --> 00:17:47,290
So what does display Flex will be doing this?

220
00:17:47,650 --> 00:17:48,790
So I'll explain this to you.

221
00:17:51,550 --> 00:17:53,700
So as you can see, we are done with the header.

222
00:17:54,550 --> 00:17:59,770
So basically, when we don't use display flags, the elements inside the dome will be getting stacked

223
00:17:59,770 --> 00:18:04,660
in a column like in a column basic thing like one below the other.

224
00:18:04,930 --> 00:18:11,530
But when we use this display flags, all items will be beside each at one another like this.

225
00:18:12,160 --> 00:18:14,050
So this is what the Flaxmere makes.

226
00:18:14,410 --> 00:18:19,570
If you use the Flex Directioners column, this is what happens if you use the Flex that if you use the

227
00:18:19,570 --> 00:18:26,730
display flex and don't mention any flex direction, this will block the stacking order will be OK.

228
00:18:29,340 --> 00:18:31,230
So now I display Flex here.

229
00:18:32,770 --> 00:18:38,920
So that all that in the inside the header, plus all the divisions will be stacked one beside the other.

230
00:18:40,110 --> 00:18:45,800
So everything the all the divisions are one beside the other, OK, in the air that nobody gave a color,

231
00:18:45,810 --> 00:18:50,210
I gave this prayer flags, so I gave this flex because if you go to had that.

232
00:18:51,000 --> 00:18:53,430
There are two divisions and there are two items.

233
00:18:53,430 --> 00:18:55,550
One is logo and one other is hedged.

234
00:18:56,010 --> 00:18:58,140
So we want both of them beside each other.

235
00:18:58,320 --> 00:19:01,560
So if you give, they will be beside one another.

236
00:19:01,770 --> 00:19:03,390
If you don't give flexibility, see what happened.

237
00:19:04,890 --> 00:19:11,050
And then if I comment this out now, as you can see, they both are one below the other.

238
00:19:11,070 --> 00:19:12,500
So the Flex is very important.

239
00:19:12,510 --> 00:19:14,820
We'll be using it multiple times.

240
00:19:16,300 --> 00:19:19,980
So and then the global image I gave a margin global title.

241
00:19:20,280 --> 00:19:22,800
I delivered the next decoration as an unknown border.

242
00:19:25,290 --> 00:19:31,500
Such display, Flex and then Flex will be one, this is the index that you can give as a factor alone

243
00:19:31,510 --> 00:19:34,110
items, centered border areas, searching posture.

244
00:19:34,130 --> 00:19:38,640
These are all day for like the trial and error thing you have to search and do.

245
00:19:39,900 --> 00:19:45,630
That's why I didn't even have item now item I gave Flex because there are two things inside the NAB

246
00:19:45,630 --> 00:19:53,610
item I have to give Flex and I have to mention the Flex Directioners Column C because if I don't give

247
00:19:53,610 --> 00:19:56,400
this year's column or let me come this line out.

248
00:19:58,340 --> 00:20:03,410
They will be one beside down to that, but we don't want one, we surrounded, we want like both of

249
00:20:03,410 --> 00:20:08,810
them, one will also have to give flex direction as column, so that will get one below the another.

250
00:20:10,870 --> 00:20:15,700
So and then the item line one foreign says Item Line two, there will be a foreign state and foreign

251
00:20:15,700 --> 00:20:20,200
trade item basket, as you can see a display, flags, satellite items and these are reading margin

252
00:20:20,200 --> 00:20:20,860
left and right.

253
00:20:21,280 --> 00:20:22,110
These are colors.

254
00:20:22,120 --> 00:20:24,340
It will be on the stylistic choice that you make.

255
00:20:25,140 --> 00:20:25,630
So.

256
00:20:25,790 --> 00:20:32,950
So this is basically the implementation of the header using react components and as well as the ambulance

257
00:20:32,980 --> 00:20:33,430
cases.

258
00:20:33,730 --> 00:20:39,610
So in the next medium and see how to design the home page and up products, each product component and

259
00:20:39,610 --> 00:20:43,570
the home component, I'll go get this image was going to be made over here and the product component

260
00:20:43,780 --> 00:20:47,380
how to parse data from one component to another using proximity in the fridge.

261
00:20:48,070 --> 00:20:48,840
So that's it for the.