1
00:00:01,070 --> 00:00:03,823
‫Welcome to the very first coding challenge

2
00:00:03,823 --> 00:00:05,240
‫of this course,

3
00:00:05,240 --> 00:00:06,880
‫where you will now for the first

4
00:00:06,880 --> 00:00:09,170
‫time practice all the skills

5
00:00:09,170 --> 00:00:13,780
‫that you have already learned in this course on your own.

6
00:00:13,780 --> 00:00:16,260
‫So, the goal of this challenge is

7
00:00:16,260 --> 00:00:20,800
‫to build a developer profile card just like this one.

8
00:00:20,800 --> 00:00:23,610
‫So we have like an avatar image here,

9
00:00:23,610 --> 00:00:27,340
‫then the name of the developer, a short bio,

10
00:00:27,340 --> 00:00:30,509
‫and finally a list of skills.

11
00:00:30,509 --> 00:00:34,430
‫Now to actually build this project, you have two options.

12
00:00:34,430 --> 00:00:38,460
‫First, you can simply create a new Create React app

13
00:00:38,460 --> 00:00:41,980
‫on your own computer and then build the project there

14
00:00:41,980 --> 00:00:44,690
‫just like we have been doing in this section.

15
00:00:44,690 --> 00:00:48,420
‫Or second, you can use the CodeSandbox app

16
00:00:48,420 --> 00:00:51,830
‫that we used for the very first app that we built

17
00:00:51,830 --> 00:00:54,000
‫in the course.

18
00:00:54,000 --> 00:00:55,610
‫So this is basically an online editor,

19
00:00:55,610 --> 00:00:58,540
‫which makes it very easy to quickly try out

20
00:00:58,540 --> 00:01:00,710
‫some new small projects.

21
00:01:00,710 --> 00:01:03,260
‫And so this is what I'm actually going to use

22
00:01:03,260 --> 00:01:04,929
‫to build this challenge.

23
00:01:04,929 --> 00:01:06,920
‫Now, in case you want to do the same,

24
00:01:06,920 --> 00:01:09,450
‫I advise you to create a new account here,

25
00:01:09,450 --> 00:01:10,037
‫And so this is what I'm actually going to use

26
00:01:10,037 --> 00:01:11,037
‫to build this challenge.

27
00:01:11,037 --> 00:01:11,152
‫Now in case you want to do the same,

28
00:01:11,152 --> 00:01:11,162
‫I advise you to create a new account here.

29
00:01:11,162 --> 00:01:11,289
‫And then once you're done,

30
00:01:11,289 --> 00:01:14,880
‫you can simply create a new React app here.

31
00:01:14,880 --> 00:01:19,110
‫So, just click up here to create and then react.

32
00:01:19,110 --> 00:01:21,560
‫And again, maybe by the time you're watching this,

33
00:01:22,900 --> 00:01:24,650
‫CodeSandbox looks completely different,

34
00:01:24,650 --> 00:01:26,660
‫but just find a button somewhere

35
00:01:26,660 --> 00:01:28,600
‫to create a new React app.

36
00:01:28,600 --> 00:01:31,840
‫Or alternatively, as I showed you also before,

37
00:01:31,840 --> 00:01:36,310
‫you can simply do react.new.

38
00:01:36,310 --> 00:01:40,570
‫And this will then also scaffold a new React app.

39
00:01:40,570 --> 00:01:42,539
‫And actually, it does use,

40
00:01:42,539 --> 00:01:45,880
‫under the hood also create react app.

41
00:01:45,880 --> 00:01:49,200
‫It's a bit different here in terms of the file structure,

42
00:01:49,200 --> 00:01:51,140
‫but yeah it also allows us

43
00:01:51,140 --> 00:01:54,860
‫to very quickly build a small React app.

44
00:01:54,860 --> 00:01:58,030
‫Now, before you actually start coding I have a few pieces

45
00:01:58,030 --> 00:01:59,770
‫of advice for you

