All right.
And once we're familiar with styled components, basics about me do a little bit of spring cleaning
where I want to remove these things from objects and I think I'm going to remove the handgun as well.
And then let's see how we can apply styled component in the actual React component, because at the
moment, we just created two separate react components by the name of a button, which is nice.
You can keep them in the separate files and all that.
But the reality is that, of course, you'll be creating a react component with some logic, not just
style components where you have a little bit of styles and basic logic.
And the way we do that is the same way where again, we go with import, when we're looking for styled
and we're looking for styled components.
So we get the default export in mind.
We want to create some kind of component, correct?
We want to create that style component.
And it's always my preference to call this a wrapper and I'll talk about a little bit more.
Once I show you where all the styles for the project are, but basically this signals to me that this
is going to be styled component with just the styles.
And then we go with styled.
And again, we need to come up with some type of element.
And in my case, I'm going to go with main why on?
Because I'm already wrapping everything in the main tags.
So since my wrapper is going to be doing the same thing, it's going to be wrapping the entire component.
I might as well go with the main tags over here and we want to scroll up a little bit and instead of
the main tags, we're going to go with the wrapper.
And what's really, really cool is the fact that now I can select all the elements that are inside my
React component.
And what's even better, I can select the classes as well.
Now there's more features and also nice things like in.
But again, this is not styled components, of course.
So we'll just focus on the basics.
And again, what is going to happen if we navigate to the big screen right now?
What you'll notice in the road here is the fact that this main one essentially will have that unique
class.
Now we don't see anything at the moment because there's no styles.
But if I start targeting the moment, in my case, I'm going to be looking for it now.
And if we apply some styles, let's go here with with.
And this is the case where I'm going to use these versus variable, which is going to be the fluid with.
So if you want to take a look at the value, please be my guest again.
This is not going to be a CIUSSS course.
This is pretty much going to be the only component where we set up these sets together, so we set up
fluid with.
We also want to go with Max with, which also is going to be a yes, that's variable when we want to
place it always in the center.
So we're going to go with margin zero and then let's add height and I have specific height for two now.
Again, that is set up as a yes, that's a variable.
So we're going to go here with nav, right?
And then we want to display it as flex.
So display and we're looking for Flex and I want to always align it in the center.
So we're going to go with a line items center.
So once we have applied this as a sign off, you can see here I messed that up on my spelling.
This should be an right.
I might add is, I believe, six Mariam's.
And you know what, also, this is not a with.
This should be a.
So once we save it, this is the nav.
This is how it's going to look like.
And again, on a big screen, what you'll notice is this class.
So what happens if I have another styled component in there?
I'll have the nav and I apply the styles.
They won't be colliding because of this unique class, because now for my name one, I have this main
class, I'm inside of it when I have this now.
Notice how we're targeting it.
So we have this unique class and we're looking forward to nav.
Hopefully that's clear.
So now let's keep on styling and I want to add styles to this page.
Like I said, this container is already a global class that we're using, but now I want to apply some
styles on that page.
So we're going to go here with page class and then we're looking for men height and we use Cork for
that.
And I'll say 100 percent of the screen size and we'll just subtract the math height.
Why?
Well, because I'm using the knife I already for my navigation.
So let's go here with now and nine, right?
OK, so let's say that.
And then we want to go with display grid since I have to come right out here.
So I have my page and this is going to be the first column, the info and then the second one will be
my image.
So let's go here with display grid.
Now this is for the small screen.
So there's going to be no columns at the moment.
Let's go with a line items and let's set it equal to edge center.
And then also, I want to add a little bit of negative margin to the top because I just want to lift
it up a little bit.
So I'm going to go here with margin top and then minus three grams.
And again, the reason why my look is so messed up because I have them then.
And also keep in mind that I have this image, which I'm going to remove in a second.
So once we're done with the page, let's style getting one.
And then in here, let's go for font weight on seven hundred and nine.
Like I mentioned, we can actually do the next thing instead of the styled components, just like Wood
says.
So essentially, I have had one and I want to style the span that is inside of that one.
The way we can do that, we can go span here.
So now this is going to be targeting only the spans that are inside.
Make one.
And then let me go with my primary color.
So primary Manuel set it equal to five hundred, so that should be our heading.
And then let's just add a little bit of color to a paragraph.
So let's go over here.
Let's say color bar.
I have the gray color for that.
I'm going to set it up equal to a grey of six hundred, so that was going to be my paragraph.
Then, like I said on a small screen, I don't want to display the image, so I'm going to go with.
Main IMG and then display.
And that's going to be for a small screen.
And then only once we get you nine hundred ninety two, I want to set up a two come around and then
I also want to display the main image, how I can do that and style component while we go here with
me here.
And then we don't need to have the screen.
We just go with men with.
Men and wealth is equal to nine hundred ninety two pixels, and then what do we want to do?
We want to grab the page here and we want to go with grid template columns, one fraction, one for
action.
So this is our home layout.
And then let's add a little bit of gap in between.
So I'm going to go with column gap on or set it equal to three hours.
And then once we get to the big screen, I also want to display the image.
So I'm going to go over here with the main image.
And let's just go display and block.
Once we save it, we should see is a best look on a big screen.
And if I make this one smaller.
Notice how the image disappears.
And basically, this is our small screen layout.
Congrats on completing the landing page and in the process, learning the basics of and components.
And let me emphasize one more time where this is going to be the only component that we styled together.
Because as you can see, it doesn't have even that many styles, but we already spent significant time
on this.
So starting with the next video, I'll show you where you can get all the styles for the project.