1 00:00:01,050 --> 00:00:07,380 And let's just go to Ed and let's create now a home component. 2 00:00:09,330 --> 00:00:15,930 To the home component will be the landing page, so the landing page will be the home component and 3 00:00:15,930 --> 00:00:19,720 we will create that component inside an adult photo here. 4 00:00:19,960 --> 00:00:23,340 Will create another folder and source that will call it. 5 00:00:23,850 --> 00:00:25,350 It will be called pages. 6 00:00:26,900 --> 00:00:35,570 Inside the pages will create a home page rank who will write Home Dart, yes, we'll say it again will 7 00:00:35,570 --> 00:00:39,440 use our trick to import the boilerplate code that is autopsy. 8 00:00:40,100 --> 00:00:40,550 OK. 9 00:00:41,060 --> 00:00:46,330 You know how it will operate for the home dog? 10 00:00:46,490 --> 00:00:47,240 Just fine. 11 00:00:47,960 --> 00:00:51,470 So now we'll write the code for the home dog. 12 00:00:51,770 --> 00:00:52,160 Yes. 13 00:00:52,160 --> 00:00:52,460 File. 14 00:00:53,570 --> 00:00:55,640 For now, we will create new lives. 15 00:00:56,360 --> 00:01:02,870 That is who will create the new district and one will be the home do. 16 00:01:05,150 --> 00:01:14,960 Bonnie, and why this auto report some dumps home homeless and another one will be end up going in. 17 00:01:15,500 --> 00:01:16,970 You can call it whatever you want. 18 00:01:17,000 --> 00:01:18,800 I'm calling this because of the CSIS. 19 00:01:19,940 --> 00:01:27,440 We've used these glasses only so inside the home container, inside the home component. 20 00:01:27,710 --> 00:01:32,090 We'll provide an image, some text and a button. 21 00:01:33,320 --> 00:01:39,770 OK, so there will be an image, a background image, so let me just first provide background image. 22 00:01:41,100 --> 00:01:42,810 So I need to import that image. 23 00:01:43,020 --> 00:01:48,720 So let me import, import, let's call banner from. 24 00:01:49,780 --> 00:01:51,520 Again, we need to go to the assets folder. 25 00:01:53,390 --> 00:01:56,600 Asserts then that would it be in the cold? 26 00:01:57,650 --> 00:01:57,940 Then. 27 00:02:00,530 --> 00:02:02,450 Yeah, it's been there, WPLG. 28 00:02:04,170 --> 00:02:07,650 But we do call it or GP. 29 00:02:11,430 --> 00:02:11,730 Mr. 30 00:02:12,960 --> 00:02:14,040 Or to some, I call on him. 31 00:02:14,490 --> 00:02:16,980 So now this image is important. 32 00:02:17,770 --> 00:02:21,120 Now we want to use it in our main content, right? 33 00:02:21,240 --> 00:02:23,430 The main container, we want to use this image. 34 00:02:23,730 --> 00:02:24,780 So how you lose it? 35 00:02:24,780 --> 00:02:31,950 So we'll provide in line CSO styling for this and we'll give you all of the image like the source of 36 00:02:31,950 --> 00:02:33,510 the image and then it will be rendered. 37 00:02:33,810 --> 00:02:35,720 So we'll provide as this. 38 00:02:36,090 --> 00:02:40,170 This will provide the style that my bag. 39 00:02:41,170 --> 00:02:47,350 And inside the state AG, we are going to provide the thoughts, right? 40 00:02:47,620 --> 00:02:49,660 We're going to provide the source of the image. 41 00:02:49,960 --> 00:02:53,620 So first of all, we write background image. 42 00:02:55,810 --> 00:02:56,740 I can only meet. 43 00:02:57,850 --> 00:03:03,370 And will provide a colon, and here we will provide the source for that we will use tactics. 44 00:03:04,800 --> 00:03:07,110 Then you will write you are an. 45 00:03:08,620 --> 00:03:18,220 And then bring it forward fantasies and say that we will provide a dollar sign and then we'll provide 46 00:03:18,220 --> 00:03:21,100 the name of the image so that this banner. 47 00:03:21,420 --> 00:03:21,670 Right? 48 00:03:22,090 --> 00:03:22,870 And we just say it. 49 00:03:24,550 --> 00:03:27,490 OK, now when we go to our browser. 50 00:03:29,060 --> 00:03:30,710 And we just refresh. 51 00:03:31,310 --> 00:03:32,240 We don't see anything. 52 00:03:33,080 --> 00:03:40,490 Now, can you tell me what the reason because we have not imported our own dogs file inside the app, 53 00:03:40,940 --> 00:03:41,760 which is abroad? 54 00:03:41,780 --> 00:03:42,140 Yes. 55 00:03:42,440 --> 00:03:44,270 So that means we need to import. 56 00:03:45,170 --> 00:03:47,420 We need to import home instead of abroad. 57 00:03:47,420 --> 00:03:47,750 Yes. 58 00:03:48,050 --> 00:03:49,340 Otherwise, it will not be rendered. 59 00:03:50,390 --> 00:03:53,300 Let me import home from. 60 00:03:56,850 --> 00:03:59,520 Not component in security pages, slash. 61 00:04:00,760 --> 00:04:11,610 OK, so I have to import it here, and I will provide ah, I provide router how the routing needs to 62 00:04:11,610 --> 00:04:18,810 be provided because we will be navigating to work and we will be like going to the home page by creating 63 00:04:18,810 --> 00:04:19,980 the home link. 64 00:04:20,190 --> 00:04:27,330 So for that, you need the router right for so that we have the complete routing. 65 00:04:27,690 --> 00:04:31,230 So now I will provide a full stack switch to. 66 00:04:34,600 --> 00:04:39,130 And this will be also on this be needing a closing bag as well. 67 00:04:39,440 --> 00:04:40,630 Now will provide about. 68 00:04:50,670 --> 00:04:52,110 Why I'm messing up things. 69 00:04:52,770 --> 00:04:53,490 No doubt. 70 00:04:53,790 --> 00:05:01,050 And now we have to provide a part to the like what will be that you are on to this part. 71 00:05:01,530 --> 00:05:06,270 So it will be home slash means home and then we'll provide exact. 72 00:05:08,680 --> 00:05:09,340 Component. 73 00:05:10,800 --> 00:05:17,010 And this means the exact component, which we want to render ongoing to this, you are on this issue 74 00:05:17,040 --> 00:05:21,600 of for that which provide equal sign and then provide the name of the company. 75 00:05:22,530 --> 00:05:23,010 That's it. 76 00:05:23,280 --> 00:05:27,180 This is a service going back and when we close it and then we say it. 77 00:05:29,350 --> 00:05:31,420 And now we go back to a browser. 78 00:05:33,250 --> 00:05:34,690 And we refresh it. 79 00:05:35,920 --> 00:05:37,330 Still, we don't see an image. 80 00:05:37,750 --> 00:05:39,760 Do you have any idea why this is happening? 81 00:05:40,060 --> 00:05:46,900 Because we have not provided anything inside the device and we provided the texture and now it's not 82 00:05:46,900 --> 00:05:47,320 showing up. 83 00:05:47,320 --> 00:05:50,070 So I think that is something wrong with the Abdel-Aziz. 84 00:05:50,800 --> 00:05:52,570 OK, here is the mistake. 85 00:05:52,630 --> 00:05:57,070 We wrote powder instead of out, so we just right around here. 86 00:05:57,490 --> 00:06:00,910 This is the road actually touted as the outer part and rounder than a box. 87 00:06:01,660 --> 00:06:05,110 So let me just save it and just go back to the browser. 88 00:06:05,180 --> 00:06:12,010 It's already in the browser, so you can see that is the image is also there, and that is the home 89 00:06:12,010 --> 00:06:12,670 is also there. 90 00:06:13,120 --> 00:06:15,390 So when we go back to the, we escort. 91 00:06:17,210 --> 00:06:23,130 This is what we have done, we have changed the culture and we have changed the name. 92 00:06:23,150 --> 00:06:25,180 It was an outrage and we are changed to rout. 93 00:06:25,750 --> 00:06:28,070 So what is that, OK? 94 00:06:28,580 --> 00:06:29,660 So this is what we have done. 95 00:06:30,080 --> 00:06:35,630 Now we need to do some more styling here in the home, just so we have to provide. 96 00:06:36,200 --> 00:06:42,560 We have to provide each H1 tag and then we have to provide data in which we'll write some text and then 97 00:06:42,560 --> 00:06:43,790 we provide a button. 98 00:06:44,180 --> 00:06:45,510 So as simple as that? 99 00:06:45,560 --> 00:06:47,900 So let me just provide an H1 bag. 100 00:06:48,590 --> 00:06:55,820 It is already there, which will say, like old Ghana, maybe. 101 00:06:56,420 --> 00:06:56,660 Yeah. 102 00:06:57,520 --> 00:06:59,680 Then we'll provide a feedback. 103 00:07:01,870 --> 00:07:02,950 Maybe you can I just be. 104 00:07:03,580 --> 00:07:03,820 Yeah. 105 00:07:04,480 --> 00:07:17,980 So will I like Indian food and all these items caps that will be more attractive Indian food, a like. 106 00:07:18,460 --> 00:07:20,620 Alright, then we'll provide a button. 107 00:07:23,970 --> 00:07:26,510 Turn over here, which will see. 108 00:07:28,980 --> 00:07:30,690 Order now. 109 00:07:31,320 --> 00:07:32,340 And we should see. 110 00:07:33,310 --> 00:07:41,180 And this is what we need to do and will also provide a link to this button, like when we create when 111 00:07:41,180 --> 00:07:43,370 we click on this button, so where we'll go. 112 00:07:43,420 --> 00:07:46,960 So let me just quote Link first import. 113 00:07:47,830 --> 00:07:53,740 Important link from Bali from the air cargo line, obviously. 114 00:07:55,080 --> 00:07:56,370 And then we just. 115 00:07:57,670 --> 00:07:58,810 Rabbit, the Spartan. 116 00:07:59,690 --> 00:08:00,230 Cross. 117 00:08:01,480 --> 00:08:01,940 Only. 118 00:08:11,410 --> 00:08:11,860 All right. 119 00:08:12,670 --> 00:08:13,870 Can we just wrap this? 120 00:08:17,010 --> 00:08:21,870 OK, and when I say it, so and then I go back to the browser. 121 00:08:23,970 --> 00:08:24,960 And refreshing. 122 00:08:27,390 --> 00:08:29,060 We crowd does not contain any. 123 00:08:29,170 --> 00:08:30,750 OK, I made a mistake. 124 00:08:30,780 --> 00:08:33,300 Let me just show you what a mistake I make. 125 00:08:33,450 --> 00:08:33,990 Can you guess? 126 00:08:34,380 --> 00:08:37,710 So this link should always be in curly braces. 127 00:08:39,070 --> 00:08:45,720 They want these mistakes and making just to, like, make you aware that you don't need to make these 128 00:08:45,740 --> 00:08:52,690 mistakes like this are important like small things, but they sometimes like ports are in trouble. 129 00:08:53,890 --> 00:08:56,140 So when you go here, OK, we have a button. 130 00:08:56,650 --> 00:09:01,200 We have this right feed that we have this, but it doesn't look beautiful, isn't it? 131 00:09:01,670 --> 00:09:05,260 So because we have not applied any styling so far? 132 00:09:06,200 --> 00:09:14,650 So let me just go back to the way it scored, and let's just import let us create the style for the 133 00:09:14,650 --> 00:09:14,830 home. 134 00:09:15,070 --> 00:09:19,810 Yet so again, in the style styles for love will create a file, which will be. 135 00:09:22,100 --> 00:09:29,770 Home, dark east and inside this home, Nazi SS, I will be a star. 136 00:09:30,200 --> 00:09:36,480 So USO's, which I've written earlier for this androgynous component. 137 00:09:36,770 --> 00:09:37,490 Let me just be. 138 00:09:38,570 --> 00:09:44,150 And let me assure you from the beginning, we have some idiot here, OK, I don't need this. 139 00:09:46,440 --> 00:09:47,130 From the beginning. 140 00:09:48,560 --> 00:09:54,290 So these are the normal things, like I've configured some font and all, and there's nothing to be 141 00:09:54,290 --> 00:09:55,880 like surprised. 142 00:09:56,920 --> 00:10:03,170 You can take a look at how you can take a look at it from the beginning that they have used this style 143 00:10:03,200 --> 00:10:10,330 start this dot CSIS for the map for the home, dirtiest file for let's just save it. 144 00:10:10,840 --> 00:10:14,230 And this will not be reflected because we have not imported it so far. 145 00:10:14,240 --> 00:10:17,470 So let me just important, but let me just import import. 146 00:10:18,040 --> 00:10:20,740 And then we knew the right location. 147 00:10:21,190 --> 00:10:22,150 That is. 148 00:10:24,630 --> 00:10:33,630 The styles and by the name of the five letters home to get us and my column, and then we say, and 149 00:10:33,630 --> 00:10:39,720 I hope now things will look beautiful and let me take, let me take you to the. 150 00:10:42,700 --> 00:10:48,550 And here we are on the browser, you can see the things look beautiful, but that is a little bit of. 151 00:10:50,880 --> 00:10:56,610 This thing should be on the left hand side, so we'll make it using Cecil, but now the outside looks 152 00:10:56,610 --> 00:10:57,360 more beautiful. 153 00:10:57,630 --> 00:10:59,340 It looks more attractive than before. 154 00:11:00,320 --> 00:11:07,700 Oh, no, maybe this looks in the same because we have no ability to abduct CSIS file for the memo you 155 00:11:07,700 --> 00:11:07,960 need. 156 00:11:08,090 --> 00:11:13,910 Remember when we were cleaning cleaning up the things, so we deleted some of the things to abduct scissors, 157 00:11:13,910 --> 00:11:15,590 what not and was not deleted. 158 00:11:15,590 --> 00:11:16,400 So we deleted. 159 00:11:16,820 --> 00:11:17,980 We not actually deleted. 160 00:11:17,990 --> 00:11:24,500 We didn't just delete the thing here, and we'll provide some small piece of CSIS here and we'll save 161 00:11:24,500 --> 00:11:24,650 it. 162 00:11:25,040 --> 00:11:31,880 And then when we go back to our browser, you can see this looks so beautiful and this is what we were 163 00:11:32,720 --> 00:11:33,770 trying to create. 164 00:11:34,310 --> 00:11:39,590 Now the next thing we need to create a photo like a photo is very, very much needed for our website. 165 00:11:39,830 --> 00:11:43,730 So let's just quickly go and create a few dozen photo will be in the components. 166 00:11:44,720 --> 00:11:49,010 Let's just create dot footer dot g's file here. 167 00:11:49,500 --> 00:11:54,800 Let's just use our trick, which is the snippet to our app. 168 00:11:55,280 --> 00:11:55,990 See? 169 00:11:56,480 --> 00:11:59,960 And this will give us the boilerplate code. 170 00:12:00,410 --> 00:12:10,100 So I will delete this here and will create another layer which the with the idea of filter. 171 00:12:10,670 --> 00:12:12,440 So we'll provide water. 172 00:12:13,220 --> 00:12:21,110 And then again, we'll provide another one, which another day, which I do with the class name of social. 173 00:12:22,170 --> 00:12:22,650 Media. 174 00:12:26,420 --> 00:12:27,140 Media, OK. 175 00:12:27,740 --> 00:12:31,190 And in the photo, we'll be providing some icons. 176 00:12:31,430 --> 00:12:34,250 You already know what the icons are. 177 00:12:34,340 --> 00:12:37,400 So we are going to use material way for the icons. 178 00:12:37,760 --> 00:12:45,800 Let me take you to the website of material way, and let's just go back and we'll search here for maybe. 179 00:12:50,950 --> 00:12:53,540 You click on this and we will copy this right to. 180 00:12:54,370 --> 00:12:54,790 And. 181 00:12:56,190 --> 00:12:56,610 The. 182 00:12:58,560 --> 00:13:02,640 We'll go back to our escort and then we pasted. 183 00:13:04,420 --> 00:13:05,230 Then the. 184 00:13:07,470 --> 00:13:09,360 Use Instagram. 185 00:13:13,990 --> 00:13:15,820 We'll get some important all the icons. 186 00:13:16,180 --> 00:13:19,600 And now let's just use them, so we use them. 187 00:13:20,020 --> 00:13:21,490 It's like really, really simple. 188 00:13:21,490 --> 00:13:29,980 You need to just put the render the component which is there so like in star and guitar icon. 189 00:13:32,610 --> 00:13:37,620 I don't know my or to suggest is not working properly, so. 190 00:13:39,230 --> 00:13:42,080 Bear with that post will be Instagram's second will be. 191 00:13:43,360 --> 00:13:43,840 Water. 192 00:13:46,510 --> 00:13:49,500 And it could be a set if it will be a self-closing tag. 193 00:13:49,840 --> 00:13:51,280 Next, we will be having Facebook. 194 00:13:53,670 --> 00:13:55,830 Facebook, I can. 195 00:13:57,550 --> 00:13:59,380 Next, we'll be having Lyndon. 196 00:14:01,690 --> 00:14:02,240 Lyndon. 197 00:14:07,430 --> 00:14:08,600 And we just saved. 198 00:14:10,690 --> 00:14:20,080 Now we need to go to Agadez and import this water, so we'll provide the name as. 199 00:14:21,290 --> 00:14:21,740 Fulton. 200 00:14:22,720 --> 00:14:29,370 And probably it gives an option to or been caught, but it's not giving us so. 201 00:14:30,700 --> 00:14:32,350 I think now it's ordering important. 202 00:14:34,530 --> 00:14:38,100 We save it and then we go back to our browser. 203 00:14:38,830 --> 00:14:39,710 OK. 204 00:14:39,800 --> 00:14:40,260 OK. 205 00:14:44,150 --> 00:14:48,650 We have we have done this and we have imported food out here. 206 00:14:49,160 --> 00:14:52,550 We we imported this all of the icons here. 207 00:14:52,950 --> 00:14:59,600 Are you really sorry if you're not even able to see that coating part? 208 00:14:59,760 --> 00:15:01,240 So we have done this. 209 00:15:01,250 --> 00:15:08,320 We have imported these icons and then we have imported this on air and then we ran to abductees and 210 00:15:08,330 --> 00:15:13,840 then we just we just imported this water and this rendered it inside help. 211 00:15:14,430 --> 00:15:23,420 So that's what we have done and we see an error here that is a confused look in this icon is not foreign 212 00:15:23,420 --> 00:15:24,900 to let me go to photo. 213 00:15:27,440 --> 00:15:32,000 It is online and what Facebook I can. 214 00:15:32,960 --> 00:15:36,190 Facebook account is the problem here. 215 00:15:37,600 --> 00:15:40,900 We imported all of the icons and we were under no deal. 216 00:15:41,330 --> 00:15:43,960 So let us go to the browser and see how this looks. 217 00:15:44,710 --> 00:15:47,020 And let me just go across, OK? 218 00:15:47,050 --> 00:15:49,630 We have the icons here, but they are not so well. 219 00:15:50,050 --> 00:15:50,880 So we'll do it. 220 00:15:50,890 --> 00:15:53,050 We'll do it, as does not a problem with that. 221 00:15:53,290 --> 00:15:58,430 So we go back to we escort and then we just provide something upbeat. 222 00:15:58,470 --> 00:16:00,520 I also hear it will contain. 223 00:16:02,440 --> 00:16:06,070 Copyright information have been tight, though. 224 00:16:07,030 --> 00:16:07,540 And. 225 00:16:08,740 --> 00:16:12,940 Poppy, this is for the copyright symbol, and we'll try. 226 00:16:13,510 --> 00:16:16,410 Maybe the name of the upside Indian food or. 227 00:16:18,240 --> 00:16:18,840 Copyright. 228 00:16:20,300 --> 00:16:21,790 Printed on day one. 229 00:16:22,760 --> 00:16:28,790 OK, save it, and now we are going to create and other styles are a scissors file for this. 230 00:16:29,210 --> 00:16:35,630 Odds, yes, we'll call it for CIUSSS, but they're not so yeses and. 231 00:16:38,050 --> 00:16:42,910 We'll be importing this inside, are that dogs and. 232 00:16:44,630 --> 00:16:51,140 A thesis file for this is also like similar, but it's like really, really simple, so I'll pass this. 233 00:16:51,540 --> 00:16:58,450 The others, like very small and then we close it, and the important thing inside our portrait audience 234 00:16:58,460 --> 00:16:59,500 will be this import. 235 00:17:00,280 --> 00:17:03,860 And we do try to go back to the. 236 00:17:05,940 --> 00:17:07,250 Go back to the styles. 237 00:17:09,520 --> 00:17:12,970 With the style and then you need to import. 238 00:17:14,170 --> 00:17:19,240 Well, to start CSIS, that's it, and then we say what? 239 00:17:21,000 --> 00:17:24,690 And then when we go to the website and the browser. 240 00:17:25,680 --> 00:17:31,920 OK, you see, a photo is being rendered, so that's a really, really important thing, and we have 241 00:17:31,920 --> 00:17:36,120 the board, we have the home page that is the language we have the photo. 242 00:17:36,130 --> 00:17:40,380 Let me just make the size of the icon little bit smaller. 243 00:17:41,670 --> 00:17:47,910 By going to the footage or CSIS, let me just get me the depictions. 244 00:17:51,700 --> 00:17:55,780 Peter Egg here is also not coming in the sand. 245 00:17:56,020 --> 00:18:04,830 So let me just make that in center, so the beat shouldn't be outside of this tape. 246 00:18:05,340 --> 00:18:07,450 So let me just bring it and then save it. 247 00:18:08,640 --> 00:18:15,120 And now, if you go to the website, now we see, OK, this looks neat and this looks so beautiful and 248 00:18:15,120 --> 00:18:15,360 neat. 249 00:18:15,810 --> 00:18:18,100 This is the message is the corporate message. 250 00:18:18,120 --> 00:18:22,860 These are the links and these are the icons of our social media handles. 251 00:18:23,430 --> 00:18:26,190 So that said, we have covered a lot. 252 00:18:26,640 --> 00:18:32,550 We have created a number, a homepage or we can call it landing page with this image, this button and 253 00:18:32,550 --> 00:18:33,270 everything else. 254 00:18:34,260 --> 00:18:35,430 And we have created a photo. 255 00:18:35,730 --> 00:18:41,550 So in the next part, we'll be creating this menu page right here and we'll be adding links to this 256 00:18:41,550 --> 00:18:44,910 website and these buttons like menu and this all. 257 00:18:45,420 --> 00:18:48,210 So that said, thank you, we'll see you in the next part.