1
00:00:00,180 --> 00:00:07,560
All right, and the last thing that I want to do before we actually start typing away is to set up more

2
00:00:07,560 --> 00:00:10,440
and more assists and global styles.

3
00:00:11,070 --> 00:00:17,790
And before we continue, let me just say that throughout the project, we will use success in dress

4
00:00:18,210 --> 00:00:19,890
more specifically styled components.

5
00:00:20,520 --> 00:00:24,480
And I'm going to talk about my choices once we actually get there.

6
00:00:24,840 --> 00:00:27,090
Once we installed style components and all that.

7
00:00:27,480 --> 00:00:31,330
But with that said, don't worry, we won't be typing scissors.

8
00:00:32,020 --> 00:00:33,150
Only the first page.

9
00:00:33,150 --> 00:00:35,490
I believe the landing page will Typekit this.

10
00:00:35,490 --> 00:00:38,640
Yes, and then I'll show you where to get all the resources.

11
00:00:38,650 --> 00:00:43,710
Because, like I said before, if you start typing scissors for this type of project, then there's

12
00:00:43,710 --> 00:00:47,340
going to be easily another five hours of our time.

13
00:00:47,730 --> 00:00:55,880
And essentially, even though I'm a big fan of CIUSSS in jazz, I'm even a bigger fan of normalized

14
00:00:55,890 --> 00:01:02,700
U.S. and global styles for the following reasons because it really saves me time on the setup, and

15
00:01:02,700 --> 00:01:08,760
I use the same setup pretty much in every project, not just react when all gadsby on or whatever,

16
00:01:09,180 --> 00:01:15,060
even if it's just the email insists, I actually use this type of setup because it allows me to type

17
00:01:15,060 --> 00:01:16,500
less lines of code.

18
00:01:16,800 --> 00:01:23,040
The easiest code in the process, it speeds up the development tremendously, and you'll see what I'm

19
00:01:23,040 --> 00:01:25,050
talking about as we start using it.

20
00:01:25,560 --> 00:01:27,150
Now what is normalized here?

21
00:01:27,150 --> 00:01:33,120
So for those of you who don't know, it's a small scissors file that pretty much provides a cross browser

22
00:01:33,120 --> 00:01:37,050
consistency in the default styling of HDMI elements.

23
00:01:37,470 --> 00:01:41,130
Now, if you want to find out more info, here's the resource for Normalize.

24
00:01:41,580 --> 00:01:47,120
And as far as the install, we need to look for npm, install and then normalize this.

25
00:01:47,640 --> 00:01:49,650
So let me show you there on page.

26
00:01:50,100 --> 00:01:51,630
Basically, this is where you navigate.

27
00:01:51,960 --> 00:01:54,790
Now, if you want, you can download effectively.

28
00:01:54,810 --> 00:01:59,190
This is just going to be a success code, which you can add to any of the files you want.

29
00:01:59,190 --> 00:02:06,920
But in our case, we're going to go with npm and install when we want to import normalized RSS in the

30
00:02:06,920 --> 00:02:07,560
in the Congress.

31
00:02:07,570 --> 00:02:12,750
But what's really, really important is to place it before in next year.

32
00:02:13,260 --> 00:02:17,970
So if we take a look at our index tracks right now, we do have a nexus, correct?

33
00:02:18,210 --> 00:02:23,790
So once we install the normalized one, we want to import that in the next just because we want to apply

34
00:02:23,790 --> 00:02:25,350
it to an entire project.

35
00:02:25,440 --> 00:02:34,230
But we want to do it before in next us because in our global stars, we will be relying on the normalized

36
00:02:34,230 --> 00:02:34,470
one.

37
00:02:34,770 --> 00:02:40,440
And as far as the global stars, we just want to replace the content of the index RSS.

38
00:02:40,860 --> 00:02:48,720
Now, if you do have any questions about normalized or specific styles on my channel coding addict,

39
00:02:49,230 --> 00:02:55,800
there's an actual video by the name of defroster, where I cover everything in great detail, and I

