1 00:00:00,180 --> 00:00:05,880 OK, so now we're going to create the category component now like the which will consist of the name 2 00:00:05,880 --> 00:00:09,570 of the categories which which are available at the cafe. 3 00:00:10,130 --> 00:00:12,840 So we're going to create the category component for that. 4 00:00:12,840 --> 00:00:17,850 We need to create another file so that will be named as category dogs. 5 00:00:18,330 --> 00:00:24,900 So let's go ahead and do that inside the host, who will create the category test. 6 00:00:25,170 --> 00:00:26,730 So to be something like this? 7 00:00:29,660 --> 00:00:30,620 But a great audience. 8 00:00:31,590 --> 00:00:40,280 And here what we'll do is we'll import the boilerplate code and we have an extension that provides the 9 00:00:40,950 --> 00:00:46,590 initial starting code for any component before that, you need to install this. 10 00:00:46,880 --> 00:00:54,120 And the school extension, which is known as E7 React Redux, would have created snippets for this one. 11 00:00:55,750 --> 00:01:01,540 This extension right here, you need to install this, and that will provide a lot of connectivity to 12 00:01:01,540 --> 00:01:04,300 you and that will make your life so much easier. 13 00:01:04,780 --> 00:01:12,070 And now once of the install that extension, what you need to do is to just Type R FC and it will work 14 00:01:12,070 --> 00:01:14,080 and it will give you an option and just try to enter, OK? 15 00:01:14,380 --> 00:01:20,500 For me, it doesn't work for some reason, so I need to press control, shift B and then I need to do 16 00:01:20,500 --> 00:01:24,310 this search and then I need to press out of C. 17 00:01:25,720 --> 00:01:32,110 So that is how this works for me, but for you, it will work perfectly, I guess. 18 00:01:32,470 --> 00:01:36,640 OK, so this is the boilerplate code which we have received. 19 00:01:37,060 --> 00:01:40,060 So let me tell you this, David, which I have already received. 20 00:01:40,510 --> 00:01:46,660 And here I will write another bill so that we will be having class name. 21 00:01:47,080 --> 00:01:49,660 And we will do it like later. 22 00:01:49,660 --> 00:01:54,490 But first of all, it is just so iterative and insert the they've. 23 00:01:56,370 --> 00:02:03,300 We'll have a button, so that button will be responsible for switching between the categories, so we'll 24 00:02:03,300 --> 00:02:08,000 have a button, and as of now, we'll just start catégorie. 25 00:02:08,610 --> 00:02:12,690 And you can just go ahead and save it and. 26 00:02:14,650 --> 00:02:21,430 OK, so to display this or to render this on application, we need important inside the cabinet just 27 00:02:21,430 --> 00:02:21,760 fine. 28 00:02:22,330 --> 00:02:25,360 And what we need to do is we need to just import import. 29 00:02:27,040 --> 00:02:27,940 Category. 30 00:02:30,140 --> 00:02:36,380 If the goodie from Gladiator Curtain bought it for me, it is the best part about importing a component, 31 00:02:36,380 --> 00:02:37,610 you don't need to type everything. 32 00:02:38,390 --> 00:02:41,180 And after the underline inside the section. 33 00:02:42,370 --> 00:02:51,010 Oh, I'll start with section we can, and suddenly we can just imported like we'll be changing the things 34 00:02:51,190 --> 00:02:59,140 as we go on because things are not static and do things according to our needs. 35 00:03:00,770 --> 00:03:02,390 For that to be imported, this and we save it. 36 00:03:02,990 --> 00:03:03,770 And now. 37 00:03:07,500 --> 00:03:14,220 Let me just start off the server and start start, and this will take few seconds to load. 38 00:03:18,080 --> 00:03:23,690 Let us go to the browser and see how the changes looks forward and go ahead. 39 00:03:24,830 --> 00:03:31,940 So you can see this there's a button and that button is below are hurting, they're not what actually, 40 00:03:31,940 --> 00:03:32,570 we wondered. 41 00:03:33,090 --> 00:03:38,540 And now we'll provide some styling to the market, but we'll let us go back to our. 42 00:03:40,640 --> 00:03:42,770 And let me minimize this terminal. 43 00:03:43,910 --> 00:03:50,330 And inside the index years, all of the US, as the deciding who head only will provide the styling 44 00:03:50,330 --> 00:03:52,070 and all to our. 45 00:03:53,160 --> 00:03:53,820 Application. 46 00:03:55,250 --> 00:04:03,620 OK, so let's go ahead and dial the button container, and if you remember, we have not yet provided 47 00:04:03,620 --> 00:04:06,290 any last name for our button. 48 00:04:07,010 --> 00:04:13,880 So let's go ahead and provide some class name to the bottom of the list of all this, Dave right here 49 00:04:13,880 --> 00:04:21,920 that will have a class name of button container who will provide a class name, last name or four button 50 00:04:21,920 --> 00:04:23,810 or VTM container. 51 00:04:26,910 --> 00:04:34,020 You can also use some of the business frameworks like WhatsApp or materially why, but we are writing 52 00:04:34,020 --> 00:04:42,060 this from scratch and the motive behind is it is to make it familiar with us or not. 53 00:04:42,570 --> 00:04:50,150 And one thing I'd like to tell you that most people use like CSIS framework, they would step in material 54 00:04:50,160 --> 00:04:54,090 way at the beginning of their development phase. 55 00:04:54,120 --> 00:04:59,220 Like when when they just learned this HTML, CSS and a little bit of JavaScript, they started using 56 00:04:59,220 --> 00:05:00,310 bootstrap and what they do. 57 00:05:00,330 --> 00:05:08,850 I I highly don't recommend that because first of all, you need to explore the CSIS and explore different 58 00:05:08,850 --> 00:05:10,920 concepts of HTML and JavaScript. 59 00:05:10,920 --> 00:05:17,400 And then when you feel comfortable with CSS, then you should move on to these frameworks because are 60 00:05:17,400 --> 00:05:20,970 directly jumping on to the frameworks that makes you a little bit lazy. 61 00:05:21,300 --> 00:05:30,030 And when you go to the actual success and the concepts are not clear, so then there's a problem. 62 00:05:30,360 --> 00:05:36,450 So I recommend you to go step by step first, learn like it's HTML to assess JavaScript and then explore 63 00:05:36,990 --> 00:05:44,320 the mediocrity that the Flexbox and all of that, you know, then you should move on to the frameworks. 64 00:05:44,340 --> 00:05:47,340 OK, enough of worry, let's get back to the code. 65 00:05:47,670 --> 00:05:54,120 OK, so we want to style this button so that we provide a class name for that as well. 66 00:05:55,000 --> 00:05:58,320 So we do provide a class name of class name. 67 00:06:00,300 --> 00:06:00,920 OK. 68 00:06:01,060 --> 00:06:02,220 And that would be. 69 00:06:03,910 --> 00:06:04,720 Winter button. 70 00:06:06,580 --> 00:06:08,800 You're going to be in Britain. 71 00:06:10,320 --> 00:06:15,930 Finally, we have done that, but that will not make any change because we have not yet provided the 72 00:06:15,930 --> 00:06:23,130 CSIS inside the index door to see us fail, or we'll just go to our next door to success and provide 73 00:06:23,130 --> 00:06:24,640 that CSIS here. 74 00:06:25,170 --> 00:06:34,830 What we'll do is we look to either CSIS for this be the end and the not. 75 00:06:35,820 --> 00:06:39,560 So this was the class name for their name because course. 76 00:06:39,630 --> 00:06:43,520 Inside this button container, we'll provide some CSIS. 77 00:06:43,530 --> 00:06:51,210 So first of all, we'll provide some margin bottom because that is getting too close to the ending or 78 00:06:51,210 --> 00:07:00,120 the title will provide a margin more time of margin bottom of for Adam audience. 79 00:07:02,240 --> 00:07:02,870 And. 80 00:07:04,650 --> 00:07:08,250 We'll make use of the Flexbox here or display Flex. 81 00:07:09,370 --> 00:07:19,020 And of course, we want to put the buttons in the center, so we'll be justified and bent and center. 82 00:07:19,580 --> 00:07:24,340 OK, now let's go back to the browser and see how this changes are being reflected on. 83 00:07:25,970 --> 00:07:29,840 Okay, so the buttons in the center part. 84 00:07:31,660 --> 00:07:37,150 OK, now let's go ahead and start bit, and this was just a container inside with the bartenders deciding. 85 00:07:37,510 --> 00:07:39,280 And now let's start in the boat. 86 00:07:39,280 --> 00:07:47,140 And so we have given the last name of total buttons to start between the button, as you can see. 87 00:07:48,640 --> 00:07:49,660 As you can see here. 88 00:07:51,000 --> 00:07:54,970 The class name is the filter button, and that is what we have done. 89 00:07:54,990 --> 00:07:56,910 So we have just started to standard. 90 00:07:57,480 --> 00:07:59,100 If the screen was dark, let me just to. 91 00:08:00,870 --> 00:08:04,300 It appeared that I was distraught, there's one single line. 92 00:08:04,610 --> 00:08:09,000 OK, so inside the field button, what we'll do is we'll provide some. 93 00:08:10,320 --> 00:08:13,530 Tiling the first of all, will make the background as transparent. 94 00:08:14,720 --> 00:08:14,990 And. 95 00:08:16,590 --> 00:08:17,400 So the back. 96 00:08:18,770 --> 00:08:19,830 Why it's not taking. 97 00:08:20,960 --> 00:08:22,610 OK, because I provided. 98 00:08:23,590 --> 00:08:24,760 The square brackets. 99 00:08:25,070 --> 00:08:25,370 OK. 100 00:08:26,290 --> 00:08:27,850 And it will be the background. 101 00:08:29,140 --> 00:08:31,810 It'll be there transparent and. 102 00:08:33,850 --> 00:08:38,610 Background color will be something else that was missed. 103 00:08:38,910 --> 00:08:46,270 Let's do the border as transparent crossed the border is also transparent. 104 00:08:46,290 --> 00:08:52,440 Let me just save and see how the changes are being looked like, OK? 105 00:08:52,590 --> 00:08:59,370 You can see that this is the thing that you're doing like the text is visible and the border in the 106 00:08:59,370 --> 00:09:00,630 background is transparent. 107 00:09:00,630 --> 00:09:03,480 So that is really, really, really cool thing to do. 108 00:09:04,260 --> 00:09:11,190 OK, so next what we'll do is we'll give it a font size of one idea. 109 00:09:11,880 --> 00:09:16,800 I remember one night M is equal to 16 pixels, so don't get confused why I'm using IDM, OK? 110 00:09:17,810 --> 00:09:19,820 Okay, and then we'll give the text. 111 00:09:22,170 --> 00:09:29,940 Transform as capitalized because we want to automatically transfer I like converter box to the capital 112 00:09:29,940 --> 00:09:30,420 letters. 113 00:09:30,570 --> 00:09:33,120 OK, and then we'll give some margin. 114 00:09:34,760 --> 00:09:37,610 And the margin would be zero for top and bottom. 115 00:09:38,980 --> 00:09:45,450 And up point five a.m. for four and five a.m. for left and right, OK. 116 00:09:46,540 --> 00:09:49,540 And let me save and see how the things are going on. 117 00:09:51,970 --> 00:09:54,130 OK, this looks a little bit cleaner. 118 00:09:54,820 --> 00:09:57,340 And then I go back to the idea. 119 00:10:00,620 --> 00:10:06,560 He provide some more like more styling now after the margin, what we'll do is we'll provide some little 120 00:10:06,560 --> 00:10:12,920 spacing and the letter spacing would be of one pixel and. 121 00:10:14,940 --> 00:10:21,210 After the letter spacing, we provide some padding to it, so that wouldn't be a padding, not padding 122 00:10:21,210 --> 00:10:25,650 in line, just the padding, so padding of. 123 00:10:27,240 --> 00:10:28,710 Point three. 124 00:10:29,920 --> 00:10:31,360 R.E.M. of. 125 00:10:33,240 --> 00:10:38,730 Top and bottom and 0.01 RDM core, left and right. 126 00:10:39,180 --> 00:10:42,630 Point seven RDM of left and right. 127 00:10:42,630 --> 00:10:42,870 OK. 128 00:10:43,260 --> 00:10:48,330 OK, so what we'll do next is we'll provide some color and. 129 00:10:49,930 --> 00:10:56,050 This will be the color which will be contained in the like buttons to the color would be. 130 00:10:56,890 --> 00:10:59,310 There's a hex code, which I am seeing here. 131 00:10:59,320 --> 00:11:00,430 So that is this one. 132 00:11:03,720 --> 00:11:06,750 And this is the color which we're using. 133 00:11:06,900 --> 00:11:10,290 So let me just say wait and see how this looks and. 134 00:11:12,150 --> 00:11:16,420 I was there, so this will be the hauer-king like whenever we hover over it. 135 00:11:16,950 --> 00:11:19,200 So that will be the color about. 136 00:11:20,220 --> 00:11:24,150 We'll add another glass to that, like whenever we hover over it, it's all right now. 137 00:11:24,150 --> 00:11:25,800 The text color has been changed. 138 00:11:26,310 --> 00:11:32,400 Now this is OK, but we'll add some more styling like whenever we hold it or this button and whenever 139 00:11:32,400 --> 00:11:33,450 we click that button. 140 00:11:33,450 --> 00:11:35,220 So that will be some different styling or not. 141 00:11:35,520 --> 00:11:35,880 All right. 142 00:11:37,200 --> 00:11:40,710 OK, so we'll provide some more styling and all. 143 00:11:42,270 --> 00:11:47,280 And adding, I've already provided now we want to change our culture to the point that like whenever 144 00:11:47,280 --> 00:11:51,960 I bring my mouse towards the button, the cursor should be changed to the point. 145 00:11:52,180 --> 00:11:55,880 So this one single line and that will be changed to point. 146 00:11:56,130 --> 00:11:56,480 Okay. 147 00:11:56,910 --> 00:12:04,650 And how do we write some of the courses that will be transition and that will be available? 148 00:12:05,890 --> 00:12:09,010 Variable and that will be transition. 149 00:12:10,210 --> 00:12:19,750 Transition here next to the next to really give a border areas, and that will also be available border. 150 00:12:23,420 --> 00:12:23,890 There it is. 151 00:12:24,710 --> 00:12:30,860 And that will be available, and it will be also, according to the radius, OK? 152 00:12:31,550 --> 00:12:34,940 But let me just save it and let us go to the. 153 00:12:37,510 --> 00:12:43,240 Or you can see whenever I bring the point that word of mouth like the point that just do cursor or the 154 00:12:43,240 --> 00:12:44,590 Castle Genius 2.0, whatever. 155 00:12:44,620 --> 00:12:45,160 I don't know. 156 00:12:45,430 --> 00:12:47,230 But this is how it works, OK? 157 00:12:47,860 --> 00:12:51,730 And we'll style some more, like whenever we hover or anything. 158 00:12:51,730 --> 00:12:52,890 So that will do in the next video.