1 00:00:00,030 --> 00:00:01,200 Hello and welcome to the video. 2 00:00:01,650 --> 00:00:08,100 So now in the previous week, we have seen how to implement the Arab section of the webpage and this 3 00:00:08,100 --> 00:00:12,450 road of NZ, how to implement the home page and the products that are present on the homepage. 4 00:00:12,720 --> 00:00:17,850 So there is one small correction from the last video in the last video I have given this class name, 5 00:00:18,180 --> 00:00:19,020 but that icon. 6 00:00:19,380 --> 00:00:27,240 So basically, we will prefer since the court is a combination of both icon and this basket count. 7 00:00:27,450 --> 00:00:31,680 So we have to give the plus for that division that these both elements are present. 8 00:00:32,160 --> 00:00:35,610 So that's why I've changed the class name from here to here. 9 00:00:35,640 --> 00:00:42,120 I gave the class name for the new and the stylish same as before the item basket and basket count. 10 00:00:42,420 --> 00:00:43,770 What are the same steps? 11 00:00:44,220 --> 00:00:46,800 So this is what the change from the last few days. 12 00:00:47,370 --> 00:00:48,690 No moving on to protest VIDEO. 13 00:00:48,930 --> 00:00:50,640 So now let us take the homepage. 14 00:00:51,360 --> 00:00:57,390 So as I said, we indirectly work with components have completed their component software component. 15 00:00:57,870 --> 00:01:00,000 I'll be having foam component to. 16 00:01:00,950 --> 00:01:02,600 Threaten to create a bomb on current. 17 00:01:03,690 --> 00:01:08,010 So they're going to have to create a component of their own gets. 18 00:01:09,690 --> 00:01:12,150 And then still CSIS. 19 00:01:13,650 --> 00:01:17,380 About the war on drugs, and then I'll be using the snippets. 20 00:01:20,870 --> 00:01:21,590 So you can see. 21 00:01:25,100 --> 00:01:26,440 Now you can import the Jack. 22 00:01:31,030 --> 00:01:31,660 Don't react. 23 00:01:37,790 --> 00:01:39,670 And then import the stylesheet of. 24 00:01:47,030 --> 00:01:48,170 OK, now we are going to go. 25 00:01:49,260 --> 00:01:53,130 And yes, I have to import phone on component. 26 00:02:10,010 --> 00:02:10,580 Now it's done. 27 00:02:10,940 --> 00:02:18,830 So now, instead of on the as you know, like there is an image, but it and then multiple products 28 00:02:19,250 --> 00:02:24,710 like these products are also there are two in one row, three in that one in the other. 29 00:02:25,490 --> 00:02:27,860 OK, so now we can see how we do that. 30 00:02:30,620 --> 00:02:34,370 So first, we have to create a def con. 31 00:02:38,510 --> 00:02:39,440 They've called home. 32 00:02:41,390 --> 00:02:43,490 OK, in fact, this will be having everything. 33 00:02:45,550 --> 00:02:50,970 So inside this are to create another difficult phone container, which contains the imagine the products 34 00:02:51,100 --> 00:02:54,370 now, everything the home contents so dark. 35 00:02:55,510 --> 00:02:55,830 Home. 36 00:03:00,550 --> 00:03:01,090 Container. 37 00:03:02,750 --> 00:03:03,680 So that's creating. 38 00:03:05,960 --> 00:03:08,980 The line said the home container will be having image. 39 00:03:11,940 --> 00:03:13,230 So what image should have? 40 00:03:13,920 --> 00:03:16,410 So imagine with the class name of former image. 41 00:03:18,820 --> 00:03:25,180 So I like the sort of image, as you can see, oh, if I see what sort it out, I'll be using this image 42 00:03:25,540 --> 00:03:27,190 so you can use any image that's up to you. 43 00:03:28,470 --> 00:03:33,900 You can change the height and weight in your KSAZ felt so amazing this image, the source will be this. 44 00:03:36,070 --> 00:03:42,040 And the alternate I will leave it and the class then will be for me, which now subject. 45 00:03:44,190 --> 00:03:45,990 Imagine and then the closing tag is done. 46 00:03:46,320 --> 00:03:49,630 OK, now after the image, I'll be having an. 47 00:03:50,030 --> 00:03:51,300 OK, so. 48 00:03:52,650 --> 00:03:53,550 As you can see it. 49 00:03:54,640 --> 00:03:57,370 This is the first straw where we have to price. 50 00:03:57,640 --> 00:04:02,440 And in the second period, having three products and then the third having one product, so we can have 51 00:04:02,440 --> 00:04:03,550 as many laws as we want. 52 00:04:03,880 --> 00:04:05,170 So now I'll create rules. 53 00:04:06,250 --> 00:04:07,480 Once the image is done. 54 00:04:10,340 --> 00:04:12,020 Country battles are not. 55 00:04:13,690 --> 00:04:13,950 Right. 56 00:04:14,470 --> 00:04:14,710 Yeah. 57 00:04:15,110 --> 00:04:15,730 Not for. 58 00:04:16,740 --> 00:04:17,850 Pro nuclear. 59 00:04:19,100 --> 00:04:20,900 So you can create as many doors as you want. 60 00:04:26,100 --> 00:04:27,270 And we're getting $3. 61 00:04:28,810 --> 00:04:30,950 Yeah, so no, that's fine. 62 00:04:33,550 --> 00:04:36,910 So inside each row, we'll be having multiple products. 63 00:04:37,420 --> 00:04:42,340 So, for example, in the first row, I want, as you can see, I want two products in the first two, 64 00:04:42,520 --> 00:04:45,090 so I'll be using two product components. 65 00:04:46,930 --> 00:04:47,890 And in the second row. 66 00:04:49,260 --> 00:04:54,830 I mean, in the first round, I want to protect side using two product components that similarly contributors 67 00:04:54,830 --> 00:04:56,100 so many products you want. 68 00:04:59,580 --> 00:05:00,840 I want three products here. 69 00:05:05,160 --> 00:05:06,270 And then one product over here. 70 00:05:07,350 --> 00:05:08,550 That will do good for me. 71 00:05:08,980 --> 00:05:09,180 Yeah. 72 00:05:11,980 --> 00:05:17,140 But I've created products, it's got a lot to do as a created the product component, I have to create 73 00:05:17,140 --> 00:05:19,060 the component in my sauce, right? 74 00:05:19,330 --> 00:05:22,360 So I create production product versus. 75 00:05:25,000 --> 00:05:26,530 Let me get to that CSIS. 76 00:05:30,460 --> 00:05:30,640 So. 77 00:05:32,180 --> 00:05:33,530 So in the home, I have to import. 78 00:05:34,580 --> 00:05:39,670 So these imports things like it's manually have to be every time you create components, something which 79 00:05:39,680 --> 00:05:41,390 is basically the stuff you have to do every time. 80 00:05:49,160 --> 00:05:50,690 So let's import product. 81 00:05:58,300 --> 00:05:59,240 Prime time product. 82 00:06:00,050 --> 00:06:01,190 Basically, the snippet. 83 00:06:04,630 --> 00:06:06,080 And then in Pretoria, Tennessee, is a. 84 00:06:19,110 --> 00:06:19,500 OK. 85 00:06:21,200 --> 00:06:25,760 So now, once we are done with technology after that, as you can see how our web page looks like it. 86 00:06:26,360 --> 00:06:29,780 So this is our opinion of tech because as of now, there is nothing in the product. 87 00:06:30,290 --> 00:06:33,860 So we'll go and read this product or just find. 88 00:06:35,220 --> 00:06:38,370 So instead, the largest after a difficult project. 89 00:06:41,870 --> 00:06:42,140 OK. 90 00:06:42,440 --> 00:06:46,160 So fact this started like, as you can see over here. 91 00:06:48,180 --> 00:06:50,070 It consists of three things. 92 00:06:50,700 --> 00:06:54,060 Match the button, the rainfall and also the looting. 93 00:06:54,390 --> 00:06:58,860 So basically this is the project painful product info, which is the product rating. 94 00:06:59,040 --> 00:07:01,980 This is the product image and it is the red basket. 95 00:07:02,280 --> 00:07:05,190 So I'll be creating each and every one of them. 96 00:07:05,670 --> 00:07:07,920 So first thing, we have to create this product for. 97 00:07:12,100 --> 00:07:19,490 Yeah, so inside the product, before we let up, Peter, that is the title of the product. 98 00:07:21,010 --> 00:07:24,340 And then another between the class and the product price. 99 00:07:28,050 --> 00:07:32,430 So let me give some dollars, 30 like that. 100 00:07:34,500 --> 00:07:39,470 So there's going to be the belief that those like, as you can see, the title is this and the product, 101 00:07:39,510 --> 00:07:41,040 I am on business. 102 00:07:41,580 --> 00:07:44,330 After that, we'll be having a product waiting. 103 00:07:45,690 --> 00:07:45,910 OK? 104 00:07:46,440 --> 00:07:51,330 Inside the product in Fort Lee will be adding up, not product creating new. 105 00:07:54,780 --> 00:07:55,950 And the Bible in it. 106 00:07:57,180 --> 00:07:57,410 Yeah. 107 00:07:58,170 --> 00:08:03,660 So inside the product trading, let me give ideas like stats for this purpose. 108 00:08:04,680 --> 00:08:05,520 So let me. 109 00:08:08,690 --> 00:08:09,740 So as you can see. 110 00:08:10,810 --> 00:08:12,910 And that starts off and check. 111 00:08:14,150 --> 00:08:15,320 Not only that, it's not already. 112 00:08:21,060 --> 00:08:21,380 Hmm. 113 00:08:21,420 --> 00:08:22,710 I'm not able to find them. 114 00:08:28,080 --> 00:08:31,170 So you can like can find where those jobs will be. 115 00:08:32,230 --> 00:08:36,190 Here I am not able to find and like, let's join in. 116 00:08:37,820 --> 00:08:39,080 There are no stops. 117 00:08:43,820 --> 00:08:45,800 I got them, so this is the start I'll be using. 118 00:08:46,280 --> 00:08:51,380 Let me use some free stuff so that this stuff will be fine, but it will be a project rating. 119 00:08:51,920 --> 00:08:56,870 So after that product, before we are done with the product being stopped by now, we have to have the 120 00:08:56,870 --> 00:08:57,710 product image. 121 00:08:59,210 --> 00:09:01,460 So after dying for will be having image. 122 00:09:04,710 --> 00:09:08,310 But sort of like, let me use this email as the source only. 123 00:09:08,610 --> 00:09:12,930 And then there you are, like this and then Ali pasting it over it. 124 00:09:16,650 --> 00:09:18,660 So you can like just to be a product. 125 00:09:20,400 --> 00:09:22,980 Imagine like that if you want, but it's not necessary. 126 00:09:24,630 --> 00:09:26,760 So fed up image will be having the button. 127 00:09:31,540 --> 00:09:33,310 So the bottom will be look at the basket. 128 00:09:36,860 --> 00:09:42,890 OK, so this is basically the product we have created for Latasha, so we got see as you can see, tighten 129 00:09:43,580 --> 00:09:46,100 rupees 30, this thing and that product image. 130 00:09:46,340 --> 00:09:48,630 So now as this looks ugly, we have to do this. 131 00:09:48,690 --> 00:09:53,870 These are styling, but says, as I said before the styling part, you need to concentrate on the styling, 132 00:09:53,870 --> 00:09:56,270 but you can just go through what's happening in the styling. 133 00:09:56,270 --> 00:10:01,910 But then you can use the Thailand method to see what that style is suitable for the page or product 134 00:10:01,910 --> 00:10:02,900 or any other component. 135 00:10:03,770 --> 00:10:08,120 That basic model used to learn react content and how to working with React not to see as a swap. 136 00:10:08,700 --> 00:10:08,960 OK. 137 00:10:09,020 --> 00:10:10,850 Try to be doing those you know, to show you. 138 00:10:15,110 --> 00:10:19,840 So as you can see, I've completed the product of of Orthodoxy as an index starts to assist with the 139 00:10:19,840 --> 00:10:20,590 styling part. 140 00:10:21,370 --> 00:10:24,910 So let's see one by one in our thesis for the product. 141 00:10:24,910 --> 00:10:29,800 Do that is flight time should be flex so that one will be decided on it. 142 00:10:29,980 --> 00:10:33,280 So every product should come one after the other right now in a given group. 143 00:10:33,670 --> 00:10:35,080 So the first direction is column. 144 00:10:38,530 --> 00:10:44,650 So you're in the product of the flexitarians column, because in each product, like if you see one 145 00:10:44,650 --> 00:10:50,340 that faces the will be display flex because everything should be one bill other than the products in 146 00:10:50,350 --> 00:10:51,970 the home that already present. 147 00:10:52,330 --> 00:10:58,900 But in the product, it should be one of one below that the Flex Détection, because if you are having 148 00:10:58,940 --> 00:11:03,860 yet the the title below that price should come and then be another place. 149 00:11:03,860 --> 00:11:07,750 We should have the project product rating and then the product image and then at the bottom. 150 00:11:07,750 --> 00:11:11,110 So they should be in a column format and then the justify conflicts. 151 00:11:11,110 --> 00:11:16,770 And you can add all this margin padding to my excitement when this will be playing the clarinet amateur 152 00:11:17,020 --> 00:11:21,250 you, the district, for example, if I can margin as two pixels, you have to see what's happening 153 00:11:21,250 --> 00:11:21,900 to our website. 154 00:11:23,480 --> 00:11:25,620 See, there is no space between 18 and then I need to look. 155 00:11:25,630 --> 00:11:27,640 It looks at me, so I have to give. 156 00:11:28,790 --> 00:11:33,140 Benefits and so that you can see that there is more space between products, they and then the split 157 00:11:33,140 --> 00:11:36,990 product trading should be flex because inside the product there are two elements. 158 00:11:37,010 --> 00:11:39,800 One is that dollars and whether or not that is the price. 159 00:11:40,220 --> 00:11:41,840 So you can see part of this. 160 00:11:42,170 --> 00:11:49,940 I have just one correction and said the product price last brought at this, I gave the dollar sign 161 00:11:49,940 --> 00:11:53,200 a different element that is one and that it will be strong. 162 00:11:53,240 --> 00:11:57,800 Okay, we can use these kinds of elements to make the page look more beautiful. 163 00:11:58,640 --> 00:11:59,720 And then you plug again. 164 00:11:59,720 --> 00:12:04,280 If you follow the suspect, the image will have certain styling. 165 00:12:04,280 --> 00:12:05,090 You can see object. 166 00:12:05,570 --> 00:12:12,920 So what this object, that kind of object for content does is that it will not change the image resolution 167 00:12:12,920 --> 00:12:16,890 if we change the height of the image, so the resolution will be maintained. 168 00:12:17,360 --> 00:12:22,310 So product button has some background at border color will be three of eight different colors. 169 00:12:22,700 --> 00:12:26,000 Price will have a margin branding for reliable height and margin. 170 00:12:26,450 --> 00:12:29,570 That is what the product set and warmed up chances. 171 00:12:29,810 --> 00:12:35,680 We have to add this styling so the Honda elements are in a flex and we may need to have somewhere to 172 00:12:35,680 --> 00:12:38,900 Z next to the Z index minus one means. 173 00:12:39,200 --> 00:12:43,610 As you can see here, the image is underneath the product section. 174 00:12:43,620 --> 00:12:49,580 So if you give, the index is minus one day, the products will appear on the image and margin bottom 175 00:12:49,580 --> 00:12:51,590 minus if you give this as zero. 176 00:12:53,030 --> 00:12:57,320 You can see the products came down a little bit after that image. 177 00:12:57,320 --> 00:12:58,160 The products will appear. 178 00:12:58,460 --> 00:13:02,530 That's where I'll give minus 50 pixels to make the see. 179 00:13:02,630 --> 00:13:04,970 As you can see, the products went up. 180 00:13:05,240 --> 00:13:10,370 So these are the and then mosque image linear gradient like the image will be gradient from top to bottom. 181 00:13:10,370 --> 00:13:13,310 That color gets like $10 you want to here. 182 00:13:16,290 --> 00:13:16,620 So you. 183 00:13:18,750 --> 00:13:19,260 And then. 184 00:13:21,180 --> 00:13:25,980 Home rule, home rule display will be the next one, as I said, the rule should be able to make sure 185 00:13:25,980 --> 00:13:28,200 that stays in the index is one in the margin at the margin. 186 00:13:28,860 --> 00:13:32,280 When the Garcia says you have to add one line that is the background color white. 187 00:13:32,670 --> 00:13:36,840 So in broadcast, yes, if you give the color to the product, says White. 188 00:13:36,990 --> 00:13:40,620 This is not exactly right, giving some greenish type of color, as you can see over here. 189 00:13:41,160 --> 00:13:43,110 So this is what it should look like, basically. 190 00:13:44,340 --> 00:13:50,650 So with this, we can see basically we have a hardcoded, the products we have. 191 00:13:50,670 --> 00:13:53,640 We gave everything the same patent, the same image in the same bottle. 192 00:13:54,030 --> 00:14:00,510 So now in the next few days, we'll see how to get a data dynamically using props like for the same 193 00:14:00,510 --> 00:14:04,260 product component, all the get different data using props that see in the next room.