46
00:01:59,770 --> 00:02:02,969
‫because this probably seems a bit daunting.

47
00:02:02,969 --> 00:02:06,199
‫So, building all of this here from scratch

48
00:02:06,199 --> 00:02:09,210
‫as a complete beginner might be a bit difficult.

49
00:02:09,210 --> 00:02:12,360
‫So, let me give you a few hints.

50
00:02:12,360 --> 00:02:16,679
‫So, here I already have basically the app component.

51
00:02:16,679 --> 00:02:20,540
‫And so, let's together look at the structure here.

52
00:02:20,540 --> 00:02:24,330
‫So in this app, we return a div with the class name

53
00:02:24,330 --> 00:02:26,440
‫of Card.

54
00:02:26,440 --> 00:02:29,310
‫And by the way, you can get all of these styles right here

55
00:02:29,310 --> 00:02:33,360
‫from this file, which is available at this URL,

56
00:02:33,360 --> 00:02:36,950
‫so at this starter for this challenge,

57
00:02:36,950 --> 00:02:38,370
‫which of course I will attach

58
00:02:38,370 --> 00:02:41,320
‫to the lecture on Udemy as always.

59
00:02:41,320 --> 00:02:43,150
‫So make sure to check out that link,

60
00:02:43,150 --> 00:02:46,650
‫and from there, you can then get this CSS.

61
00:02:48,200 --> 00:02:49,900
‫But anyway, going back here,

62
00:02:49,900 --> 00:02:52,500
‫what I want you to do is to create this div,

63
00:02:52,500 --> 00:02:54,380
‫which is the entire cart.

64
00:02:56,130 --> 00:02:58,170
‫So basically the container for all this

65
00:02:58,170 --> 00:02:59,620
‫with this black border.

66
00:03:01,250 --> 00:03:03,880
‫And then in there, we have an avatar component,

67
00:03:03,880 --> 00:03:05,950
‫which will be for the image.

68
00:03:05,950 --> 00:03:08,610
‫And then we have this div for the data.

69
00:03:08,610 --> 00:03:10,469
‫And in the data, we have the intro,

70
00:03:10,469 --> 00:03:13,520
‫which is for this heading here and for this bio.

71
00:03:13,520 --> 00:03:16,900
‫And then we have here a list of skills.

72
00:03:16,900 --> 00:03:19,330
‫So a component called skill list.

73
00:03:19,330 --> 00:03:23,630
‫And in the skill list, you should have one skill component

74
00:03:23,630 --> 00:03:26,700
‫for each web development skill that you have.

75
00:03:26,700 --> 00:03:29,639
‫And in order to customize each of these skills,

76
00:03:29,639 --> 00:03:30,860
‫you will use props,

77
00:03:30,860 --> 00:03:33,770
‫so just as we learned previously.

78
00:03:33,770 --> 00:03:35,680
‫So going back here, for example,

79
00:03:35,680 --> 00:03:40,460
‫I created one skill for each of these six web dev skills

80
00:03:40,460 --> 00:03:42,240
‫that I have.

81
00:03:42,240 --> 00:03:45,400
‫And so into each of them, I passed the skill itself,

82
00:03:45,400 --> 00:03:49,610
‫then the emoji here, and then also the background color.

83
00:03:49,610 --> 00:03:51,719
‫And this background color is probably

84
00:03:51,719 --> 00:03:53,629
‫the most challenging part here.

85
00:03:53,629 --> 00:03:56,770
‫So maybe don't worry too much about that part.

86
00:03:56,770 --> 00:04:00,660
‫What matters to me here is that you pass in the emoji

87
00:04:00,660 --> 00:04:03,020
‫and the skill name itself.

88
00:04:03,020 --> 00:04:05,146
‫And so basically with that,

89
00:04:05,146 --> 00:04:06,630
‫you can already customize

90
00:04:06,630 --> 00:04:10,039
‫the skill component pretty nicely.

