1
00:00:00,270 --> 00:00:00,660
All right.

2
00:00:01,020 --> 00:00:06,630
And once we're familiar with styled components, basics about me do a little bit of spring cleaning

3
00:00:07,380 --> 00:00:12,900
where I want to remove these things from objects and I think I'm going to remove the handgun as well.

4
00:00:13,560 --> 00:00:20,550
And then let's see how we can apply styled component in the actual React component, because at the

5
00:00:20,550 --> 00:00:27,010
moment, we just created two separate react components by the name of a button, which is nice.

6
00:00:27,030 --> 00:00:29,190
You can keep them in the separate files and all that.

7
00:00:29,640 --> 00:00:36,420
But the reality is that, of course, you'll be creating a react component with some logic, not just

8
00:00:36,990 --> 00:00:41,460
style components where you have a little bit of styles and basic logic.

9
00:00:41,790 --> 00:00:48,180
And the way we do that is the same way where again, we go with import, when we're looking for styled

10
00:00:48,450 --> 00:00:50,910
and we're looking for styled components.

11
00:00:50,970 --> 00:00:54,680
So we get the default export in mind.

12
00:00:54,720 --> 00:00:58,210
We want to create some kind of component, correct?

13
00:00:58,290 --> 00:00:59,970
We want to create that style component.

14
00:01:00,390 --> 00:01:05,580
And it's always my preference to call this a wrapper and I'll talk about a little bit more.

15
00:01:05,820 --> 00:01:11,220
Once I show you where all the styles for the project are, but basically this signals to me that this

16
00:01:11,220 --> 00:01:14,190
is going to be styled component with just the styles.

17
00:01:14,620 --> 00:01:16,080
And then we go with styled.

18
00:01:16,430 --> 00:01:20,370
And again, we need to come up with some type of element.

19
00:01:20,580 --> 00:01:23,340
And in my case, I'm going to go with main why on?

20
00:01:23,370 --> 00:01:26,640
Because I'm already wrapping everything in the main tags.

21
00:01:27,060 --> 00:01:32,380
So since my wrapper is going to be doing the same thing, it's going to be wrapping the entire component.

22
00:01:32,400 --> 00:01:39,360
I might as well go with the main tags over here and we want to scroll up a little bit and instead of

23
00:01:39,360 --> 00:01:41,280
the main tags, we're going to go with the wrapper.

24
00:01:41,730 --> 00:01:48,720
And what's really, really cool is the fact that now I can select all the elements that are inside my

25
00:01:48,720 --> 00:01:49,440
React component.

26
00:01:49,950 --> 00:01:53,790
And what's even better, I can select the classes as well.

27
00:01:54,210 --> 00:01:58,200
Now there's more features and also nice things like in.

28
00:01:58,950 --> 00:02:01,650
But again, this is not styled components, of course.

29
00:02:01,650 --> 00:02:04,040
So we'll just focus on the basics.

30
00:02:04,050 --> 00:02:08,580
And again, what is going to happen if we navigate to the big screen right now?

31
00:02:08,759 --> 00:02:15,770
What you'll notice in the road here is the fact that this main one essentially will have that unique

32
00:02:15,770 --> 00:02:16,140
class.

33
00:02:16,470 --> 00:02:19,140
Now we don't see anything at the moment because there's no styles.

34
00:02:19,140 --> 00:02:24,120
But if I start targeting the moment, in my case, I'm going to be looking for it now.

35
00:02:24,390 --> 00:02:27,500
And if we apply some styles, let's go here with with.

36
00:02:27,900 --> 00:02:33,030
And this is the case where I'm going to use these versus variable, which is going to be the fluid with.

37
00:02:33,540 --> 00:02:36,680
So if you want to take a look at the value, please be my guest again.

38
00:02:36,690 --> 00:02:38,430
This is not going to be a CIUSSS course.

39
00:02:38,850 --> 00:02:44,310
This is pretty much going to be the only component where we set up these sets together, so we set up

40
00:02:44,320 --> 00:02:45,060
fluid with.

