Nice work, we've got our list now, granted, there's a bunch of hard core values, but of course we'll
fix that a little bit later.
Now, I want to focus on the presentation because it looks somewhat OK, but at the end of the day,
it could look a little bit less hideous.
So essentially, I would want to set up some kind of grid layout with some columns and maybe a better
coloring as well.
And in the process, we'll take a look at how we can add to our REACT project.
Now, I also would like to mention that this is going to be the only video where we'll type out the
choices for the remaining of the course since it is the right course.
At the end of the day, all the services is already prepared, whether that is going to be examples
or project or whatever.
However, in this case, in this video, yes, we will type out the properties.
Now, if you're not too familiar with siestas, don't worry.
Just type them along and we will be in good shape.
So.
We've got our project now if I navigate to a new tab and by the way, I think I failed to mention that
if you would want to see your project, you need to navigate to a localhost three thousand.
So essentially, when the def server spins up the server, the port is localhost and then three thousand,
that's the one that you're looking for.
If I open this up, of course, this is what I see.
I see a list of books and like I said, I just want to take a look at how we can access so we have some
minimal grid layout with some columns and maybe a little bit different styling as well.
And if I take a look at my project, yeah, of course I have the reactors and that is very useful.
But of course, I can also inspect the elements.
Correct.
And what I see here is the route.
Like I said, this is where we place all our app and then we have a section since that is Matak.
And then I have the article on this also underscores the point about those devs.
It's not like they all the more lives you'll place over here, the more harder it's going to be, of
course, for you to navigate around your project because you have lived there.
So, again, I'm returning to that point, but I think it's quite important.
And of course, as you can see, as I'm hovering around, these are my hands.
So we could put two and two together.
We have the demo now, how do we usually access we create some kind of successful correct.
So let's now get back to our project and we're looking in the source and we'll create a new file.
We can call it whatever we want.
But of course, convention is that if this is the file for next year, then I might as well call it
index C.
S s.
So once I create this file, let me just add some general styling and then, of course, we'll need
to figure out how we can attach it, because I can tell right away whatever changes.
All right.
Right now won't affect our project because we haven't connected to.
Now, what I would want is to set up a basic reset where we've got a margin of zero than padding zero
zero.
And then we'll set up a box sizing to be a border box, box sizing to be border box.
And then let's also target the body with some background and the color.
So we're looking for the body and font family.
And here I'll go for a system font.
So let's try to get the system font online.
Also, let's add a little bit of gray background.
So we go with the background and then we're looking for hash tag F one, F five, F eight like Shell.
And then lastly, I would want to add a color for all my text hash tag to try to make.
That's it.
Beautiful.
Now, once I've got this, of course, how do we connect it?
Well, the same how we were importing our code, meaning functionality from the dependencies.
We also need to import our success.
Now, the Gotcher here is following where if it's going to be a Joska files that we haven't covered,
of course we'll cover that a little bit later.
Then we don't need to add the extension.
However, if it is HFS, you need to provide a full path.
So if I'm going for success, I'm still going for the import, then I need to use the relative path
because this is not my project dependency anymore.
So here I'm looking for specific file.
So I go with a dot and then forget now what that means.
That means that the file is in the same folder.
If it's going to be one level up, then we're going to go to that.
And of course, we'll take a look at that example a little bit later.
For now, this is a relative path that just says that this file is in the same folder.
So that and then and like I said, even that would be a JavaScript file would simply would write a file
name, so file name like so.
However, if this is a successful, then we need to go with X and then that and then access.
So full extension now also of course would justify it will probably import something from there in here
or just grabbing everything.
So I'll save and we should notice some changes.
And of course we do now see how the margin is not there anymore.
The padding also the background change a little bit and overall it looks a little bit more presentable.
So that's an awesome start.
We know that we can start targeting the elements.
And of course, since I know that I have these hatting ones, I could simply say something like that
color and then a red and beautiful.
And now all my heading ones, of course, are going to be red.
Now, that's a little bit drastic.
So now let's take a look at how we can work with Classis.
So let's just remember I said class we cannot use.
So if I go with section and then say here simply class and I don't know, I'll write this as a booklist,
you'll notice, and I'm going to go to a bigger browser window.
It's going to be easier to see if we take a look at the console.
We have one invalid dom property.
Did you mean class time?
So we always, always need to use a class name.
So we go back, we fix it and now we have a book again.
Please don't worry about the case.
This is the only time we have to write this.
But essentially I would want to set it up as a grade once we get to, I don't know, seven sixty eight.
So now of course I added my class to my section, the book list, just like I would in normal index,
the normal conciousness project.
And then of course I need to target it in the first.
Correct.
So we go with Booklist.
I'll add a little bit of with so many view with that we're going to add Max with the B eleven seventy
pixels, we're going to add a little bit of margin to bottom firearms, but I would like to place it
in the center.
So we'll also add on.
And we will set it right away as grid and I'll add some gap in between.
So a gap to RTM.
So that just means that for Meyerrose and for the Kames or have Tewari as far as the gap, OK, looks
already a little bit better.
And now let's set up quickly that three column layout once we get to seven six dead.
So we're going to go with media screen and and in here we're looking for Menwith Menwith and that will
be equal to seven sixty eight pixels some and I'm looking for my booklist again.
So that's the class that of course added to a section.
And I'm looking for grid template columns and we're going to go with repeat and three and one fraction.
So essentially once we navigate to a bigger screen, there it is.
We have our three column layout.
And then, of course, let's add a little bit more styling here for the book itself.
Now, what does the book my book was about article.
Correct again.
Let me go back to my wrote that in the road.
I have my list and then I have all these items.
And of course, I would need to add a class on the article so I can target them than we navigate to
next year.
Now, where I would need and this class you added here where I'm rendering the book or where I'm setting
up the book.
And of course, the answer is where I'm setting up the book.
So we go with article class name and that will be equal to a book.
So now in the index, she says, Right after our media query, we go with book.
We'll add different background.
So we're going to go with hashtag F so white then borra radius.
I don't know.
I'm going to go with the one RTM thing that should do it.
And then also I'm going to add a little bit of padding.
So we're going to go padding to be one arms and then a two hour MS lecture.
So that's our pattern.
And then of course, I could also target the adding one.
Now, the reason why I'm showing you the heading one is not because I really want to work on it, is
because the next video I'll take a look at another way how I can do styling and react.
So let's just target in this time, getting one.
Now, again, I can target all the hitting ones if I want, but a little bit more precise would be going
for the book and then hitting one.
And then I'll just say margin top to be equal to zero point five arms and that's it.
And of course we add the margin.
So that probably is the most straightforward way out.
And that's how I, of course, keep in mind that this works nicely.
If you have somewhat of a small project, the bigger the project gets, then of course, you need to
start spinning your wheels because still same issues apply as far as, for example, name collisions
or you cannot reuse the same name, essentially the same rules and with access.
So that's usually when, for example, solutions like success in JS come into play.
And yes, we will cover that a little bit later, since I will use that solution throughout the course,
because that's just easier for me to add all the success that Williams.
But this is definitely one of the options where we create a infectiousness or whatever says you would
want.
And then in there we had our classes, we add our roles.
And then, of course, the only thing we need to do is include that file in our index, Jayesh or Abcess
or whatever.
And once you included, then, of course, if you're out these classes, if you have those styles,
they will right away affect your project, just like in a normal Shlemiel and project.