91
00:04:10,039 --> 00:04:13,990
‫Now, as for the image, you can actually upload the image.

92
00:04:13,990 --> 00:04:16,670
‫So your avatar image or any other image

93
00:04:16,670 --> 00:04:20,360
‫that you wish right here into code sandbox.

94
00:04:20,360 --> 00:04:23,340
‫So you can just open this public folder and then drag

95
00:04:23,340 --> 00:04:26,150
‫and drop an image right into this.

96
00:04:26,150 --> 00:04:29,580
‫So this will then upload the image right into the sandbox

97
00:04:29,580 --> 00:04:31,980
‫and you can then reference that image just like

98
00:04:31,980 --> 00:04:36,070
‫we have been doing in our app throughout this section.

99
00:04:36,070 --> 00:04:40,380
‫Okay, and I think these instructions should get you going.

100
00:04:40,380 --> 00:04:42,670
‫And in case you need some more,

101
00:04:42,670 --> 00:04:45,540
‫then you can just start watching my solution.

102
00:04:45,540 --> 00:04:47,690
‫That is of course no problem at all.

103
00:04:47,690 --> 00:04:51,670
‫It's really, really no problem if you're not able to do all

104
00:04:51,670 --> 00:04:54,190
‫of this on your own on your first try.

105
00:04:54,190 --> 00:04:57,610
‫So if you need to watch my solution, that's 100% fine.

106
00:04:58,770 --> 00:05:03,770
‫Now make sure also to read here through this styles.css,

107
00:05:03,910 --> 00:05:06,350
‫because this will then give you the hints

108
00:05:06,350 --> 00:05:09,090
‫for which class names you should use.

109
00:05:09,090 --> 00:05:11,050
‫For example, for the avatar image,

110
00:05:11,050 --> 00:05:14,760
‫this is the class that you need, here for the skills list,

111
00:05:14,760 --> 00:05:17,250
‫and so on.

112
00:05:17,250 --> 00:05:19,530
‫So please go ahead, pause the video now,

113
00:05:19,530 --> 00:05:21,460
‫and then do as much as you can.

114
00:05:21,460 --> 00:05:23,500
‫And once you're done with that,

115
00:05:23,500 --> 00:05:26,580
‫I will meet you back here with my solution

116
00:05:26,580 --> 00:05:29,170
‫and probably I should leave this one here up

117
00:05:29,170 --> 00:05:31,110
‫on the screen,

118
00:05:31,110 --> 00:05:32,860
‫so you can see what you actually need to build.

119
00:05:32,860 --> 00:05:35,410
‫So good luck with that and I see you in a minute.

120
00:05:37,580 --> 00:05:40,389
‫Okay, so how did you do?

121
00:05:40,389 --> 00:05:42,949
‫Well let's try to tackle this one together.

122
00:05:44,720 --> 00:05:48,410
‫So I'm creating here a brand new React app,

123
00:05:48,410 --> 00:05:52,413
‫so the one that I actually created before with react.new.

124
00:05:52,413 --> 00:05:56,763
‫And then let's get rid of this file here

125
00:05:56,763 --> 00:06:00,763
‫as we will once again do it all inside index.js.

126
00:06:04,804 --> 00:06:09,637
‫Okay, so let's create the app component right here,

127
00:06:10,727 --> 00:06:13,990
‫and actually, just to make it a bit quicker,

128
00:06:13,990 --> 00:06:18,110
‫I will already copy in the code that I already had before.

129
00:06:21,510 --> 00:06:24,390
‫So this way, we're speeding up the video a little bit.

130
00:06:26,770 --> 00:06:28,309
‫So just like this.

131
00:06:28,309 --> 00:06:32,669
‫And I will also, of course, get these starter styles.

132
00:06:38,909 --> 00:06:40,679
‫Okay.

133
00:06:40,679 --> 00:06:44,730
‫And so now let's just create these additional components.