41
00:02:45,510 --> 00:02:51,030
We also want to go with Max with, which also is going to be a yes, that's variable when we want to

42
00:02:51,030 --> 00:02:52,410
place it always in the center.

43
00:02:52,530 --> 00:02:59,010
So we're going to go with margin zero and then let's add height and I have specific height for two now.

44
00:02:59,040 --> 00:03:01,530
Again, that is set up as a yes, that's a variable.

45
00:03:02,010 --> 00:03:04,750
So we're going to go here with nav, right?

46
00:03:05,200 --> 00:03:07,110
And then we want to display it as flex.

47
00:03:07,500 --> 00:03:12,060
So display and we're looking for Flex and I want to always align it in the center.

48
00:03:12,060 --> 00:03:15,210
So we're going to go with a line items center.

49
00:03:15,990 --> 00:03:21,810
So once we have applied this as a sign off, you can see here I messed that up on my spelling.

50
00:03:22,200 --> 00:03:24,030
This should be an right.

51
00:03:24,240 --> 00:03:27,300
I might add is, I believe, six Mariam's.

52
00:03:27,630 --> 00:03:29,280
And you know what, also, this is not a with.

53
00:03:29,460 --> 00:03:30,630
This should be a.

54
00:03:31,020 --> 00:03:33,870
So once we save it, this is the nav.

55
00:03:34,320 --> 00:03:35,360
This is how it's going to look like.

56
00:03:35,370 --> 00:03:38,970
And again, on a big screen, what you'll notice is this class.

57
00:03:39,390 --> 00:03:44,510
So what happens if I have another styled component in there?

58
00:03:44,520 --> 00:03:47,250
I'll have the nav and I apply the styles.

59
00:03:48,520 --> 00:03:54,850
They won't be colliding because of this unique class, because now for my name one, I have this main

60
00:03:54,850 --> 00:03:58,030
class, I'm inside of it when I have this now.

61
00:03:58,420 --> 00:03:59,890
Notice how we're targeting it.

62
00:04:00,370 --> 00:04:03,880
So we have this unique class and we're looking forward to nav.

63
00:04:04,120 --> 00:04:05,110
Hopefully that's clear.

64
00:04:05,920 --> 00:04:10,540
So now let's keep on styling and I want to add styles to this page.

65
00:04:10,690 --> 00:04:16,329
Like I said, this container is already a global class that we're using, but now I want to apply some

66
00:04:16,329 --> 00:04:17,410
styles on that page.

67
00:04:17,680 --> 00:04:23,410
So we're going to go here with page class and then we're looking for men height and we use Cork for

68
00:04:23,410 --> 00:04:23,650
that.

69
00:04:24,100 --> 00:04:29,650
And I'll say 100 percent of the screen size and we'll just subtract the math height.

70
00:04:29,680 --> 00:04:30,100
Why?

71
00:04:30,130 --> 00:04:33,850
Well, because I'm using the knife I already for my navigation.

72
00:04:34,090 --> 00:04:38,490
So let's go here with now and nine, right?

73
00:04:38,640 --> 00:04:39,970
OK, so let's say that.

74
00:04:40,330 --> 00:04:45,490
And then we want to go with display grid since I have to come right out here.

75
00:04:45,970 --> 00:04:52,060
So I have my page and this is going to be the first column, the info and then the second one will be

76
00:04:52,060 --> 00:04:52,610
my image.

77
00:04:52,630 --> 00:04:55,590
So let's go here with display grid.

78
00:04:56,200 --> 00:04:57,730
Now this is for the small screen.

79
00:04:57,940 --> 00:05:00,250
So there's going to be no columns at the moment.

80
00:05:00,710 --> 00:05:05,470
Let's go with a line items and let's set it equal to edge center.

81
00:05:06,250 --> 00:05:10,920
And then also, I want to add a little bit of negative margin to the top because I just want to lift

82
00:05:10,930 --> 00:05:11,590
it up a little bit.

83
00:05:11,950 --> 00:05:16,450
So I'm going to go here with margin top and then minus three grams.

84
00:05:16,510 --> 00:05:21,040
And again, the reason why my look is so messed up because I have them then.

