- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.400 --> 00:00:02.340
Now that we have all of our data,
2
00:00:02.340 --> 00:00:06.400
and we have all of the JSX structure that we're gonna need,
3
00:00:06.400 --> 00:00:09.020
now we can actually implement the styles
4
00:00:09.020 --> 00:00:11.800
on this portfolio detail page.
5
00:00:11.800 --> 00:00:14.420
So let's do that in this guide.
6
00:00:14.420 --> 00:00:16.770
I'm gonna open up Visual Studio Code,
7
00:00:16.770 --> 00:00:19.410
and we have, in the last guide,
8
00:00:19.410 --> 00:00:23.220
we added the full JSX structure we're gonna need,
9
00:00:23.220 --> 00:00:27.790
so now I'm gonna open up our main style sheet file here,
10
00:00:27.790 --> 00:00:30.870
and we're gonna add a new file,
11
00:00:30.870 --> 00:00:32.300
and then I'm gonna import it.
12
00:00:32.300 --> 00:00:34.900
So if you go into the style directory,
13
00:00:34.900 --> 00:00:38.430
we already have a directory called portfolio there,
14
00:00:38.430 --> 00:00:40.537
I'm gonna create a new file here,
15
00:00:40.537 --> 00:00:44.730
I'm just gonna call it detail.scss.
16
00:00:44.730 --> 00:00:49.730
And then in the main file, I'm going to import that.
17
00:00:49.800 --> 00:00:51.330
So right under list,
18
00:00:51.330 --> 00:00:54.407
I'll say I want to import that detail file.
19
00:00:54.407 --> 00:00:57.590
And then from there, I can close that out.
20
00:00:57.590 --> 00:00:59.240
I'm also gonna zoom this in
21
00:00:59.240 --> 00:01:01.320
just to make it a little bit easier to see.
22
00:01:01.320 --> 00:01:03.870
And now we can take a look at our JSX code
23
00:01:03.870 --> 00:01:05.500
and see what we're gonna need.
24
00:01:05.500 --> 00:01:07.220
We're gonna need a class name
25
00:01:07.220 --> 00:01:09.520
called portfolio-detail-wrapper.
26
00:01:09.520 --> 00:01:12.130
That's gonna wrap up all of the styles
27
00:01:12.130 --> 00:01:14.030
that we are going to add.
28
00:01:14.030 --> 00:01:16.190
Then we're gonna have a banner style,
29
00:01:16.190 --> 00:01:18.250
or banner class inside of it,
30
00:01:18.250 --> 00:01:20.760
a portfolio-detail-description,
31
00:01:20.760 --> 00:01:23.910
and then a bottom-content-wrapper and a site-link.
32
00:01:23.910 --> 00:01:26.870
So we're gonna add all of those here in this guide.
33
00:01:26.870 --> 00:01:28.390
That's gonna give our styles
34
00:01:28.390 --> 00:01:29.600
kind of what we're going for.
35
00:01:29.600 --> 00:01:30.800
So let's start
36
00:01:30.800 --> 00:01:35.297
with that portfolio-detail-wrapper
37
00:01:36.800 --> 00:01:37.740
class name.
38
00:01:37.740 --> 00:01:40.430
And one thing that I do quite often
39
00:01:40.430 --> 00:01:44.240
is I'm gonna move this here on the right-hand side,
40
00:01:44.240 --> 00:01:45.780
so I'm gonna grab that tab,
41
00:01:45.780 --> 00:01:47.350
and now it's a little bit easier
42
00:01:47.350 --> 00:01:49.010
to see each one of these names,
43
00:01:49.010 --> 00:01:50.800
so I don't have to be switching
44
00:01:50.800 --> 00:01:53.090
from one file back to the other one.
45
00:01:53.090 --> 00:01:55.820
So inside of that portfolio-detail-wrapper,
46
00:01:55.820 --> 00:02:00.003
I simply wanna say that this is gonna have a width of 100vw.
47
00:02:01.300 --> 00:02:06.040
So that's essentially saying I want the window width
48
00:02:06.040 --> 00:02:09.460
to go all the way from one side to the other side.
49
00:02:09.460 --> 00:02:11.060
That's all I'm gonna add there.
50
00:02:11.060 --> 00:02:12.517
Then for our banner styles,
51
00:02:12.517 --> 00:02:15.670
I'm gonna create this banner class definition,
52
00:02:15.670 --> 00:02:18.250
so that is what we have right here.
53
00:02:18.250 --> 00:02:20.920
It's that first nested div.
54
00:02:20.920 --> 00:02:24.760
And for that banner, I'm gonna say that I wanna have this
55
00:02:24.760 --> 00:02:27.240
to have a height of 300 pixels,
56
00:02:27.240 --> 00:02:30.580
and then I want it to be a flex container,
57
00:02:30.580 --> 00:02:33.280
so I'm gonna call it display: flex.
58
00:02:33.280 --> 00:02:34.900
And then inside of it,
59
00:02:34.900 --> 00:02:38.900
let's say we wanna have justify-content is gonna be center.
60
00:02:38.900 --> 00:02:42.150
Align-items is also gonna be center
61
00:02:42.150 --> 00:02:43.920
because we want that logo
62
00:02:43.920 --> 00:02:47.220
to be centered vertically and horizontally.
63
00:02:47.220 --> 00:02:50.460
And then lastly, let's add a shadow to this.
64
00:02:50.460 --> 00:02:54.240
So I'm gonna say box-shadow,
65
00:02:54.240 --> 00:02:59.240
just like this, and then I'm gonna go with zero pixels,
66
00:02:59.550 --> 00:03:01.480
15 pixels, 20 pixels.
67
00:03:01.480 --> 00:03:06.160
And then for color, I'm gonna use a rgba color.
68
00:03:06.160 --> 00:03:09.560
So rgba, that allows me to use
69
00:03:09.560 --> 00:03:11.400
red, green, blue colors,
70
00:03:11.400 --> 00:03:13.880
and then the a, it stands for alpha,
71
00:03:13.880 --> 00:03:17.070
which means we're gonna be able to add some transparency.
72
00:03:17.070 --> 00:03:19.490
So I'm gonna say zero, zero,
73
00:03:19.490 --> 00:03:21.629
zero, and then 0.3.
74
00:03:21.629 --> 00:03:24.010
This is very latent type of shadow.
75
00:03:24.010 --> 00:03:26.430
So let's hit Save there,
76
00:03:26.430 --> 00:03:29.030
and let's also just go take a look at it and see.
77
00:03:29.030 --> 00:03:31.880
And you can see that we actually have the first part
78
00:03:31.880 --> 00:03:33.320
of the styles that we're looking for.
79
00:03:33.320 --> 00:03:36.770
We have the banner going 300 pixels tall
80
00:03:36.770 --> 00:03:38.740
and then it's going from side to side,
81
00:03:38.740 --> 00:03:41.670
and now the logo is right in the center of it.
82
00:03:41.670 --> 00:03:45.570
So, so far, so good. That is coming along nicely.
83
00:03:45.570 --> 00:03:47.270
So now after the banner,
84
00:03:47.270 --> 00:03:51.320
we want to get this portfolio-detail-description.
85
00:03:51.320 --> 00:03:52.470
And I can just copy this
86
00:03:52.470 --> 00:03:55.400
so you don't have to watch me type that all out.
87
00:03:55.400 --> 00:03:59.150
So I'm going to say portfolio-detail-description,
88
00:03:59.150 --> 00:04:01.620
and for this, let's say that we want
89
00:04:01.620 --> 00:04:04.730
to use text-align: center.
90
00:04:04.730 --> 00:04:08.460
And then I'm gonna add some margin to the top,
91
00:04:08.460 --> 00:04:10.980
so margin to the top of 42 pixels.
92
00:04:10.980 --> 00:04:14.360
And then let's also make this a, well,
93
00:04:14.360 --> 00:04:16.550
first, let's hit Save, let's see what that does for us,
94
00:04:16.550 --> 00:04:21.300
and then I may make one change to our JSX code here
95
00:04:21.300 --> 00:04:23.650
just to give a little bit more structure.
96
00:04:23.650 --> 00:04:25.070
We'll see if it's needed or not.
97
00:04:25.070 --> 00:04:27.440
And actually, that moved everything right in the center,
98
00:04:27.440 --> 00:04:29.530
so I think we should be good.
99
00:04:29.530 --> 00:04:32.670
Let me now add some fonts changes.
100
00:04:32.670 --> 00:04:36.120
So here, let's go with a font-size
101
00:04:36.120 --> 00:04:39.640
of 1.5rem
102
00:04:39.640 --> 00:04:43.370
and then see what that looks like.
103
00:04:43.370 --> 00:04:44.203
There you go.
104
00:04:44.203 --> 00:04:46.920
It's a little bit better, but let's make it all the way.
105
00:04:46.920 --> 00:04:49.920
Let's make it 2rem and see what that does.
106
00:04:49.920 --> 00:04:52.060
There you go. I like the way that that looks.
107
00:04:52.060 --> 00:04:54.760
That's good size. Everything there is looking nice.
108
00:04:54.760 --> 00:04:57.540
Okay, so with all of that in place,
109
00:04:57.540 --> 00:05:00.330
these are all of the key things that we need,
110
00:05:00.330 --> 00:05:04.540
now let's take a look at what we have here with our link.
111
00:05:04.540 --> 00:05:06.730
Now, I'm gonna give you a little bit of hint.
112
00:05:06.730 --> 00:05:09.900
We're only gonna implement part of the styles right now
113
00:05:09.900 --> 00:05:12.600
and then in the next guide,
114
00:05:12.600 --> 00:05:16.220
we're gonna see how we can use styled components
115
00:05:16.220 --> 00:05:19.380
to create a very cool-looking button,
116
00:05:19.380 --> 00:05:22.080
and you're gonna learn kind of the third way
117
00:05:22.080 --> 00:05:24.280
we talked very early on in this course.
118
00:05:24.280 --> 00:05:26.010
We talked about some of the different ways
119
00:05:26.010 --> 00:05:27.760
you can implement styles.
120
00:05:27.760 --> 00:05:30.690
You can use inline styles like we've done,
121
00:05:30.690 --> 00:05:33.290
say, for this banner, this background image.
122
00:05:33.290 --> 00:05:35.470
We can do normal type
123
00:05:35.470 --> 00:05:38.840
of CSS or SASS styles like we're doing in this guide.
124
00:05:38.840 --> 00:05:42.020
And then you can also use styled components.
125
00:05:42.020 --> 00:05:43.820
We haven't really done that yet in this course,
126
00:05:43.820 --> 00:05:45.730
but that's what we're gonna do in the next guide,
127
00:05:45.730 --> 00:05:49.650
and we're going to use styled components for this button.
128
00:05:49.650 --> 00:05:53.000
So this button is gonna get fully done in the next guide,
129
00:05:53.000 --> 00:05:55.010
but for right now, we can at least update
130
00:05:55.010 --> 00:05:56.420
the structure of it.
131
00:05:56.420 --> 00:06:01.110
So, we're gonna drop out of portfolio-detail-description,
132
00:06:01.110 --> 00:06:05.340
and this next one's gonna be this bottom-content-wrapper.
133
00:06:05.340 --> 00:06:08.450
I'm gonna just copy that,
134
00:06:08.450 --> 00:06:12.120
and let's use that as that class name.
135
00:06:12.120 --> 00:06:14.810
And then this is gonna be pretty similar
136
00:06:14.810 --> 00:06:17.150
to what we're seeing with some of the other ones
137
00:06:17.150 --> 00:06:20.090
any time we're using a flex container.
138
00:06:20.090 --> 00:06:25.090
So here, let's go with the width of being 100 v-width,
139
00:06:25.950 --> 00:06:30.060
and we want this to be display: flex.
140
00:06:30.060 --> 00:06:32.980
Justify-content is gonna be centered,
141
00:06:32.980 --> 00:06:37.360
and then align-items is also gonna be centered.
142
00:06:37.360 --> 00:06:40.690
Hit Save, switch back, and there you go, that's working.
143
00:06:40.690 --> 00:06:43.940
We can also add a little bit margin to the top,
144
00:06:43.940 --> 00:06:48.400
so margin-top, and we'll add 42 pixels again.
145
00:06:48.400 --> 00:06:50.530
There you go, and now you have some space.
146
00:06:50.530 --> 00:06:52.730
So this is all looking really nicely.
147
00:06:52.730 --> 00:06:54.920
This is exactly how that I wanted
148
00:06:54.920 --> 00:06:57.130
to implement for this page.
149
00:06:57.130 --> 00:07:00.480
In a full portfolio, usually you'd have some more content,
150
00:07:00.480 --> 00:07:01.990
and that's perfectly fine.
151
00:07:01.990 --> 00:07:03.950
If you're doing this for your own portfolio,
152
00:07:03.950 --> 00:07:06.170
you can have a paragraph, or even a few paragraphs,
153
00:07:06.170 --> 00:07:08.210
right there for each one of your guides,
154
00:07:08.210 --> 00:07:10.250
or each one of your portfolio items,
155
00:07:10.250 --> 00:07:13.650
and that's gonna be something that'll be more descriptive.
156
00:07:13.650 --> 00:07:16.620
But for right now, I'm just trying to teach you React.
157
00:07:16.620 --> 00:07:18.220
I'm not building my own portfolio,
158
00:07:18.220 --> 00:07:20.920
so we can keep this nice and small.
159
00:07:20.920 --> 00:07:23.670
But yeah, this in a real application,
160
00:07:23.670 --> 00:07:25.670
this would probably be quite a bit larger,
161
00:07:25.670 --> 00:07:27.960
and you could style it accordingly.
162
00:07:27.960 --> 00:07:30.210
But this is a layout. I'm really happy with it.
163
00:07:30.210 --> 00:07:32.060
If you come to the Home page
164
00:07:32.060 --> 00:07:35.600
and then switch and go to any of the other ones,
165
00:07:35.600 --> 00:07:38.800
you can see that this is working nicely
166
00:07:38.800 --> 00:07:42.270
for each one of our portfolio items.
167
00:07:42.270 --> 00:07:45.270
So we have our layout. All of that's looking nice.
168
00:07:45.270 --> 00:07:48.400
In the next guide, we're gonna see how we can work
169
00:07:48.400 --> 00:07:52.660
with styled components and create dedicated components
170
00:07:52.660 --> 00:07:55.020
that ramp up a set of styles,
171
00:07:55.020 --> 00:07:57.963
and we're gonna create a button component with them.