134
00:06:44,730 --> 00:06:48,147
‫So function avatar,

135
00:06:51,888 --> 00:06:53,138
‫then the intro,

136
00:06:55,789 --> 00:06:59,705
‫and finally also the skill list,

137
00:06:59,705 --> 00:07:03,090
‫and the skill itself.

138
00:07:03,090 --> 00:07:06,639
‫So again, we're going to have one skill component

139
00:07:06,639 --> 00:07:09,780
‫for each of our web development skills.

140
00:07:09,780 --> 00:07:13,197
‫And now let's start with the easiest one.

141
00:07:14,240 --> 00:07:19,240
‫So, the avatar is basically just an image with a source.

142
00:07:19,470 --> 00:07:20,960
‫Let's leave this one empty for now.

143
00:07:20,960 --> 00:07:25,900
‫And let's add the alt tag with my name.

144
00:07:27,990 --> 00:07:30,190
‫Okay.

145
00:07:30,190 --> 00:07:32,480
‫And now let's grab the image and drag and drop it here.

146
00:07:32,480 --> 00:07:35,480
‫So I have it in my downloads folder.

147
00:07:37,060 --> 00:07:39,080
‫So this will quickly upload the file,

148
00:07:39,080 --> 00:07:43,830
‫and then I can just write here in the source, Jonas.jpac.

149
00:07:46,490 --> 00:07:49,630
‫So if I save this now, then let's see if something happens.

150
00:07:50,820 --> 00:07:54,030
‫Well, we have some errors here.

151
00:07:54,030 --> 00:07:57,697
‫So, let's just reload this internal browser.

152
00:07:58,809 --> 00:08:00,219
‫That should just fix it,

153
00:08:00,219 --> 00:08:01,552
‫and there we go.

154
00:08:02,520 --> 00:08:05,000
‫So this is way too large and that's simply

155
00:08:05,000 --> 00:08:09,270
‫because I forgot the appropriate class name here.

156
00:08:09,270 --> 00:08:14,270
‫So, that's just class name Avatar.

157
00:08:18,037 --> 00:08:19,520
‫Yeah, beautiful.

158
00:08:19,520 --> 00:08:22,230
‫So that's already our first part right there.

159
00:08:23,420 --> 00:08:24,850
‫Let's just close down.

160
00:08:24,850 --> 00:08:26,800
‫Yeah, just like that.

161
00:08:26,800 --> 00:08:28,270
‫So next up, we have the intro,

162
00:08:38,120 --> 00:08:39,879
‫which is just some diff here,

163
00:08:39,879 --> 00:08:42,296
‫and then one primary heading.

164
00:08:47,754 --> 00:08:51,337
‫And then here with a paragraph for the bio.

165
00:08:53,880 --> 00:08:57,859
‫And here I will just grab it from here.

166
00:08:57,859 --> 00:08:59,990
‫And, of course, you are hopefully going

167
00:08:59,990 --> 00:09:02,459
‫to write your own one.

168
00:09:02,459 --> 00:09:04,940
‫Give it a save.

169
00:09:04,940 --> 00:09:06,230
‫So that's the next part.

170
00:09:06,230 --> 00:09:08,220
‫And now here comes the hardest part,

171
00:09:08,220 --> 00:09:10,540
‫which is the skill list.

172
00:09:10,540 --> 00:09:12,790
‫So before we tackle the skill list,

173
00:09:12,790 --> 00:09:15,479
‫let's actually build the skill itself.

174
00:09:18,469 --> 00:09:19,790
‫So return.

175
00:09:23,050 --> 00:09:27,410
‫It's a div with the class name of skill.

176
00:09:27,410 --> 00:09:29,440
‫And hopefully, you got this one simply

177
00:09:29,440 --> 00:09:31,279
‫by looking at the CSS file.

178
00:09:34,990 --> 00:09:37,239
‫Let's close it.

179
00:09:37,239 --> 00:09:38,700
‫And for now, let's just write something in here.