85
00:05:21,400 --> 00:05:25,570
And also keep in mind that I have this image, which I'm going to remove in a second.

86
00:05:26,110 --> 00:05:29,110
So once we're done with the page, let's style getting one.

87
00:05:29,680 --> 00:05:35,200
And then in here, let's go for font weight on seven hundred and nine.

88
00:05:35,710 --> 00:05:41,290
Like I mentioned, we can actually do the next thing instead of the styled components, just like Wood

89
00:05:41,290 --> 00:05:41,650
says.

90
00:05:41,830 --> 00:05:47,890
So essentially, I have had one and I want to style the span that is inside of that one.

91
00:05:48,820 --> 00:05:51,100
The way we can do that, we can go span here.

92
00:05:51,310 --> 00:05:55,480
So now this is going to be targeting only the spans that are inside.

93
00:05:55,840 --> 00:05:56,320
Make one.

94
00:05:56,710 --> 00:05:58,750
And then let me go with my primary color.

95
00:05:59,050 --> 00:06:05,740
So primary Manuel set it equal to five hundred, so that should be our heading.

96
00:06:06,190 --> 00:06:09,640
And then let's just add a little bit of color to a paragraph.

97
00:06:10,270 --> 00:06:11,470
So let's go over here.

98
00:06:11,770 --> 00:06:13,720
Let's say color bar.

99
00:06:14,350 --> 00:06:15,670
I have the gray color for that.

100
00:06:17,170 --> 00:06:22,470
I'm going to set it up equal to a grey of six hundred, so that was going to be my paragraph.

101
00:06:22,920 --> 00:06:27,600
Then, like I said on a small screen, I don't want to display the image, so I'm going to go with.

102
00:06:27,930 --> 00:06:30,750
Main IMG and then display.

103
00:06:31,170 --> 00:06:33,480
And that's going to be for a small screen.

104
00:06:33,870 --> 00:06:40,620
And then only once we get you nine hundred ninety two, I want to set up a two come around and then

105
00:06:40,800 --> 00:06:45,990
I also want to display the main image, how I can do that and style component while we go here with

106
00:06:45,990 --> 00:06:46,410
me here.

107
00:06:47,040 --> 00:06:49,260
And then we don't need to have the screen.

108
00:06:49,260 --> 00:06:50,940
We just go with men with.

109
00:06:51,860 --> 00:06:57,200
Men and wealth is equal to nine hundred ninety two pixels, and then what do we want to do?

110
00:06:57,200 --> 00:07:03,080
We want to grab the page here and we want to go with grid template columns, one fraction, one for

111
00:07:03,080 --> 00:07:03,440
action.

112
00:07:03,980 --> 00:07:05,690
So this is our home layout.

113
00:07:05,990 --> 00:07:08,180
And then let's add a little bit of gap in between.

114
00:07:08,450 --> 00:07:12,620
So I'm going to go with column gap on or set it equal to three hours.

115
00:07:13,100 --> 00:07:16,940
And then once we get to the big screen, I also want to display the image.

116
00:07:17,060 --> 00:07:18,710
So I'm going to go over here with the main image.

117
00:07:19,340 --> 00:07:23,240
And let's just go display and block.

118
00:07:23,540 --> 00:07:28,280
Once we save it, we should see is a best look on a big screen.

119
00:07:28,680 --> 00:07:30,470
And if I make this one smaller.

120
00:07:30,800 --> 00:07:33,260
Notice how the image disappears.

121
00:07:33,620 --> 00:07:37,070
And basically, this is our small screen layout.

122
00:07:37,310 --> 00:07:43,220
Congrats on completing the landing page and in the process, learning the basics of and components.

123
00:07:43,620 --> 00:07:49,070
And let me emphasize one more time where this is going to be the only component that we styled together.

124
00:07:49,070 --> 00:07:55,430
Because as you can see, it doesn't have even that many styles, but we already spent significant time

125
00:07:55,430 --> 00:07:55,760
on this.

126
00:07:55,940 --> 00:08:01,780
So starting with the next video, I'll show you where you can get all the styles for the project.