1 00:00:00,420 --> 00:00:05,280 Now, if you go to the website, you will see no changes and there is no problem with anything refreshments, 2 00:00:05,340 --> 00:00:06,240 although you don't know. 3 00:00:06,320 --> 00:00:10,530 You don't need to refresh the website every time because because. 4 00:00:12,040 --> 00:00:19,000 Like, the server itself refreshes the page and and if you and if you go to the website, you will see 5 00:00:19,000 --> 00:00:24,490 that the server has refreshed the website automatically, so don't need to refresh every time. 6 00:00:24,850 --> 00:00:31,420 So you just have to save the changes which you want to get reflected and that those changes will be 7 00:00:31,420 --> 00:00:32,560 reflected automatically. 8 00:00:32,560 --> 00:00:33,430 You don't need to refresh. 9 00:00:33,670 --> 00:00:38,390 OK, so now that you have RGB, the never inside the router looks good on there. 10 00:00:38,410 --> 00:00:44,170 But again and here we will be using links on the right hand side of the ball. 11 00:00:44,560 --> 00:00:45,850 So let me just. 12 00:00:46,970 --> 00:00:50,780 First of all, let me just import link, which is. 13 00:00:53,040 --> 00:00:57,360 Inside the car, Liberal says, don't forget to do that link. 14 00:00:59,180 --> 00:01:01,790 From the crowd or don't? 15 00:01:02,900 --> 00:01:05,420 As simple as that, you imported the link. 16 00:01:05,840 --> 00:01:07,400 Now I'll explain what is Link? 17 00:01:07,580 --> 00:01:10,370 Let me just use it once, so. 18 00:01:11,820 --> 00:01:12,300 Link. 19 00:01:14,820 --> 00:01:22,620 Then you have to write to this means like where your link will be redirected, like where this link 20 00:01:22,620 --> 00:01:24,340 will go, their destination of the link. 21 00:01:24,360 --> 00:01:27,300 So this will be just home page for us for now. 22 00:01:27,690 --> 00:01:33,360 And of course, this will be this will need a closing tax link, will need a cruise and get this is 23 00:01:33,360 --> 00:01:34,320 not a self-closing. 24 00:01:34,510 --> 00:01:38,580 You need to keep in mind us, so it will name is hope and will name it all. 25 00:01:39,030 --> 00:01:47,910 And we'll make it like three more copies one for contact, one for about us and that search and one 26 00:01:47,910 --> 00:01:48,480 for the menu. 27 00:01:48,510 --> 00:01:55,980 Yeah, but we'll just name it like menu and the next one would be. 28 00:01:57,970 --> 00:02:00,490 About what about us, we can call it anything. 29 00:02:01,030 --> 00:02:04,360 Then you can tell there's one contact. 30 00:02:04,990 --> 00:02:05,350 All right. 31 00:02:05,560 --> 00:02:06,460 So let me just save it. 32 00:02:07,840 --> 00:02:09,760 And let me just go to the website. 33 00:02:14,950 --> 00:02:18,840 OK, so you can see the links, although they are very, very small because of the size of the image, 34 00:02:19,270 --> 00:02:20,530 so we don't need to worry about it. 35 00:02:20,920 --> 00:02:24,100 So all my new content about and contact. 36 00:02:24,430 --> 00:02:26,260 OK, so you can see this right? 37 00:02:26,680 --> 00:02:34,740 So when we go to the school now, we have like created the peace like the peace garden of a nearby basin. 38 00:02:35,050 --> 00:02:40,480 Logo image basin, the links on the right hand side, which we discuss. 39 00:02:40,810 --> 00:02:41,890 So now we need to look. 40 00:02:42,610 --> 00:02:43,000 Look. 41 00:02:43,420 --> 00:02:47,860 Now we need to look closely and we need to make it look beautiful. 42 00:02:49,040 --> 00:02:49,430 So. 43 00:02:50,590 --> 00:02:58,030 I will create another folder here, which will be containing all of our all of our styles style, meaning 44 00:02:58,030 --> 00:03:00,010 all of the CFS files, so I will call it. 45 00:03:01,710 --> 00:03:05,820 Maybe Styles pulled off. 46 00:03:06,780 --> 00:03:09,290 So inside the stalls will look, I will create. 47 00:03:10,470 --> 00:03:14,010 I will create all the success files to all the components, different different components. 48 00:03:14,010 --> 00:03:16,080 I will create different, different CSV file store. 49 00:03:16,110 --> 00:03:17,130 There's no problem with that. 50 00:03:17,430 --> 00:03:25,320 So in the style folder, I will create a file name as nav bar dot CIUSSS. 51 00:03:26,820 --> 00:03:34,770 And hell, we will ride the sea escorted to our offshore never by dogs, so I'm not going to ride like 52 00:03:34,770 --> 00:03:39,540 CSI from scratch because this is not a CSIS thing we are learning. 53 00:03:39,540 --> 00:03:44,640 So yesterday we are more focused on the act and we are more focused on learning that yesterday. 54 00:03:44,910 --> 00:03:52,410 So we'll just be focusing on React and we'll just use the I've already written the CIUSSS earlier for 55 00:03:52,410 --> 00:03:58,080 this and I will be using that CSIS, so I will be explaining what is what, but I will just copy and 56 00:03:58,080 --> 00:04:01,050 paste the systems, which I agreed to earlier for this component. 57 00:04:01,500 --> 00:04:02,790 So let me just start here. 58 00:04:03,270 --> 00:04:04,050 So here it is. 59 00:04:04,970 --> 00:04:08,370 But this is the success or the no. 60 00:04:08,570 --> 00:04:09,410 Don't just fail. 61 00:04:09,710 --> 00:04:15,500 So as you can see, these are the normal things which you do in CSE's, like with and hide and background 62 00:04:15,500 --> 00:04:16,670 color and all of that thing. 63 00:04:17,060 --> 00:04:17,660 So. 64 00:04:19,140 --> 00:04:20,740 That's it for this CSIS file. 65 00:04:20,760 --> 00:04:23,430 Let me just show you in a let me disclose the. 66 00:04:23,940 --> 00:04:25,320 It will not close. 67 00:04:25,350 --> 00:04:27,400 Obviously, we can just minimize. 68 00:04:27,420 --> 00:04:27,870 OK. 69 00:04:28,170 --> 00:04:33,510 So let me just show you from the beginning, these are all the CSIS file, which these are all the CSIS 70 00:04:34,320 --> 00:04:41,640 code, which is hidden inside the now Bardot CSIS or below we we have we have used. 71 00:04:41,970 --> 00:04:47,310 So let me just apply the CSIS to the never let me just take control as they would. 72 00:04:47,970 --> 00:04:49,340 And let's just go to the border. 73 00:04:50,160 --> 00:04:55,740 So and now we go to the browser that we see or why I see it, this is not applied yet. 74 00:04:56,160 --> 00:05:01,950 But this is a question which most of the people on like get and they get confused why it's not showing 75 00:05:01,950 --> 00:05:02,130 up. 76 00:05:03,580 --> 00:05:09,250 Why it's not going up, so everything is as before, so why it's not showing up. 77 00:05:09,640 --> 00:05:15,570 So let me tell you why it's not showing up, so you need to import the cso's file here and inside that 78 00:05:15,580 --> 00:05:16,210 never bothered. 79 00:05:16,210 --> 00:05:16,780 Just find. 80 00:05:18,020 --> 00:05:25,160 If it's not important that Texas will not be applied to the snowboard or just component to how you will 81 00:05:25,160 --> 00:05:27,350 import the it's really, really simple. 82 00:05:27,360 --> 00:05:32,690 So you write import and then you will not provide any name, you will directly provide the location 83 00:05:32,690 --> 00:05:34,430 of the file of the see us file. 84 00:05:34,730 --> 00:05:40,760 So let me just provide a location which is styled slash. 85 00:05:43,400 --> 00:05:45,560 Now, Bond Dart, CSIS. 86 00:05:49,920 --> 00:05:50,880 Court CSIS. 87 00:05:51,570 --> 00:05:54,480 All right, let me provide a simple column and then save it. 88 00:05:55,690 --> 00:05:57,740 I hope now the CSO is applied. 89 00:05:57,760 --> 00:06:00,520 So let's just go to our browser. 90 00:06:01,550 --> 00:06:02,600 And let's just be. 91 00:06:03,740 --> 00:06:04,460 It is fresh. 92 00:06:06,120 --> 00:06:10,720 OK, there's a problem here, module not found tiles now. 93 00:06:11,070 --> 00:06:11,520 OK. 94 00:06:11,640 --> 00:06:18,930 We have misspelled something, we have misspelled the word in there, but that is never not about my. 95 00:06:19,960 --> 00:06:20,590 David, I mean. 96 00:06:22,590 --> 00:06:24,690 And us go to the browser. 97 00:06:26,760 --> 00:06:27,090 Fresh. 98 00:06:27,910 --> 00:06:29,050 Oh, wow, beautiful. 99 00:06:29,290 --> 00:06:35,860 You can see that the robot is rendered here, and all of the styling is applied to the never bought 100 00:06:35,860 --> 00:06:36,970 head, it is the logo. 101 00:06:36,980 --> 00:06:44,050 It has become small and had other links to the pages and the background color and the color of the font 102 00:06:44,050 --> 00:06:45,070 is really, really awesome. 103 00:06:45,310 --> 00:06:46,770 So this is the magic of success. 104 00:06:46,780 --> 00:06:48,200 It's it's applied. 105 00:06:49,020 --> 00:06:51,280 So let's go back to the browser. 106 00:06:52,380 --> 00:06:59,520 And one more thing before going to be a squad is that this is not responsive right now, so like if 107 00:06:59,520 --> 00:07:04,620 we decrease its size, you can see like when we decrease the size. 108 00:07:06,070 --> 00:07:08,080 So did not respond to, you know. 109 00:07:09,000 --> 00:07:14,640 This is coming here, and this is not so much to respond, to see the context as be is getting cut off. 110 00:07:15,480 --> 00:07:20,190 The contract is getting out of the work we need to do to make it responsive. 111 00:07:20,310 --> 00:07:23,550 We need to write mediocrities and the census files. 112 00:07:23,600 --> 00:07:24,330 Now what is media? 113 00:07:24,570 --> 00:07:26,160 Let me just go and expand it to. 114 00:07:27,680 --> 00:07:35,360 And then I two says file media mediocrity is something which gets applied according to the size of the 115 00:07:35,360 --> 00:07:35,700 screen. 116 00:07:35,720 --> 00:07:41,570 For example, if you provide the maximum value of 630 pixels to and then we look at it and you provide 117 00:07:41,570 --> 00:07:49,340 some styling to a class, then that style will be provided to fill the maximum of 16 pixels, only 600 118 00:07:49,340 --> 00:07:49,730 pixels. 119 00:07:49,730 --> 00:07:56,030 Only if the screen size is more than 600 pixels, that screen will not see a suspension be applied. 120 00:07:56,330 --> 00:07:57,930 That's what we're going to do now. 121 00:07:57,950 --> 00:07:59,000 I have already written it. 122 00:07:59,420 --> 00:08:00,510 Let me just commented. 123 00:08:05,530 --> 00:08:09,070 OK, let me just hit controllers now. 124 00:08:09,880 --> 00:08:11,650 Let me explain it now. 125 00:08:11,680 --> 00:08:13,810 This is the syntax of mediocrity. 126 00:08:14,110 --> 00:08:23,380 Now media only screen and this is the size like maximum of 600 pixels, like for the maximum of 600 127 00:08:23,380 --> 00:08:24,340 pixels screen. 128 00:08:24,910 --> 00:08:26,980 This styling will be implemented. 129 00:08:27,640 --> 00:08:33,820 And here it is the media only screen minimum width of 600 pixel, so minimum in the screen with this 130 00:08:33,820 --> 00:08:35,050 minimum 600 pixels. 131 00:08:35,530 --> 00:08:38,650 This styling will be implemented as simple as that. 132 00:08:38,890 --> 00:08:45,580 So when are screen sizes less less than 600 pixels or maximum of 600 pixels? 133 00:08:45,580 --> 00:08:47,500 Like, it should not be more than 600 pixels. 134 00:08:47,920 --> 00:08:52,750 So that means in the browser or tab right for these styling will be. 135 00:08:53,710 --> 00:08:54,350 Implementer. 136 00:08:54,980 --> 00:08:58,360 Well, that's not bad. 137 00:08:58,720 --> 00:09:00,340 Now let's go to robot and. 138 00:09:02,470 --> 00:09:08,820 Now, let me just go to the browser and check if the easterners applied or not noticed. 139 00:09:09,790 --> 00:09:11,080 And let me just try to. 140 00:09:13,050 --> 00:09:18,060 If it is the size so you can see that now the tax is gone. 141 00:09:18,510 --> 00:09:19,870 So now taxes are gone. 142 00:09:19,890 --> 00:09:26,850 That means we need to provide a tax for all the links to the small page right to the small width of 143 00:09:26,850 --> 00:09:27,240 the page. 144 00:09:27,540 --> 00:09:31,200 So to do that, you need to write a different.