40
00:02:55,800 --> 00:03:03,870
actually created a repo with my default starter as well, which again, I utilize pretty much in every

41
00:03:03,870 --> 00:03:04,320
project.

42
00:03:04,860 --> 00:03:08,130
So let's start by getting the normalized Jesus.

43
00:03:08,580 --> 00:03:15,270
Then just follow the link or simply type npm install normalized CIUSSS.

44
00:03:15,900 --> 00:03:18,780
And in my case, I'm going to showcase one more time to site.

45
00:03:19,200 --> 00:03:20,550
OK, this is where you navigate.

46
00:03:20,550 --> 00:03:25,710
You grab the command not to stop the server with control and see on line.

47
00:03:25,720 --> 00:03:28,740
We want to copy and paste, install normalized RSS.

48
00:03:29,010 --> 00:03:35,610
And then, like I said, we're looking for in next Jass and before next year says we simply want to

49
00:03:35,610 --> 00:03:36,390
go with import.

50
00:03:36,990 --> 00:03:39,420
And then let's just type normalize.

51
00:03:39,750 --> 00:03:40,460
And yes.

52
00:03:40,890 --> 00:03:44,490
So this is going to give us that basic setup.

53
00:03:44,790 --> 00:03:52,200
And essentially just the quick side note, when we're talking about Normalize, it's a fancier way of

54
00:03:52,200 --> 00:03:52,800
doing this.

55
00:03:53,130 --> 00:03:58,860
So if Martin zero padding, zero box sizing and we're applying that to all the elements, so this is

56
00:03:58,860 --> 00:04:01,500
just a fancier way of doing that.

57
00:04:01,890 --> 00:04:05,980
So I open this up and p.m. start online.

58
00:04:06,000 --> 00:04:10,500
And once everything is up and running, we just need to get our indexed RSS.

59
00:04:11,450 --> 00:04:16,070
Replaced by the whatever we have in the assets.

60
00:04:16,370 --> 00:04:21,170
So let me navigate to the assets we're looking for csv file in Texas.

61
00:04:21,560 --> 00:04:26,570
And again, you can either drag and drop or you can just copy the contents.

62
00:04:26,900 --> 00:04:28,940
So in my case, I think I'm just going to drag and drop.

63
00:04:29,330 --> 00:04:29,630
Yup.

64
00:04:29,840 --> 00:04:34,070
I want to move it to the source again is going to ask whether I want to replace it.

65
00:04:34,100 --> 00:04:35,380
Yep, I do.

66
00:04:35,840 --> 00:04:39,230
And then once we serve it, we should see different styles.

67
00:04:39,740 --> 00:04:47,820
And if you take a look at the index, it's pretty much a bare bones setup where I'm using some CIUSSS

68
00:04:47,840 --> 00:04:51,110
variables for two colors, so you can always replace those.

69
00:04:51,500 --> 00:04:52,700
Of course, there's some fans.

70
00:04:53,060 --> 00:04:58,100
There's also box shadows and all that, and there's some typography set up.

71
00:04:58,640 --> 00:05:02,000
And if we keep on scrolling, there's also some global classes.

72
00:05:02,180 --> 00:05:05,900
And again, the benefit of such setup is the fact that I don't have to repeat myself throughout the

73
00:05:05,900 --> 00:05:07,730
project, which in the long run.

74
00:05:07,910 --> 00:05:09,020
So a bunch of time.

75
00:05:09,680 --> 00:05:15,530
And if I ever need to customize something, I can do that very quickly with the help of stored components,

76
00:05:15,800 --> 00:05:18,080
which we're going to cover in Futuras.

77
00:05:18,410 --> 00:05:22,490
But in general, yes, this is pretty much my default setup.

78
00:05:22,760 --> 00:05:26,600
And if you do want to find out more info again, here's the video.

79
00:05:26,840 --> 00:05:33,590
When I cover everything in much greater detail, as well as the repo where you can find all the code.

80
00:05:34,010 --> 00:05:40,430
And with this in place, we can actually start typing away and I think we'll start with our landing

81
00:05:40,430 --> 00:05:40,760
page.