180
00:09:41,460 --> 00:09:43,543
‫And also just some emoji.

181
00:09:46,400 --> 00:09:48,983
‫Okay, and then

182
00:09:53,316 --> 00:09:55,733
‫let's here also create a div,

183
00:09:56,670 --> 00:09:59,530
‫and if i'm going a bit too fast for you it's simply

184
00:09:59,530 --> 00:10:02,780
‫because I don't want this video to take forever.

185
00:10:02,780 --> 00:10:06,610
‫Okay, and I will also explain the important parts,

186
00:10:06,610 --> 00:10:09,549
‫of course, after the code is written.

187
00:10:10,730 --> 00:10:14,150
‫But anyway, we see that we already included

188
00:10:14,150 --> 00:10:15,920
‫our very first skill right here.

189
00:10:17,060 --> 00:10:20,040
‫However, if I now copy and paste this,

190
00:10:20,040 --> 00:10:23,219
‫then we have the same problem as we had before

191
00:10:23,219 --> 00:10:27,280
‫with our pizzas, which is that they are all the same.

192
00:10:27,280 --> 00:10:30,080
‫And so now we need to again reach for props in order

193
00:10:30,080 --> 00:10:32,420
‫to customize these skills.

194
00:10:34,310 --> 00:10:36,020
‫So into the skills component,

195
00:10:36,020 --> 00:10:38,853
‫let's pass in a prop called skill,

196
00:10:40,153 --> 00:10:42,236
‫and I will call it React.

197
00:10:45,860 --> 00:10:48,610
‫And then let's also pass in an emoji.

198
00:10:52,740 --> 00:10:55,310
‫So this one, for example.

199
00:10:57,530 --> 00:10:59,680
‫Okay.

200
00:10:59,680 --> 00:11:00,360
‫And now here, just like before,

201
00:11:00,360 --> 00:11:03,160
‫we receive the props object.

202
00:11:03,160 --> 00:11:05,969
‫So as an argument or as a parameter

203
00:11:05,969 --> 00:11:08,750
‫to this skills component function.

204
00:11:08,750 --> 00:11:12,083
‫And so here we can now use exactly that.

205
00:11:15,389 --> 00:11:18,009
‫So, let's maybe actually create one span.

206
00:11:18,009 --> 00:11:20,559
‫So, one element for the skill itself

207
00:11:20,559 --> 00:11:22,830
‫and then one for the emoji.

208
00:11:22,830 --> 00:11:27,180
‫So here all we have to do is to now write props.

209
00:11:27,180 --> 00:11:29,640
‫So props again is that object

210
00:11:29,640 --> 00:11:33,020
‫that react will automatically pass into the component

211
00:11:33,020 --> 00:11:36,300
‫when we define some props on it.

212
00:11:36,300 --> 00:11:41,300
‫And so now we have on props prop.skill and prop. emoji

213
00:11:41,343 --> 00:11:43,660
‫because these are the two props that we passed

214
00:11:43,660 --> 00:11:45,890
‫in right here.

215
00:11:45,890 --> 00:11:49,320
‫So again, think of a prop as a communication channel

216
00:11:49,320 --> 00:11:53,950
‫between this skill list component, which is calling,

217
00:11:53,950 --> 00:11:57,530
‫so which is including this skill component,

218
00:11:57,530 --> 00:12:01,530
‫and the child component, so the component itself.

219
00:12:01,530 --> 00:12:04,120
‫So these two can now basically communicate

220
00:12:04,120 --> 00:12:06,030
‫by passing in some data.

221
00:12:07,060 --> 00:12:11,393
‫But anyway, let's now use this prop, so props.skill.

222
00:12:14,089 --> 00:12:18,367
‫and then let's use another span here

223
00:12:18,367 --> 00:12:22,200
‫for props.emoji,

224
00:12:25,017 --> 00:12:27,684
‫and then let's see what happens.

