1
00:00:00,360 --> 00:00:07,620
Nice work, we've got our list now, granted, there's a bunch of hard core values, but of course we'll

2
00:00:07,620 --> 00:00:08,790
fix that a little bit later.

3
00:00:09,150 --> 00:00:15,690
Now, I want to focus on the presentation because it looks somewhat OK, but at the end of the day,

4
00:00:15,690 --> 00:00:18,620
it could look a little bit less hideous.

5
00:00:19,110 --> 00:00:25,860
So essentially, I would want to set up some kind of grid layout with some columns and maybe a better

6
00:00:25,860 --> 00:00:26,730
coloring as well.

7
00:00:26,970 --> 00:00:33,270
And in the process, we'll take a look at how we can add to our REACT project.

8
00:00:33,570 --> 00:00:39,360
Now, I also would like to mention that this is going to be the only video where we'll type out the

9
00:00:39,540 --> 00:00:42,830
choices for the remaining of the course since it is the right course.

10
00:00:42,840 --> 00:00:48,360
At the end of the day, all the services is already prepared, whether that is going to be examples

11
00:00:48,660 --> 00:00:50,920
or project or whatever.

12
00:00:51,190 --> 00:00:55,710
However, in this case, in this video, yes, we will type out the properties.

13
00:00:55,980 --> 00:00:59,280
Now, if you're not too familiar with siestas, don't worry.

14
00:00:59,610 --> 00:01:03,730
Just type them along and we will be in good shape.

15
00:01:04,110 --> 00:01:04,500
So.

16
00:01:05,290 --> 00:01:12,790
We've got our project now if I navigate to a new tab and by the way, I think I failed to mention that

17
00:01:12,790 --> 00:01:18,450
if you would want to see your project, you need to navigate to a localhost three thousand.

18
00:01:18,820 --> 00:01:27,190
So essentially, when the def server spins up the server, the port is localhost and then three thousand,

19
00:01:27,340 --> 00:01:29,600
that's the one that you're looking for.

20
00:01:29,620 --> 00:01:31,840
If I open this up, of course, this is what I see.

21
00:01:31,840 --> 00:01:39,460
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

22
00:01:39,520 --> 00:01:46,230
minimal grid layout with some columns and maybe a little bit different styling as well.

23
00:01:46,780 --> 00:01:53,350
And if I take a look at my project, yeah, of course I have the reactors and that is very useful.

24
00:01:53,710 --> 00:01:56,530
But of course, I can also inspect the elements.

25
00:01:56,530 --> 00:01:56,950
Correct.

26
00:01:57,340 --> 00:01:58,730
And what I see here is the route.

27
00:01:58,780 --> 00:02:06,520
Like I said, this is where we place all our app and then we have a section since that is Matak.

28
00:02:06,520 --> 00:02:10,800
And then I have the article on this also underscores the point about those devs.

29
00:02:11,260 --> 00:02:17,200
It's not like they all the more lives you'll place over here, the more harder it's going to be, of

30
00:02:17,200 --> 00:02:22,530
course, for you to navigate around your project because you have lived there.

31
00:02:22,990 --> 00:02:26,850
So, again, I'm returning to that point, but I think it's quite important.

32
00:02:27,250 --> 00:02:31,960
And of course, as you can see, as I'm hovering around, these are my hands.

33
00:02:31,960 --> 00:02:34,720
So we could put two and two together.

34
00:02:35,570 --> 00:02:42,010
We have the demo now, how do we usually access we create some kind of successful correct.

35
00:02:42,470 --> 00:02:49,730
So let's now get back to our project and we're looking in the source and we'll create a new file.

36
00:02:49,970 --> 00:02:51,500
We can call it whatever we want.

37
00:02:51,500 --> 00:02:58,070
But of course, convention is that if this is the file for next year, then I might as well call it

38
00:02:58,070 --> 00:02:59,180
index C.

39
00:02:59,180 --> 00:02:59,930
S s.

