- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.690 --> 00:00:01.710
In the last guide,
2
00:00:01.710 --> 00:00:04.400
we built out our set of styles.
3
00:00:04.400 --> 00:00:08.100
And, now it's time to start implementing that
4
00:00:08.100 --> 00:00:09.540
for our homepage.
5
00:00:09.540 --> 00:00:11.110
So let's get started.
6
00:00:11.110 --> 00:00:16.110
We're going to open up the portfolio item component.
7
00:00:16.580 --> 00:00:21.580
So this is located inside of SRC components portfolio.
8
00:00:21.710 --> 00:00:24.960
And, we gonna start adding to that now.
9
00:00:24.960 --> 00:00:26.700
Now, the very first thing we're gonna do
10
00:00:26.700 --> 00:00:31.530
is we're gonna add the ability to maintain state here.
11
00:00:31.530 --> 00:00:33.640
And you'll see why in a minute,
12
00:00:33.640 --> 00:00:35.260
why we're gonna have to do that.
13
00:00:35.260 --> 00:00:38.010
So, we wanna keep track of some state.
14
00:00:38.010 --> 00:00:40.770
I'm gonna get rid of this comment from earlier,
15
00:00:40.770 --> 00:00:43.620
showing you how to use JSON Stringify.
16
00:00:43.620 --> 00:00:46.630
And now let's talk about the type of state
17
00:00:46.630 --> 00:00:49.350
that we are going to need to keep track of.
18
00:00:49.350 --> 00:00:51.420
So, what I would like to do is,
19
00:00:51.420 --> 00:00:52.570
I would like to have
20
00:00:52.570 --> 00:00:55.190
a piece of state value,
21
00:00:55.190 --> 00:00:57.110
that we can update.
22
00:00:57.110 --> 00:00:59.590
So, if we were to look at
23
00:00:59.590 --> 00:01:01.830
the end goal here,
24
00:01:01.830 --> 00:01:03.170
right now,
25
00:01:03.170 --> 00:01:07.620
if we did not do any type of dynamic behavior,
26
00:01:07.620 --> 00:01:11.270
we could simply hard-code all of the class names
27
00:01:11.270 --> 00:01:12.780
that we rolled out.
28
00:01:12.780 --> 00:01:16.490
However, if we wanna have some dynamic behavior,
29
00:01:16.490 --> 00:01:19.280
such as being able to change
30
00:01:19.280 --> 00:01:21.830
the state of the class,
31
00:01:21.830 --> 00:01:23.300
based on behavior,
32
00:01:23.300 --> 00:01:24.500
such as being able to
33
00:01:24.500 --> 00:01:28.110
scroll over something and to add or remove
34
00:01:28.110 --> 00:01:31.460
a class name, then we wanna have some state
35
00:01:31.460 --> 00:01:32.970
to keep track of that.
36
00:01:32.970 --> 00:01:35.000
And I'm gonna show you right here,
37
00:01:35.000 --> 00:01:36.890
by inspecting this,
38
00:01:36.890 --> 00:01:39.120
what we're looking to do.
39
00:01:39.120 --> 00:01:43.925 line:15%
So, if you hover over and click Inspect,
40
00:01:43.925 --> 00:01:48.290 line:15%
I'm going to select the entire item.
41
00:01:48.290 --> 00:01:52.110 line:15%
So, here we have this portfolio item wrapper.
42
00:01:52.110 --> 00:01:54.310 line:15%
Notice I'm still using the same class names
43
00:01:54.310 --> 00:01:55.550 line:15%
that I used before.
44
00:01:55.550 --> 00:01:58.720 line:15%
Watch what happens here as I hover over.
45
00:01:58.720 --> 00:02:01.970 line:15%
Do you see how right there on the bottom left-hand side
46
00:02:01.970 --> 00:02:06.330 line:15%
as I leave it, a class appears,
47
00:02:06.330 --> 00:02:07.810 line:15%
and then it disappears.
48
00:02:07.810 --> 00:02:09.140 line:15%
So that's what I'm talking about
49
00:02:09.140 --> 00:02:10.310 line:15%
when I'm talking about
50
00:02:10.310 --> 00:02:12.260 line:15%
dynamic behavior.
51
00:02:12.260 --> 00:02:15.640 line:15%
Is this class name is sliding in,
52
00:02:15.640 --> 00:02:16.910 line:15%
and then it's sliding out.
53
00:02:16.910 --> 00:02:19.670 line:15%
And that's what we're gonna build in this guide.
54
00:02:19.670 --> 00:02:21.780 line:15%
Now, we're not gonna even worry about darkening the image,
55
00:02:21.780 --> 00:02:24.280 line:15%
we're going to save that for the next guide.
56
00:02:24.280 --> 00:02:26.570 line:15%
But for right now, I simply wanna show you
57
00:02:26.570 --> 00:02:29.840
how you can change the state,
58
00:02:29.840 --> 00:02:31.340
and then also,
59
00:02:31.340 --> 00:02:34.380
be able to update things like class names,
60
00:02:34.380 --> 00:02:37.150
right in the JSX code.
61
00:02:37.150 --> 00:02:40.580
So, let's switch back to our current application.
62
00:02:40.580 --> 00:02:44.620
And inside of here, I'm going to add the state
63
00:02:44.620 --> 00:02:46.010
that we're gonna be working with.
64
00:02:46.010 --> 00:02:46.952
So, I'm gonna create a variable,
65
00:02:46.952 --> 00:02:49.993
or a piece of state here called,
66
00:02:49.993 --> 00:02:51.576
portfolioItemClass.
67
00:02:53.430 --> 00:02:55.340
And a setter,
68
00:02:55.340 --> 00:02:56.210
so I'm gonna say,
69
00:02:56.210 --> 00:02:57.310
setPortfolioItemClass.
70
00:03:00.060 --> 00:03:01.230
And for right now,
71
00:03:01.230 --> 00:03:03.700
I'm gonna set it up with a default
72
00:03:03.700 --> 00:03:05.520
of just an empty string.
73
00:03:05.520 --> 00:03:08.960
So, that is going to be the start state,
74
00:03:08.960 --> 00:03:11.080
right when the page loads, which makes sense.
75
00:03:11.080 --> 00:03:12.560
Because when it loads,
76
00:03:12.560 --> 00:03:15.040
we do not have this dynamic class.
77
00:03:15.040 --> 00:03:17.850
So now, let's talk about,
78
00:03:17.850 --> 00:03:19.460
what we're gonna need,
79
00:03:19.460 --> 00:03:22.960
to have that type of reactive behavior.
80
00:03:22.960 --> 00:03:27.420
So, we are gonna have to add some listeners to,
81
00:03:27.420 --> 00:03:30.010
this entire component here.
82
00:03:30.010 --> 00:03:33.110
So, what we're wanting is to listen,
83
00:03:33.110 --> 00:03:35.610
for whenever we're hovering over,
84
00:03:35.610 --> 00:03:38.470
and whenever that hover removes.
85
00:03:38.470 --> 00:03:40.656
Well, what we can do is,
86
00:03:40.656 --> 00:03:42.500
in this div,
87
00:03:42.500 --> 00:03:45.710
I'm gonna add in, first the class name.
88
00:03:45.710 --> 00:03:47.660
So, I'm gonna add in the class name,
89
00:03:47.660 --> 00:03:49.380
and then for right now,
90
00:03:49.380 --> 00:03:50.220
just gonna call this
91
00:03:50.220 --> 00:03:54.080
portfolio-item-wrapper.
92
00:03:54.080 --> 00:03:56.260
And so, that's gonna be the first thing
93
00:03:56.260 --> 00:03:57.630
that we have in here.
94
00:03:57.630 --> 00:03:59.650
Now, after this, though,
95
00:03:59.650 --> 00:04:01.100
I'm going to do
96
00:04:01.100 --> 00:04:04.500
the closing bracket here for the div,
97
00:04:04.500 --> 00:04:07.170
and let me also give myself a line here.
98
00:04:07.170 --> 00:04:08.760
So, inside of this div,
99
00:04:08.760 --> 00:04:11.580
I'm gonna add a couple of listeners.
100
00:04:11.580 --> 00:04:14.398 line:15%
The first one's gonna be onMouse,
101
00:04:14.398 --> 00:04:16.510 line:15%
and as you're starting to type this out,
102
00:04:16.510 --> 00:04:19.390 line:15%
you can see all of the different listeners
103
00:04:19.390 --> 00:04:21.810 line:15%
that we have available to us in React.
104
00:04:21.810 --> 00:04:23.520 line:15%
The one that we're wanting right now,
105
00:04:23.520 --> 00:04:24.353 line:15%
is onMouseEnter.
106
00:04:25.820 --> 00:04:29.140
This is essentially saying, when a user is hovering
107
00:04:29.140 --> 00:04:31.560
over this div here.
108
00:04:31.560 --> 00:04:34.880
So, I'm gonna say, onMouseEnter, and then this is
109
00:04:34.880 --> 00:04:37.130
going to run a process.
110
00:04:37.130 --> 00:04:40.010
Whenever the mouse hovers over this element,
111
00:04:40.010 --> 00:04:42.530
it's going to perform some task.
112
00:04:42.530 --> 00:04:45.190
And so, we have to tell it what we want it to do.
113
00:04:45.190 --> 00:04:47.660
For right now, let's create a function,
114
00:04:47.660 --> 00:04:48.740
let's create two of them.
115
00:04:48.740 --> 00:04:50.963
The first one is gonna be,
116
00:04:50.963 --> 00:04:52.380
handleMouseEnter.
117
00:04:55.330 --> 00:04:58.140
And then, this is not gonna take in any arguments.
118
00:04:58.140 --> 00:05:00.740
And for right now, let's just console log this out.
119
00:05:00.740 --> 00:05:05.740
We'll say, entering, or Hovering, just like this.
120
00:05:05.840 --> 00:05:09.380
And then, we'll create another function here,
121
00:05:09.380 --> 00:05:11.794
and I'm gonna call this one,
122
00:05:11.794 --> 00:05:13.211
HandleMouseLeave.
123
00:05:14.420 --> 00:05:16.800
Once again, it's not gonna take in any arguments.
124
00:05:16.800 --> 00:05:19.570
And we're gonna just console log it.
125
00:05:19.570 --> 00:05:22.810
So, console.log Leaving
126
00:05:22.810 --> 00:05:26.500
And so now, what we can do in these listeners
127
00:05:26.500 --> 00:05:27.333
is I can say,
128
00:05:27.333 --> 00:05:28.550
On mouse enter,
129
00:05:28.550 --> 00:05:29.950
so when that happens,
130
00:05:29.950 --> 00:05:31.339
I want to call
131
00:05:31.339 --> 00:05:33.756
the handleMouseEnterFunction.
132
00:05:34.943 --> 00:05:35.776
And then,
133
00:05:36.686 --> 00:05:37.769
onMouseLeave,
134
00:05:40.080 --> 00:05:41.747
I want to pass in
135
00:05:41.747 --> 00:05:43.164
handleMouseLeave.
136
00:05:44.070 --> 00:05:46.410
So we're gonna handle this function.
137
00:05:46.410 --> 00:05:48.680
So let's hit save here,
138
00:05:48.680 --> 00:05:51.340
and switch back to the browser.
139
00:05:51.340 --> 00:05:53.810 line:15%
And I'm gonna open up the console.
140
00:05:53.810 --> 00:05:55.690 line:15%
And let's see exactly what happens.
141
00:05:55.690 --> 00:05:58.970 line:15%
So, as I'm hovering over, notice there,
142
00:05:58.970 --> 00:06:01.920 line:15%
down in the bottom left-hand side it says, "Hovering".
143
00:06:01.920 --> 00:06:05.360 line:15%
And then as I take the mouse away, it says, "Leaving".
144
00:06:05.360 --> 00:06:07.110 line:15%
Hovering, leaving.
145
00:06:07.110 --> 00:06:11.890 line:15%
And it also works as you're going from side to side,
146
00:06:11.890 --> 00:06:13.000 line:15%
up and down,
147
00:06:13.000 --> 00:06:15.670 line:15%
all of these items are being triggered.
148
00:06:15.670 --> 00:06:17.210 line:15%
So that's working perfectly.
149
00:06:17.210 --> 00:06:20.300 line:15%
That means we now have the ability to listen
150
00:06:20.300 --> 00:06:23.660 line:15%
for that hover event, for that mouse-over event,
151
00:06:23.660 --> 00:06:26.490
and now because we have a function for it,
152
00:06:26.490 --> 00:06:29.340
we can actually update the behavior.
153
00:06:29.340 --> 00:06:30.830
Which is pretty cool.
154
00:06:30.830 --> 00:06:33.800
So, let's see exactly what we need to do,
155
00:06:33.800 --> 00:06:35.910
in order to accomplish that.
156
00:06:35.910 --> 00:06:39.140
So inside of Visual Studio code,
157
00:06:39.140 --> 00:06:42.880
I'm gonna say, instead of handleMouseEnter,
158
00:06:42.880 --> 00:06:45.120
just console, logging something,
159
00:06:45.120 --> 00:06:49.170
I want to set the portfolio item class.
160
00:06:49.170 --> 00:06:52.000
And so now I'm going to set it to
161
00:06:52.000 --> 00:06:54.550
some type of new class.
162
00:06:54.550 --> 00:06:57.080
So for right now, let's just call this,
163
00:06:57.080 --> 00:06:58.640
we haven't created this one,
164
00:06:58.640 --> 00:07:01.440
but let's just call it darken image.
165
00:07:01.440 --> 00:07:03.230
because that's what we're looking to do.
166
00:07:03.230 --> 00:07:05.420
And then on mouse leave,
167
00:07:05.420 --> 00:07:06.253
what we're going to do is,
168
00:07:06.253 --> 00:07:07.890
we're going to reset this.
169
00:07:07.890 --> 00:07:08.760
So I'm going to say,
170
00:07:08.760 --> 00:07:10.590
I want in handle mouse leave.
171
00:07:10.590 --> 00:07:13.470
I want to set the PortfolioItemClass,
172
00:07:13.470 --> 00:07:15.160
just to an empty string.
173
00:07:15.160 --> 00:07:17.120
So here, when the mouse enters,
174
00:07:17.120 --> 00:07:18.790
we're going to add this class,
175
00:07:18.790 --> 00:07:19.770
when it's leaving,
176
00:07:19.770 --> 00:07:22.250
we're going to remove it.
177
00:07:22.250 --> 00:07:23.083
Okay.
178
00:07:23.083 --> 00:07:25.060
So, that seems to kind of make sense.
179
00:07:25.060 --> 00:07:27.160
So now let's come down here
180
00:07:27.160 --> 00:07:29.980
and let's keep on adding some of those styles.
181
00:07:29.980 --> 00:07:32.320
So, I have my portfolio-item-wrapper.
182
00:07:32.320 --> 00:07:36.520
I'm going to now wrap up the code inside of it,
183
00:07:36.520 --> 00:07:38.010
with another div.
184
00:07:38.010 --> 00:07:40.850
So here, I'm gonna add a div,
185
00:07:40.850 --> 00:07:44.050
and then, I'm going to close it out.
186
00:07:44.050 --> 00:07:46.750
So, this is the structure you should be seeing
187
00:07:46.750 --> 00:07:48.620
is the starting div here.
188
00:07:48.620 --> 00:07:50.220
This is the main wrapper.
189
00:07:50.220 --> 00:07:51.940
And then you should have another div,
190
00:07:51.940 --> 00:07:53.190
that wraps up the name,
191
00:07:53.190 --> 00:07:54.023
the description,
192
00:07:54.023 --> 00:07:55.010
and those things.
193
00:07:55.010 --> 00:07:56.570
We're gonna get rid of the name,
194
00:07:56.570 --> 00:07:58.240
we do not need that anymore.
195
00:07:58.240 --> 00:08:01.700
And we can also remove it from here,
196
00:08:01.700 --> 00:08:03.240
coz the logo is gonna essentially
197
00:08:03.240 --> 00:08:05.400
function as the name.
198
00:08:05.400 --> 00:08:07.830
And now inside of this div,
199
00:08:07.830 --> 00:08:08.720
what we're going to do is,
200
00:08:08.720 --> 00:08:10.810
this is where we're going to place in,
201
00:08:10.810 --> 00:08:13.300
that dynamic behavior.
202
00:08:13.300 --> 00:08:16.530
So, I'm going to say inside of this div,
203
00:08:16.530 --> 00:08:18.440
I want to give a class name.
204
00:08:18.440 --> 00:08:19.612
So, className=,
205
00:08:19.612 --> 00:08:22.400
but instead of hard-coding the value in,
206
00:08:22.400 --> 00:08:25.610
what I'm going to do is, passing brackets,
207
00:08:25.610 --> 00:08:30.610
curly brackets, and then I'll pass in the little,
208
00:08:31.190 --> 00:08:32.870
this is the string interpolation.
209
00:08:32.870 --> 00:08:35.970
So, I'm going to use these two back ticks.
210
00:08:35.970 --> 00:08:39.923
And then I'll say portfolio-img-background.
211
00:08:42.690 --> 00:08:46.090
And then that one's gonna be a hard-coded value.
212
00:08:46.090 --> 00:08:47.220
Then after that,
213
00:08:47.220 --> 00:08:50.630
I'm gonna use dollar curly brackets again.
214
00:08:50.630 --> 00:08:51.790
And now I'm going to say,
215
00:08:51.790 --> 00:08:52.863
portfolioItemClass.
216
00:08:55.350 --> 00:08:59.450
So this is how we're getting that dynamic behavior.
217
00:08:59.450 --> 00:09:01.590
This is how we're able to say,
218
00:09:01.590 --> 00:09:03.870
that whatever happens here,
219
00:09:03.870 --> 00:09:06.450
whether this value is an empty string,
220
00:09:06.450 --> 00:09:08.620
like it is right at the beginning,
221
00:09:08.620 --> 00:09:10.480
or right when we leave, right?
222
00:09:10.480 --> 00:09:12.050
When we move the mouse,
223
00:09:12.050 --> 00:09:13.830
or whether it's darken image,
224
00:09:13.830 --> 00:09:17.450
we are going to be passing that in right here.
225
00:09:17.450 --> 00:09:18.580
So that's how we're gonna get
226
00:09:18.580 --> 00:09:20.580
that type of dynamic behavior.
227
00:09:20.580 --> 00:09:21.413
And then,
228
00:09:21.413 --> 00:09:24.500
we're also going to use some inline styles here.
229
00:09:24.500 --> 00:09:27.490
So this is how we're gonna have that image,
230
00:09:27.490 --> 00:09:29.270
and how we're going to make it dynamic.
231
00:09:29.270 --> 00:09:32.150
Coz notice, if you go back and you see
232
00:09:32.150 --> 00:09:33.790
each one of these images,
233
00:09:33.790 --> 00:09:36.400
they all have to be dynamic.
234
00:09:36.400 --> 00:09:39.123
Each one of these items is different.
235
00:09:39.123 --> 00:09:40.525
The URL to the image is different.
236
00:09:40.525 --> 00:09:42.380
So because of that,
237
00:09:42.380 --> 00:09:45.770
we need to pass in a background style.
238
00:09:45.770 --> 00:09:48.610
So, this is the reason why we couldn't,
239
00:09:48.610 --> 00:09:51.480
if you go back to the list code here,
240
00:09:51.480 --> 00:09:54.330
we added our portfolio image background.
241
00:09:54.330 --> 00:09:55.870
We added all this code here,
242
00:09:55.870 --> 00:09:56.820
but we didn't actually,
243
00:09:56.820 --> 00:09:57.730
if you notice,
244
00:09:57.730 --> 00:09:59.190
we didn't put an image.
245
00:09:59.190 --> 00:10:02.910
And if you were just writing a static hard-coded site,
246
00:10:02.910 --> 00:10:04.610
this is where you would have put
247
00:10:04.610 --> 00:10:07.110
that path to the image.
248
00:10:07.110 --> 00:10:09.130
So, that's what you would do there,
249
00:10:09.130 --> 00:10:12.920
but, because ours has to be dynamic,
250
00:10:12.920 --> 00:10:15.750
we're going to add it as an inline style.
251
00:10:15.750 --> 00:10:17.260
So here, I'm gonna say
252
00:10:17.260 --> 00:10:19.718
style=equals {{
253
00:10:19.718 --> 00:10:23.970
because now we're using inline styles,
254
00:10:23.970 --> 00:10:26.620
and I'm gonna give us some space to write here.
255
00:10:26.620 --> 00:10:27.772
And I'm gonna say,
256
00:10:27.772 --> 00:10:29.105
backgroundImage,
257
00:10:30.020 --> 00:10:32.230
and then I'm gonna pass in this part
258
00:10:32.230 --> 00:10:34.891
Looks a little bit weird if you've never done it before,
259
00:10:34.891 --> 00:10:35.952
I'm going to say,
260
00:10:35.952 --> 00:10:36.785
backgroundImage:
261
00:10:36.785 --> 00:10:38.918
double quotation marks here,
262
00:10:38.918 --> 00:10:42.460
URL, the start of brackets,
263
00:10:42.460 --> 00:10:44.260
and then a plus sign,
264
00:10:44.260 --> 00:10:47.293
followed by the thumb image URL,
265
00:10:48.700 --> 00:10:49.970
another plus sign,
266
00:10:49.970 --> 00:10:54.050
and then more of the double quotation marks,
267
00:10:54.050 --> 00:10:55.750
and then we're closing this out.
268
00:10:55.750 --> 00:10:58.030
I know that may look a little bit weird,
269
00:10:58.030 --> 00:11:00.120
but we'll hover over and inspect it,
270
00:11:00.120 --> 00:11:02.850
and you'll actually see how it's working
271
00:11:02.850 --> 00:11:06.890
and what this gets translated into in the HTML.
272
00:11:06.890 --> 00:11:08.720
So, let's hit Save here.
273
00:11:08.720 --> 00:11:10.900
Let's see what this is doing for us.
274
00:11:10.900 --> 00:11:12.810
So, now if you come right here,
275
00:11:12.810 --> 00:11:15.010
you can see, this is actually working.
276
00:11:15.010 --> 00:11:17.810
And notice we don't have those weird spaces anymore.
277
00:11:17.810 --> 00:11:19.660
Now we actually have,
278
00:11:19.660 --> 00:11:23.590
the right type of grid layout we're looking for.
279
00:11:23.590 --> 00:11:27.860
Now, if I inspect one of these items,
280
00:11:27.860 --> 00:11:30.210 line:15%
now notice if right here,
281
00:11:30.210 --> 00:11:31.800 line:15%
let's hover over.
282
00:11:31.800 --> 00:11:34.570 line:15%
Notice what that code we just wrote.
283
00:11:34.570 --> 00:11:37.760 line:15%
Notice what it actually got translated into.
284
00:11:37.760 --> 00:11:38.593 line:15%
Now it says,
285
00:11:38.593 --> 00:11:41.630 line:15%
style=background-image: url,
286
00:11:41.630 --> 00:11:44.750 line:15%
and then it went and it pasted in,
287
00:11:44.750 --> 00:11:47.780 line:15%
and slid in, the value to the URL,
288
00:11:47.780 --> 00:11:49.770 line:15%
and then it closed out the curly brackets.
289
00:11:49.770 --> 00:11:51.150 line:15%
That's why we needed to do that
290
00:11:51.150 --> 00:11:53.610 line:15%
because these values are dynamic.
291
00:11:53.610 --> 00:11:57.864 line:15%
So, that is how you can slide in a background image
292
00:11:57.864 --> 00:12:02.864 line:15%
whenever you're having to have different values and react.
293
00:12:02.880 --> 00:12:04.890 line:15%
So, this is all looking really good.
294
00:12:04.890 --> 00:12:09.570
Now it's just time to update the way the code inside.
295
00:12:09.570 --> 00:12:11.300
So, the description and those
296
00:12:11.300 --> 00:12:13.260
type of elements are working.
297
00:12:13.260 --> 00:12:14.850
Now, one thing before you do that,
298
00:12:14.850 --> 00:12:17.780 line:15%
let's make sure that the hover class is working.
299
00:12:17.780 --> 00:12:21.240 line:15%
So, we have the portfolio image background here.
300
00:12:21.240 --> 00:12:22.770 line:15%
And if I hover over it,
301
00:12:22.770 --> 00:12:24.660 line:15%
notice how it says darken image.
302
00:12:24.660 --> 00:12:26.140 line:15%
If I scroll away,
303
00:12:26.140 --> 00:12:28.020 line:15%
then it no longer says it.
304
00:12:28.020 --> 00:12:30.360
So, our dynamic styles are working too.
305
00:12:30.360 --> 00:12:31.840
So, so far so good.
306
00:12:31.840 --> 00:12:34.590
Everything is coming along nicely there.
307
00:12:34.590 --> 00:12:38.370
So now inside of the description,
308
00:12:38.370 --> 00:12:40.330
and inside of all this content,
309
00:12:40.330 --> 00:12:41.870
what we need to do now,
310
00:12:41.870 --> 00:12:43.036
is to add,
311
00:12:43.036 --> 00:12:45.590
so an additional div.
312
00:12:45.590 --> 00:12:47.950
So this is where we're gonna say that,
313
00:12:47.950 --> 00:12:49.970
we have this div right here.
314
00:12:49.970 --> 00:12:52.010
This is gonna be the background.
315
00:12:52.010 --> 00:12:53.730
And actually we're not even going
316
00:12:53.730 --> 00:12:55.470 line:15%
to wrap all of this in.
317
00:12:55.470 --> 00:12:58.110 line:15%
I'm simply gonna remove this second div,
318
00:12:58.110 --> 00:12:59.550
and we gonna make this what's called
319
00:12:59.550 --> 00:13:02.020
a self closing div.
320
00:13:02.020 --> 00:13:03.420
And if I hit Save,
321
00:13:03.420 --> 00:13:05.690
this div should be lined up,
322
00:13:05.690 --> 00:13:08.130
with these other values.
323
00:13:08.130 --> 00:13:10.260
So, that is the first part
324
00:13:10.260 --> 00:13:11.530
of what we need to do.
325
00:13:11.530 --> 00:13:14.410
And now, I'm going to new, create a div.
326
00:13:14.410 --> 00:13:18.100 line:15%
That's going to wrap up our description,
327
00:13:18.100 --> 00:13:19.730 line:15%
and our image.
328
00:13:19.730 --> 00:13:22.120 line:15%
So, come down here,
329
00:13:22.120 --> 00:13:25.600 line:15%
let's get rid of the secondary thumb image URL.
330
00:13:25.600 --> 00:13:27.170 line:15%
We don't need that anymore.
331
00:13:27.170 --> 00:13:28.540
And then for this div,
332
00:13:28.540 --> 00:13:32.010
let's see what this maps do inside of our list.
333
00:13:32.010 --> 00:13:35.760
This is gonna be that image text wrapper class.
334
00:13:35.760 --> 00:13:38.170
So, I can just copy this,
335
00:13:38.170 --> 00:13:41.140
and inside of portfolio item,
336
00:13:41.140 --> 00:13:42.029
I'll say,
337
00:13:42.029 --> 00:13:44.920
className=img-text-wrapper,
338
00:13:44.920 --> 00:13:45.980
just like that.
339
00:13:45.980 --> 00:13:47.570 line:15%
And then we're gonna have our
340
00:13:47.570 --> 00:13:49.090 line:15%
logo wrapper.
341
00:13:49.090 --> 00:13:50.840 line:15%
So, inside of here,
342
00:13:50.840 --> 00:13:52.603 line:15%
I'll add another div,
343
00:13:53.820 --> 00:13:56.620
and to take a look and see what this looks like.
344
00:13:56.620 --> 00:13:58.322
And one thing you can do too,
345
00:13:58.322 --> 00:13:59.800
this is kind of cool.
346
00:13:59.800 --> 00:14:03.540
If you click and drag the file in Visual Studio code,
347
00:14:03.540 --> 00:14:06.150
you can actually split this up side by side.
348
00:14:06.150 --> 00:14:08.980
So, you can look at one side and then the other.
349
00:14:08.980 --> 00:14:11.200
That's something I do quite a bit,
350
00:14:11.200 --> 00:14:14.000
especially when I'm working on a larger screen.
351
00:14:14.000 --> 00:14:15.280
So right here, we can see,
352
00:14:15.280 --> 00:14:17.130
we have that img-text-wrapper,
353
00:14:17.130 --> 00:14:19.390
and then we have the subtitle,
354
00:14:19.390 --> 00:14:22.520
and then, we have the logo-wrapper,
355
00:14:22.520 --> 00:14:23.372 line:15%
right down here.
356
00:14:23.372 --> 00:14:27.080 line:15%
So this is first let's implement the logo-wrapper.
357
00:14:27.080 --> 00:14:28.295 line:15%
So I'll say,
358
00:14:28.295 --> 00:14:31.530 line:15%
className=logo-wrapper
359
00:14:31.530 --> 00:14:33.820 line:15%
And then I'm gonna pull in that image.
360
00:14:33.820 --> 00:14:35.320 line:15%
And then I'm gonna get rid of
361
00:14:35.320 --> 00:14:37.000 line:15%
our inline styles.
362
00:14:37.000 --> 00:14:38.920 line:15%
Because we no longer want that.
363
00:14:38.920 --> 00:14:40.500 line:15%
Because what we're doing,
364
00:14:40.500 --> 00:14:44.050 line:15%
with this logo-wrapper style is,
365
00:14:44.050 --> 00:14:45.510 line:15%
we're selecting the image.
366
00:14:45.510 --> 00:14:47.760
So, now we're saying the width is 50%.
367
00:14:47.760 --> 00:14:49.630
We don't want it to be a 100%,
368
00:14:49.630 --> 00:14:52.030
and we're adding that margin-bottom.
369
00:14:52.030 --> 00:14:53.930 line:15%
So, I can add Save there,
370
00:14:53.930 --> 00:14:56.140 line:15%
and then the last thing that we have to do,
371
00:14:56.140 --> 00:14:58.930 line:15%
is add in the subtitle.
372
00:14:58.930 --> 00:15:00.830 line:15%
So, this is the description,
373
00:15:00.830 --> 00:15:02.390 line:15%
and I'm simply gonna say,
374
00:15:02.390 --> 00:15:05.090 line:15%
div className=equals,
375
00:15:05.090 --> 00:15:07.180 line:15%
and then this is subtitle,
376
00:15:07.180 --> 00:15:09.860 line:15%
or whatever you called your class.
377
00:15:09.860 --> 00:15:12.281 line:15%
Okay, let's see if this is working.
378
00:15:12.281 --> 00:15:15.610
So here, that looks pretty good.
379
00:15:15.610 --> 00:15:17.260
We solve a few centering issues,
380
00:15:17.260 --> 00:15:19.550
but you can see we have the logo,
381
00:15:19.550 --> 00:15:21.600
and okay, here, look at this.
382
00:15:21.600 --> 00:15:22.920
I can see what the issue is.
383
00:15:22.920 --> 00:15:24.890
Notice how this is working.
384
00:15:24.890 --> 00:15:28.150
We have the logo on the left hand side,
385
00:15:28.150 --> 00:15:30.880
and then we have this code right here,
386
00:15:30.880 --> 00:15:33.180
on the right hand side or description.
387
00:15:33.180 --> 00:15:35.550
So what it looks like is that,
388
00:15:35.550 --> 00:15:39.070
we have the Flexbox is taking over
389
00:15:39.070 --> 00:15:42.120
and it's showing the items side-by-side.
390
00:15:42.120 --> 00:15:43.450
We can actually fix this,
391
00:15:43.450 --> 00:15:46.230
and what I would do in a normal situation,
392
00:15:46.230 --> 00:15:48.170
when I have something that's a little bit different
393
00:15:48.170 --> 00:15:49.490
than what I wanted,
394
00:15:49.490 --> 00:15:52.150 line:15%
I'll click inspect directly in the browser,
395
00:15:52.150 --> 00:15:54.720 line:15%
and I'll actually play with these classes.
396
00:15:54.720 --> 00:15:55.940 line:15%
So, I have this image,
397
00:15:55.940 --> 00:15:57.550 line:15%
text wrapper here,
398
00:15:57.550 --> 00:15:59.810 line:15%
and I can see I'm using display flex,
399
00:15:59.810 --> 00:16:02.460 line:15%
justify content, and all of those items.
400
00:16:02.460 --> 00:16:04.190 line:15%
But what I need to also do,
401
00:16:04.190 --> 00:16:05.655 line:15%
is I need to override this,
402
00:16:05.655 --> 00:16:09.910 line:15%
and say flex direction column,
403
00:16:09.910 --> 00:16:11.720 line:15%
and now watch what happens.
404
00:16:11.720 --> 00:16:13.320
Now, when I hover over,
405
00:16:13.320 --> 00:16:14.153
look at that,
406
00:16:14.153 --> 00:16:16.300
now it's all laid out properly.
407
00:16:16.300 --> 00:16:18.630
So, all I have to do is,
408
00:16:18.630 --> 00:16:20.070
copy flex direction,
409
00:16:20.070 --> 00:16:21.220
just like this.
410
00:16:21.220 --> 00:16:22.210
And then I just need to
411
00:16:22.210 --> 00:16:27.210
add that, into this Image Text Wrapper Class.
412
00:16:27.270 --> 00:16:30.260
So go back to Visual Studio code,
413
00:16:30.260 --> 00:16:32.950
find image text wrapper,
414
00:16:32.950 --> 00:16:34.730
and paste that in.
415
00:16:34.730 --> 00:16:37.640
This is something that you are gonna be doing
416
00:16:37.640 --> 00:16:39.730
when you're building out applications.
417
00:16:39.730 --> 00:16:41.930
The browser tools are gonna be
418
00:16:41.930 --> 00:16:43.280
some of your best friends,
419
00:16:43.280 --> 00:16:45.210
because they give you the ability
420
00:16:45.210 --> 00:16:48.820
to very quickly test out changes to your styles.
421
00:16:48.820 --> 00:16:50.290
Just like we did right there.
422
00:16:50.290 --> 00:16:52.140
And then you can go take that code,
423
00:16:52.140 --> 00:16:55.760
and put it directly into your own project.
424
00:16:55.760 --> 00:16:58.810
So, that is all looking really good.
425
00:16:58.810 --> 00:16:59.900
I'm happy with it.
426
00:16:59.900 --> 00:17:02.070
And because this is all working,
427
00:17:02.070 --> 00:17:04.570
I say, let's just finish this out really quick,
428
00:17:04.570 --> 00:17:07.180
and let's add that dark style.
429
00:17:07.180 --> 00:17:08.560
So, to do that,
430
00:17:08.560 --> 00:17:10.430 line:15%
we're just gonna have to add one more class.
431
00:17:10.430 --> 00:17:12.670 line:15%
I'm gonna come all the way down to the bottom here,
432
00:17:12.670 --> 00:17:16.900 line:15%
coz, I want this to be out of all of these other items.
433
00:17:16.900 --> 00:17:19.440
Because, we may wanna use this for something else.
434
00:17:19.440 --> 00:17:22.330
So, I'm gonna create a new class here called,
435
00:17:22.330 --> 00:17:23.570
darken-img,
436
00:17:23.570 --> 00:17:28.570
which is the exact name that we're using right here,
437
00:17:29.210 --> 00:17:31.700
inside of our handle mouse enter.
438
00:17:31.700 --> 00:17:33.100
And then inside of here,
439
00:17:33.100 --> 00:17:34.830
I'm going to add an animation.
440
00:17:34.830 --> 00:17:37.870
So, I'm going to say transition for one second,
441
00:17:37.870 --> 00:17:40.370
and then, I'm gonna add a filter.
442
00:17:40.370 --> 00:17:42.590
So, this filter is going to have
443
00:17:42.590 --> 00:17:46.373
the brightness set for 10%
444
00:17:46.373 --> 00:17:47.657
hit Save.
445
00:17:47.657 --> 00:17:50.460
And let's see if this is working.
446
00:17:50.460 --> 00:17:54.403
So, come back here, and let me hit Refresh.
447
00:17:55.730 --> 00:17:59.147
Also make sure I hit Save on both of these darken-img,
448
00:18:02.695 --> 00:18:03.528
and let's see.
449
00:18:03.528 --> 00:18:05.927
It doesn't appear to be working.
450
00:18:05.927 --> 00:18:06.980
So, let's see why that's happening.
451
00:18:06.980 --> 00:18:09.563
I'm going to hit Inspect,
452
00:18:10.950 --> 00:18:12.560 line:15%
and let's see why not.
453
00:18:12.560 --> 00:18:15.570 line:15%
So, if I hover over one of these,
454
00:18:15.570 --> 00:18:17.570 line:15%
we have darken-img,
455
00:18:17.570 --> 00:18:21.220 line:15%
but it's not actually changing that background.
456
00:18:21.220 --> 00:18:25.007 line:15%
So let's see why that is so darken-img,
457
00:18:26.550 --> 00:18:28.220 line:15%
does not appear.
458
00:18:28.220 --> 00:18:29.053 line:15%
There we go.
459
00:18:29.053 --> 00:18:29.886 line:15%
Okay.
460
00:18:29.886 --> 00:18:31.847 line:15%
Filter brightness 10%.
461
00:18:31.847 --> 00:18:34.020 line:15%
And I think I know what I did wrong here.
462
00:18:34.020 --> 00:18:35.500 line:15%
And this is a great example.
463
00:18:35.500 --> 00:18:36.970 line:15%
This is once again,
464
00:18:36.970 --> 00:18:38.750 line:15%
this is a great example on why these
465
00:18:38.750 --> 00:18:40.420 line:15%
browser tools are so good.
466
00:18:40.420 --> 00:18:42.220 line:15%
It's also why I like to keep
467
00:18:42.220 --> 00:18:43.760 line:15%
my little mistakes in here,
468
00:18:43.760 --> 00:18:45.240 line:15%
because, these are probably going
469
00:18:45.240 --> 00:18:47.260 line:15%
to be things you're going to be making too.
470
00:18:47.260 --> 00:18:50.730 line:15%
Any time that you log into this console here,
471
00:18:50.730 --> 00:18:52.300 line:15%
and you see something,
472
00:18:52.300 --> 00:18:55.780 line:15%
where, whatever style you added is crossed off,
473
00:18:55.780 --> 00:18:58.110 line:15%
that means, that you wrote some code
474
00:18:58.110 --> 00:19:00.410 line:15%
that's not technically valid,
475
00:19:00.410 --> 00:19:02.470 line:15%
or it's being overridden.
476
00:19:02.470 --> 00:19:04.300 line:15%
We know nothing is being overridden,
477
00:19:04.300 --> 00:19:06.520 line:15%
because we don't have any other filters.
478
00:19:06.520 --> 00:19:07.880 line:15%
But what the issue is,
479
00:19:07.880 --> 00:19:09.620 line:15%
is that I did brightness,
480
00:19:09.620 --> 00:19:12.560 line:15%
and I wrote it kind of like as writing JSX code,
481
00:19:12.560 --> 00:19:15.600 line:15%
where I had quotation marks around it.
482
00:19:15.600 --> 00:19:19.040 line:15%
In regular SAS, this should just be like this.
483
00:19:19.040 --> 00:19:20.010 line:15%
And look at that.
484
00:19:20.010 --> 00:19:21.400 line:15%
Now it's working.
485
00:19:21.400 --> 00:19:25.640 line:15%
So, I simply need to remove those quotation marks,
486
00:19:25.640 --> 00:19:27.970
you know, open up Visual Studio code,
487
00:19:27.970 --> 00:19:29.670
switch my brightness,
488
00:19:29.670 --> 00:19:31.150
just like this,
489
00:19:31.150 --> 00:19:32.340
hit Save,
490
00:19:32.340 --> 00:19:35.700
come back here and look at that that's working.
491
00:19:35.700 --> 00:19:37.400
And that is working really nice.
492
00:19:37.400 --> 00:19:40.900
I'm loving the way that that has turned out.
493
00:19:40.900 --> 00:19:43.810
So, really nice job if you went through that.
494
00:19:43.810 --> 00:19:45.880
That's actually some pretty advanced
495
00:19:45.880 --> 00:19:50.440
type of design implementation processes that,
496
00:19:50.440 --> 00:19:52.590
a lot of times developers don't get into
497
00:19:52.590 --> 00:19:55.120
till much further along in their career.
498
00:19:55.120 --> 00:19:57.710
But, I really wanted you to be able to build something cool,
499
00:19:57.710 --> 00:20:01.260
to build something that look really neat and professional.
500
00:20:01.260 --> 00:20:04.230
And, in addition to having a cool style,
501
00:20:04.230 --> 00:20:06.950
the other thing I really wanted to give you with this,
502
00:20:06.950 --> 00:20:10.050
was to be able to see how you can use React,
503
00:20:10.050 --> 00:20:12.430
not just to create the application,
504
00:20:12.430 --> 00:20:16.010
but also how you can use it in tandem,
505
00:20:16.010 --> 00:20:19.590
with your style sheets and with your design implementations.
506
00:20:19.590 --> 00:20:20.720
Because at the end of the day,
507
00:20:20.720 --> 00:20:23.930
the reason why they named React, React,
508
00:20:23.930 --> 00:20:27.430
was because it gave you the ability to write code,
509
00:20:27.430 --> 00:20:29.700
that was able to react,
510
00:20:29.700 --> 00:20:31.040
to changes,
511
00:20:31.040 --> 00:20:33.160
to user behavior,
512
00:20:33.160 --> 00:20:35.620
and then to update your application,
513
00:20:35.620 --> 00:20:37.340
based off of that behavior.
514
00:20:37.340 --> 00:20:39.034
So, fantastic job in going through that.
515
00:20:39.034 --> 00:20:42.040
I know these last guides were kind of long,
516
00:20:42.040 --> 00:20:44.000
and there was a lot of code we wrote,
517
00:20:44.000 --> 00:20:45.610
but, if you look right here,
518
00:20:45.610 --> 00:20:49.380
we have a fantastic looking portfolio.
519
00:20:49.380 --> 00:20:50.920
So excellent job.
520
00:20:50.920 --> 00:20:51.940
In the next guide,
521
00:20:51.940 --> 00:20:53.850
we're gonna start building out the styles,
522
00:20:53.850 --> 00:20:55.323
for a navigation bar.