225
00:12:28,580 --> 00:12:32,679
‫So we have the skill, but here, of course,

226
00:12:32,679 --> 00:12:34,510
‫that cannot work.

227
00:12:34,510 --> 00:12:35,830
‫And there we go.

228
00:12:36,700 --> 00:12:37,533
‫Beautiful.

229
00:12:39,400 --> 00:12:41,370
‫So, let's keep going.

230
00:12:41,370 --> 00:12:46,370
‫So, let's say skill HTML plus CSS

231
00:12:47,770 --> 00:12:51,000
‫and the emoji let's say is the same.

232
00:12:51,000 --> 00:12:54,760
‫So also some strong skills right there.

233
00:12:54,760 --> 00:12:56,660
‫And so now indeed we got

234
00:12:56,660 --> 00:12:58,680
‫two different components here.

235
00:12:58,680 --> 00:13:02,070
‫So, two skill components with different data.

236
00:13:02,070 --> 00:13:05,759
‫And now let's add just another skill.

237
00:13:05,759 --> 00:13:08,120
‫What do we have here?

238
00:13:08,120 --> 00:13:10,279
‫So we have let's say Svelte,

239
00:13:10,279 --> 00:13:13,920
‫then with this baby emoji, because, well,

240
00:13:13,920 --> 00:13:15,700
‫I'm not very good at Svelte.

241
00:13:16,700 --> 00:13:20,340
‫I just tried it out once for a few hours.

242
00:13:20,340 --> 00:13:23,673
‫So, I can say that I'm good with Svelte.

243
00:13:27,032 --> 00:13:30,840
‫All right, here we actually need to add the class name

244
00:13:30,840 --> 00:13:35,040
‫of skill list, I believe.

245
00:13:36,060 --> 00:13:39,010
‫Yeah, this then places them nicely side by side.

246
00:13:39,010 --> 00:13:40,959
‫And let's actually just add one more,

247
00:13:42,420 --> 00:13:44,750
‫just so they wrap onto the next line.

248
00:13:46,619 --> 00:13:48,030
‫Let's say JavaScript here.

249
00:13:51,950 --> 00:13:55,610
‫All right, so we are already almost done here.

250
00:13:55,610 --> 00:13:57,330
‫So the only thing that is missing

251
00:13:57,330 --> 00:14:00,190
‫and which I told you is not really mandatory

252
00:14:00,190 --> 00:14:05,107
‫because it is quite confusing is the background color here.

253
00:14:06,309 --> 00:14:08,990
‫So how do we do the background color?

254
00:14:08,990 --> 00:14:12,800
‫Well, first of all, I will pass in a string with the name

255
00:14:12,800 --> 00:14:14,980
‫of the color.

256
00:14:14,980 --> 00:14:17,670
‫So let's call that prop color.

257
00:14:17,670 --> 00:14:21,089
‫And then for react, the color that I want, well,

258
00:14:21,089 --> 00:14:23,509
‫I'm not really sure, let's just use blue.

259
00:14:25,209 --> 00:14:27,190
‫So I could, of course,

260
00:14:27,190 --> 00:14:29,380
‫also do some hexadecimal value right here.

261
00:14:31,290 --> 00:14:32,970
‫So I will just leave that there for now.

262
00:14:35,719 --> 00:14:40,659
‫So HTML, CSS, let's do orange, red for this one.

263
00:14:43,499 --> 00:14:45,370
‫Then here, yellow.

264
00:14:48,970 --> 00:14:52,429
‫And while Svelte is also kind of orange.

265
00:14:52,429 --> 00:14:54,920
‫So, let's do that.

266
00:14:54,920 --> 00:14:56,990
‫Okay, so we passed in a color.

267
00:14:56,990 --> 00:14:59,680
‫Now it's time to use it here.

268
00:14:59,680 --> 00:15:02,360
‫So, what we want to do is to edit here

269
00:15:02,360 --> 00:15:03,880
‫as a background color.