40
00:03:00,320 --> 00:03:06,800
So once I create this file, let me just add some general styling and then, of course, we'll need

41
00:03:06,800 --> 00:03:10,940
to figure out how we can attach it, because I can tell right away whatever changes.

42
00:03:10,970 --> 00:03:11,390
All right.

43
00:03:11,420 --> 00:03:15,860
Right now won't affect our project because we haven't connected to.

44
00:03:16,070 --> 00:03:25,670
Now, what I would want is to set up a basic reset where we've got a margin of zero than padding zero

45
00:03:26,870 --> 00:03:27,740
zero.

46
00:03:27,740 --> 00:03:35,330
And then we'll set up a box sizing to be a border box, box sizing to be border box.

47
00:03:35,780 --> 00:03:40,420
And then let's also target the body with some background and the color.

48
00:03:40,820 --> 00:03:45,010
So we're looking for the body and font family.

49
00:03:45,380 --> 00:03:47,990
And here I'll go for a system font.

50
00:03:48,530 --> 00:03:52,380
So let's try to get the system font online.

51
00:03:52,400 --> 00:03:55,070
Also, let's add a little bit of gray background.

52
00:03:55,310 --> 00:04:04,670
So we go with the background and then we're looking for hash tag F one, F five, F eight like Shell.

53
00:04:05,000 --> 00:04:11,800
And then lastly, I would want to add a color for all my text hash tag to try to make.

54
00:04:11,840 --> 00:04:12,230
That's it.

55
00:04:12,560 --> 00:04:13,040
Beautiful.

56
00:04:13,820 --> 00:04:15,920
Now, once I've got this, of course, how do we connect it?

57
00:04:16,370 --> 00:04:23,120
Well, the same how we were importing our code, meaning functionality from the dependencies.

58
00:04:23,390 --> 00:04:26,380
We also need to import our success.

59
00:04:26,420 --> 00:04:32,690
Now, the Gotcher here is following where if it's going to be a Joska files that we haven't covered,

60
00:04:32,870 --> 00:04:34,460
of course we'll cover that a little bit later.

61
00:04:34,760 --> 00:04:37,150
Then we don't need to add the extension.

62
00:04:37,160 --> 00:04:41,630
However, if it is HFS, you need to provide a full path.

63
00:04:42,020 --> 00:04:48,950
So if I'm going for success, I'm still going for the import, then I need to use the relative path

64
00:04:49,250 --> 00:04:52,190
because this is not my project dependency anymore.

65
00:04:52,460 --> 00:04:54,410
So here I'm looking for specific file.

66
00:04:54,710 --> 00:04:57,940
So I go with a dot and then forget now what that means.

67
00:04:58,320 --> 00:05:02,990
That means that the file is in the same folder.

68
00:05:03,800 --> 00:05:08,930
If it's going to be one level up, then we're going to go to that.

69
00:05:09,140 --> 00:05:12,710
And of course, we'll take a look at that example a little bit later.

70
00:05:12,860 --> 00:05:18,710
For now, this is a relative path that just says that this file is in the same folder.

71
00:05:18,710 --> 00:05:24,860
So that and then and like I said, even that would be a JavaScript file would simply would write a file

72
00:05:24,860 --> 00:05:26,820
name, so file name like so.

73
00:05:26,840 --> 00:05:34,610
However, if this is a successful, then we need to go with X and then that and then access.

74
00:05:34,790 --> 00:05:41,880
So full extension now also of course would justify it will probably import something from there in here

75
00:05:41,900 --> 00:05:43,460
or just grabbing everything.

76
00:05:43,820 --> 00:05:47,330
So I'll save and we should notice some changes.

77
00:05:47,330 --> 00:05:50,990
And of course we do now see how the margin is not there anymore.

78
00:05:50,990 --> 00:05:57,230
The padding also the background change a little bit and overall it looks a little bit more presentable.

79
00:05:57,470 --> 00:05:58,610
So that's an awesome start.

80
00:05:58,850 --> 00:06:01,730
We know that we can start targeting the elements.

81
00:06:01,730 --> 00:06:07,310
And of course, since I know that I have these hatting ones, I could simply say something like that

82
00:06:07,310 --> 00:06:10,340
color and then a red and beautiful.

83
00:06:10,340 --> 00:06:13,250
And now all my heading ones, of course, are going to be red.

84
00:06:13,430 --> 00:06:15,050
Now, that's a little bit drastic.

85
00:06:15,380 --> 00:06:18,680
So now let's take a look at how we can work with Classis.

86
00:06:19,040 --> 00:06:24,170
So let's just remember I said class we cannot use.

87
00:06:24,230 --> 00:06:31,520
So if I go with section and then say here simply class and I don't know, I'll write this as a booklist,

88
00:06:32,060 --> 00:06:35,720
you'll notice, and I'm going to go to a bigger browser window.

89
00:06:35,720 --> 00:06:38,660
It's going to be easier to see if we take a look at the console.

90
00:06:38,900 --> 00:06:41,400
We have one invalid dom property.

91
00:06:41,840 --> 00:06:43,280
Did you mean class time?

92
00:06:43,430 --> 00:06:46,670
So we always, always need to use a class name.

93
00:06:47,240 --> 00:06:51,380
So we go back, we fix it and now we have a book again.

94
00:06:51,770 --> 00:06:53,090
Please don't worry about the case.

95
00:06:53,390 --> 00:06:55,190
This is the only time we have to write this.

96
00:06:56,000 --> 00:07:02,690
But essentially I would want to set it up as a grade once we get to, I don't know, seven sixty eight.

97
00:07:02,960 --> 00:07:11,220
So now of course I added my class to my section, the book list, just like I would in normal index,

98
00:07:11,450 --> 00:07:13,370
the normal conciousness project.

99
00:07:13,700 --> 00:07:16,720
And then of course I need to target it in the first.

100
00:07:16,820 --> 00:07:17,270
Correct.

101
00:07:17,510 --> 00:07:18,740
So we go with Booklist.

102
00:07:18,740 --> 00:07:26,690
I'll add a little bit of with so many view with that we're going to add Max with the B eleven seventy

103
00:07:26,690 --> 00:07:32,510
pixels, we're going to add a little bit of margin to bottom firearms, but I would like to place it

104
00:07:32,510 --> 00:07:33,110
in the center.

105
00:07:33,470 --> 00:07:35,160
So we'll also add on.

106
00:07:35,870 --> 00:07:41,400
And we will set it right away as grid and I'll add some gap in between.

107
00:07:41,420 --> 00:07:43,100
So a gap to RTM.

108
00:07:43,120 --> 00:07:51,140
So that just means that for Meyerrose and for the Kames or have Tewari as far as the gap, OK, looks

109
00:07:51,140 --> 00:07:52,460
already a little bit better.

110
00:07:52,680 --> 00:07:58,600
And now let's set up quickly that three column layout once we get to seven six dead.

111
00:07:58,790 --> 00:08:04,820
So we're going to go with media screen and and in here we're looking for Menwith Menwith and that will

112
00:08:04,820 --> 00:08:11,900
be equal to seven sixty eight pixels some and I'm looking for my booklist again.

113
00:08:12,290 --> 00:08:15,500
So that's the class that of course added to a section.

114
00:08:15,860 --> 00:08:25,790
And I'm looking for grid template columns and we're going to go with repeat and three and one fraction.

115
00:08:26,270 --> 00:08:30,590
So essentially once we navigate to a bigger screen, there it is.

116
00:08:30,770 --> 00:08:32,930
We have our three column layout.

117
00:08:33,290 --> 00:08:38,480
And then, of course, let's add a little bit more styling here for the book itself.

118
00:08:38,510 --> 00:08:41,690
Now, what does the book my book was about article.

119
00:08:41,690 --> 00:08:42,560
Correct again.