270
00:15:05,050 --> 00:15:09,270
‫So basically, we want to add an individual style to each

271
00:15:09,270 --> 00:15:11,250
‫of these skill components.

272
00:15:11,250 --> 00:15:13,920
‫And do you remember how we can do that?

273
00:15:13,920 --> 00:15:17,219
‫Well, we can just use the style property,

274
00:15:17,219 --> 00:15:21,780
‫or actually the style prop, as we now know, it is called.

275
00:15:21,780 --> 00:15:24,820
‫So each of these is called a prop, even here.

276
00:15:24,820 --> 00:15:27,840
‫So like even this class name in JSX

277
00:15:27,840 --> 00:15:31,750
‫and also this style is called a prop.

278
00:15:31,750 --> 00:15:35,879
‫So we enter JavaScript mode, and then we create an object

279
00:15:35,879 --> 00:15:40,870
‫with the property of background color

280
00:15:40,870 --> 00:15:43,860
‫and then here all we do is to use

281
00:15:43,860 --> 00:15:45,470
‫that prop that we passed in.

282
00:15:46,630 --> 00:15:48,463
‫So that's props.color.

283
00:15:51,059 --> 00:15:54,869
‫Give it a save, and beautiful.

284
00:15:54,869 --> 00:15:57,330
‫So that worked.

285
00:15:57,330 --> 00:15:59,310
‫So maybe you also got this.

286
00:15:59,310 --> 00:16:02,510
‫And if you did, then really congratulations.

287
00:16:02,510 --> 00:16:04,580
‫This year was the trickiest part,

288
00:16:04,580 --> 00:16:07,259
‫but my main concern here was actually

289
00:16:07,259 --> 00:16:09,590
‫to get you writing these components here

290
00:16:09,590 --> 00:16:13,430
‫on your own and have all of them return some JSX

291
00:16:13,430 --> 00:16:15,130
‫and then of course apply

292
00:16:15,130 --> 00:16:17,990
‫your new knowledge about props.

293
00:16:17,990 --> 00:16:20,760
‫So, having these two components here

294
00:16:20,760 --> 00:16:23,469
‫basically communicate with one another.

295
00:16:23,469 --> 00:16:26,440
‫So this is really, really important that you understood

296
00:16:26,440 --> 00:16:27,600
‫what is happening here.

297
00:16:28,619 --> 00:16:30,900
‫Just make this a little bit prettier here.

298
00:16:33,620 --> 00:16:35,090
‫Let's do actually this one orange

299
00:16:35,090 --> 00:16:37,710
‫and this other one orange-red.

300
00:16:37,710 --> 00:16:41,030
‫And even though these colors are not perfect,

301
00:16:41,030 --> 00:16:44,559
‫they are at least a bit better than they were before.

302
00:16:44,559 --> 00:16:48,059
‫All right, so hopefully you found this challenge useful

303
00:16:48,059 --> 00:16:50,270
‫and hopefully it helped you really

304
00:16:50,270 --> 00:16:54,720
‫to understand this concept of props here even better.

305
00:16:54,720 --> 00:16:57,920
‫And again, if for some reason you weren't able to do all

306
00:16:57,920 --> 00:17:01,780
‫of this on your own, then please really, really don't worry.

307
00:17:01,780 --> 00:17:04,040
‫There's plenty of time to learn all

308
00:17:04,040 --> 00:17:05,940
‫of this stuff throughout the course.

309
00:17:05,940 --> 00:17:09,140
‫And I'm 100% that by the end of it,

310
00:17:09,140 --> 00:17:12,000
‫or even after a few sections already,

311
00:17:12,000 --> 00:17:15,750
‫you will start to get really good at React.

312
00:17:15,750 --> 00:17:18,550
‫But now let's keep going and keep learning

313
00:17:18,550 --> 00:17:21,520
‫about some more fundamental React principles

314
00:17:21,520 --> 00:17:22,770
‫and techniques.