120
00:08:42,980 --> 00:08:46,760
Let me go back to my wrote that in the road.

121
00:08:46,760 --> 00:08:49,850
I have my list and then I have all these items.

122
00:08:50,300 --> 00:08:57,940
And of course, I would need to add a class on the article so I can target them than we navigate to

123
00:08:58,050 --> 00:08:58,610
next year.

124
00:08:58,880 --> 00:09:05,990
Now, where I would need and this class you added here where I'm rendering the book or where I'm setting

125
00:09:05,990 --> 00:09:06,400
up the book.

126
00:09:06,740 --> 00:09:09,220
And of course, the answer is where I'm setting up the book.

127
00:09:09,710 --> 00:09:14,830
So we go with article class name and that will be equal to a book.

128
00:09:15,230 --> 00:09:20,750
So now in the index, she says, Right after our media query, we go with book.

129
00:09:21,230 --> 00:09:23,210
We'll add different background.

130
00:09:23,600 --> 00:09:28,950
So we're going to go with hashtag F so white then borra radius.

131
00:09:29,690 --> 00:09:30,260
I don't know.

132
00:09:30,690 --> 00:09:33,560
I'm going to go with the one RTM thing that should do it.

133
00:09:34,040 --> 00:09:36,710
And then also I'm going to add a little bit of padding.

134
00:09:36,720 --> 00:09:43,300
So we're going to go padding to be one arms and then a two hour MS lecture.

135
00:09:43,490 --> 00:09:44,770
So that's our pattern.

136
00:09:45,170 --> 00:09:48,720
And then of course, I could also target the adding one.

137
00:09:49,010 --> 00:09:55,100
Now, the reason why I'm showing you the heading one is not because I really want to work on it, is

138
00:09:55,100 --> 00:10:00,710
because the next video I'll take a look at another way how I can do styling and react.

139
00:10:01,160 --> 00:10:03,840
So let's just target in this time, getting one.

140
00:10:03,950 --> 00:10:08,930
Now, again, I can target all the hitting ones if I want, but a little bit more precise would be going

141
00:10:08,930 --> 00:10:10,700
for the book and then hitting one.

142
00:10:10,910 --> 00:10:18,980
And then I'll just say margin top to be equal to zero point five arms and that's it.

143
00:10:18,990 --> 00:10:20,660
And of course we add the margin.

144
00:10:21,020 --> 00:10:25,340
So that probably is the most straightforward way out.

145
00:10:25,340 --> 00:10:29,870
And that's how I, of course, keep in mind that this works nicely.

146
00:10:29,870 --> 00:10:36,890
If you have somewhat of a small project, the bigger the project gets, then of course, you need to

147
00:10:37,070 --> 00:10:44,360
start spinning your wheels because still same issues apply as far as, for example, name collisions

148
00:10:44,360 --> 00:10:48,860
or you cannot reuse the same name, essentially the same rules and with access.

149
00:10:49,100 --> 00:10:56,150
So that's usually when, for example, solutions like success in JS come into play.

150
00:10:56,300 --> 00:11:02,660
And yes, we will cover that a little bit later, since I will use that solution throughout the course,

151
00:11:02,750 --> 00:11:07,250
because that's just easier for me to add all the success that Williams.

152
00:11:07,460 --> 00:11:14,890
But this is definitely one of the options where we create a infectiousness or whatever says you would

153
00:11:14,900 --> 00:11:15,200
want.

154
00:11:15,560 --> 00:11:19,760
And then in there we had our classes, we add our roles.

155
00:11:20,030 --> 00:11:27,950
And then, of course, the only thing we need to do is include that file in our index, Jayesh or Abcess

156
00:11:27,950 --> 00:11:28,700
or whatever.

157
00:11:29,060 --> 00:11:34,010
And once you included, then, of course, if you're out these classes, if you have those styles,

158
00:11:34,250 --> 00:11:42,380
they will right away affect your project, just like in a normal Shlemiel and project.