1 00:00:08,900 --> 00:00:12,320 In this video, let's design the header. 2 00:00:12,590 --> 00:00:16,160 So we are going to create a component for that. 3 00:00:16,160 --> 00:00:24,110 So let's close the open ones here and inside the components, you are going to create one folder called 4 00:00:24,140 --> 00:00:29,690 Header and I'm going to add the components and then it's CCIS. 5 00:00:33,690 --> 00:00:43,500 All right, so let's add some simple text here called H one and say header and let's require the CSS 6 00:00:43,500 --> 00:00:46,350 first and then we start with a HTML. 7 00:00:46,560 --> 00:00:54,090 So let's render this by going into the app and then here let's require the header component. 8 00:00:58,020 --> 00:01:00,980 Let's put it after the nav bar. 9 00:01:01,020 --> 00:01:03,300 Going to be the header components. 10 00:01:03,330 --> 00:01:04,860 Now let's have a look. 11 00:01:04,890 --> 00:01:06,480 Yes, here we go. 12 00:01:06,810 --> 00:01:07,490 Okay. 13 00:01:07,500 --> 00:01:09,960 So how are you going to start this? 14 00:01:09,990 --> 00:01:14,100 Well, you're going to have the skeleton of the HTML. 15 00:01:14,130 --> 00:01:17,220 So let's see how I'm going to structure this one. 16 00:01:17,340 --> 00:01:20,190 So inside here, there is a header. 17 00:01:20,430 --> 00:01:27,060 Let's remove all this ones and let's have a parent dev core header container. 18 00:01:29,730 --> 00:01:30,480 Great. 19 00:01:30,630 --> 00:01:34,340 And inside that, you are going to have two sections. 20 00:01:34,350 --> 00:01:41,850 One section is going to be the content, which is this one, and the next section is going to contain 21 00:01:41,850 --> 00:01:42,930 the image. 22 00:01:42,960 --> 00:01:45,750 This Dave, this Dave and this Dave. 23 00:01:45,780 --> 00:01:48,630 So let's see how we are going to structure this. 24 00:01:48,630 --> 00:01:51,870 So let's start with the header content here. 25 00:01:51,900 --> 00:01:53,610 So here we go. 26 00:01:53,610 --> 00:01:55,410 So back to the HTML. 27 00:01:55,560 --> 00:01:59,280 Let me have a comment and call this one as header content. 28 00:02:01,100 --> 00:02:01,520 Perfect. 29 00:02:01,550 --> 00:02:04,700 Now, let's see how you're going to add the HTML. 30 00:02:04,730 --> 00:02:09,080 I'm going to have a div with a class called header content. 31 00:02:12,470 --> 00:02:17,000 And then inside our half inch wine and this one as hi. 32 00:02:17,120 --> 00:02:20,150 And then that is it. 33 00:02:20,360 --> 00:02:24,970 And next, I'm going to be the name of you or your name. 34 00:02:24,980 --> 00:02:28,640 So I give it a class called Food Name. 35 00:02:31,120 --> 00:02:33,430 And then your full name will be here. 36 00:02:33,520 --> 00:02:36,380 This is my full name, Emmanuel. 37 00:02:39,400 --> 00:02:40,130 Great. 38 00:02:40,150 --> 00:02:44,830 So after that, we are going to have this typing logic. 39 00:02:44,830 --> 00:02:50,470 And for this one I used a third party package called React Typical. 40 00:02:50,500 --> 00:02:51,730 So let's see. 41 00:02:51,730 --> 00:02:54,010 All react typical or typical? 42 00:02:54,040 --> 00:02:57,370 The name is up to you how I pronounce it. 43 00:02:57,610 --> 00:03:06,070 Okay, so let's get that one done by going to our terminal and then let me shut down and let's install 44 00:03:06,100 --> 00:03:07,300 the package. 45 00:03:07,330 --> 00:03:14,680 John add react dash typical and hit enter. 46 00:03:16,450 --> 00:03:17,980 So why is it stalling? 47 00:03:18,010 --> 00:03:21,340 Let's go ahead and continue our configuration. 48 00:03:21,730 --> 00:03:29,020 So after H2, we are going to add another H2 and these are going to contain that type in effect. 49 00:03:29,050 --> 00:03:32,320 So I'll call this one as AM. 50 00:03:34,660 --> 00:03:40,940 And then a and then here comes the components of the react typical. 51 00:03:40,960 --> 00:03:42,550 So what is installing. 52 00:03:42,580 --> 00:03:49,030 Let's go ahead and then require that because we cannot wait for a to install before we continue. 53 00:03:49,060 --> 00:03:50,210 So let's see. 54 00:03:50,230 --> 00:03:52,720 So in part typical. 55 00:03:54,110 --> 00:03:58,310 Tapioca or tapioca from React. 56 00:03:59,700 --> 00:04:00,630 Does. 57 00:04:01,960 --> 00:04:02,800 Typical. 58 00:04:03,370 --> 00:04:04,120 All right. 59 00:04:04,120 --> 00:04:07,090 So let's continue on what is installing. 60 00:04:07,150 --> 00:04:09,100 So it is how we are going to configure it. 61 00:04:09,110 --> 00:04:11,920 You are going to put it inside the H two. 62 00:04:11,920 --> 00:04:13,390 So here we go. 63 00:04:13,540 --> 00:04:17,950 We are bringing the components of typical as that. 64 00:04:18,010 --> 00:04:23,320 And for this we are going to pass in couple of props into this component. 65 00:04:23,320 --> 00:04:24,790 So here you go. 66 00:04:24,820 --> 00:04:30,430 The first prop is going to be the steps, meaning the text that you want to see. 67 00:04:30,430 --> 00:04:38,590 Like this one, you can see the text, food stock developer, react developer and so on and so forth. 68 00:04:38,590 --> 00:04:42,670 So here we go is equal to objects. 69 00:04:42,670 --> 00:04:50,920 And then array of the items I want to show the first one going to be the text that I want to see. 70 00:04:50,920 --> 00:04:52,450 So the first one is. 71 00:04:54,080 --> 00:04:54,410 All right. 72 00:04:54,420 --> 00:05:00,380 I just finished installing, so let's go ahead and run the server to make sure that everything is correct. 73 00:05:00,710 --> 00:05:03,980 Okay, so now let's fill up this once. 74 00:05:03,980 --> 00:05:10,760 So after that we are going to pass in the time going to be 100 seconds. 75 00:05:10,790 --> 00:05:19,820 So we see that I added an emoji in front of that and on mark we can have access to emoji by pressing 76 00:05:19,820 --> 00:05:25,280 the F function and you're going to have the emoji being pop up. 77 00:05:25,430 --> 00:05:29,450 But if you cannot access that, let's go to a website. 78 00:05:30,100 --> 00:05:32,650 So let's say that this is the emoji that you want. 79 00:05:32,920 --> 00:05:38,410 So copy paste it in front of your text as That's great. 80 00:05:38,500 --> 00:05:46,000 So let's run the server because I have one application running on this part that is the final one. 81 00:05:46,150 --> 00:05:50,020 That is why it is asking me if I want to run on a different part. 82 00:05:50,020 --> 00:05:51,040 So I would type in. 83 00:05:51,040 --> 00:05:51,610 Yes. 84 00:05:52,060 --> 00:05:54,350 Now you can see that I get an error. 85 00:05:54,370 --> 00:05:56,080 What is the error? 86 00:05:56,110 --> 00:05:57,040 It says that. 87 00:05:57,280 --> 00:06:01,150 Okay, because we haven't finished up filling this particular function. 88 00:06:01,150 --> 00:06:02,530 So let's continue. 89 00:06:02,800 --> 00:06:09,630 Now we have the step so we can pass in more content the way you want it. 90 00:06:09,640 --> 00:06:14,560 So let's collapse this one and let's continue to fill up. 91 00:06:14,620 --> 00:06:19,150 The next prop you pass in is what we call the loop. 92 00:06:19,330 --> 00:06:23,320 And for this, it takes in what is called infinity. 93 00:06:24,240 --> 00:06:25,650 As the name implies. 94 00:06:25,650 --> 00:06:27,810 So this one is from the package. 95 00:06:28,140 --> 00:06:31,920 And lastly, we're going to have the wrapper. 96 00:06:32,100 --> 00:06:35,510 So this wrapper are going to determine the kind of HTML. 97 00:06:35,520 --> 00:06:41,680 So let's use what is called bold B for both where I still see an error. 98 00:06:41,700 --> 00:06:43,230 What is a problem? 99 00:06:43,320 --> 00:06:44,610 So let's check it out. 100 00:06:45,860 --> 00:06:48,310 Well because of this code here. 101 00:06:48,320 --> 00:06:51,050 So let's save it and check in the browser. 102 00:06:51,050 --> 00:06:53,360 And here we have it. 103 00:06:53,400 --> 00:06:54,200 You get it. 104 00:06:54,200 --> 00:06:57,220 So let's add more content inside this array. 105 00:06:57,230 --> 00:06:59,160 You can add anything of your choice. 106 00:06:59,160 --> 00:07:03,020 So I'm going to paste what I did with my emojis. 107 00:07:03,230 --> 00:07:08,450 So I'm going to remove this one and paste the one I used. 108 00:07:08,450 --> 00:07:14,210 So I have one here with comma separated and it's done so with this one. 109 00:07:14,240 --> 00:07:17,210 Let's save it and let's see what we have. 110 00:07:17,210 --> 00:07:26,360 Now you can see that everything is working nice, but there is no space between A and then the text. 111 00:07:26,360 --> 00:07:33,190 So here I'm going to add some space and this is a trick object and then single code has that. 112 00:07:33,200 --> 00:07:38,600 So now you can see that there is some space between them that is nice. 113 00:07:38,600 --> 00:07:41,990 So that is the component for React typical. 114 00:07:42,200 --> 00:07:47,360 The next one is going to be after the type which is this one. 115 00:07:47,780 --> 00:07:52,640 We have some paragraph here and some link to some payment gateway. 116 00:07:52,640 --> 00:07:54,980 So let's finish up with that one also. 117 00:07:55,100 --> 00:07:56,450 So let's continue. 118 00:07:56,480 --> 00:08:02,000 So after the typical so let me collapse it and next is down here. 119 00:08:02,030 --> 00:08:09,470 Let's go ahead and add the P tag here with some Lorem text as that and that is it. 120 00:08:09,470 --> 00:08:13,910 So after the P tag here contains the payment links. 121 00:08:17,080 --> 00:08:25,420 So for the payment link, I wrapped everything inside what is called header dash payments. 122 00:08:26,540 --> 00:08:31,400 Dash container and here we go. 123 00:08:31,430 --> 00:08:36,220 I often use header with the name of the components, so I will see that. 124 00:08:36,230 --> 00:08:36,770 Okay. 125 00:08:36,799 --> 00:08:40,159 Now this SS is for these components. 126 00:08:40,309 --> 00:08:43,080 So that's how I like naming my class names. 127 00:08:43,100 --> 00:08:44,950 The choice is also yours. 128 00:08:44,960 --> 00:08:53,180 So inside that I'm going to have one button and inside that I'll write what is called high mean. 129 00:08:53,300 --> 00:08:57,980 And then after the button I'm going to add some payment links. 130 00:08:57,980 --> 00:09:01,790 And for this I use font awesome to get it done. 131 00:09:01,790 --> 00:09:02,900 So let's see. 132 00:09:03,080 --> 00:09:06,530 So I'm going to add some font or some links here. 133 00:09:06,560 --> 00:09:17,030 The first one going to be the eye tag and the class name is going to be F a dash bronze and then space 134 00:09:17,030 --> 00:09:22,160 f a dash paypal and all these ones are for font. 135 00:09:22,160 --> 00:09:22,940 Awesome. 136 00:09:22,940 --> 00:09:24,320 So save it. 137 00:09:24,320 --> 00:09:27,650 And now let's see what we have and here we have it. 138 00:09:27,740 --> 00:09:32,240 So I'm going to add the remaining links for all the payment gateway. 139 00:09:32,270 --> 00:09:40,640 So our copy the rest and then paste it inside here, save it and now let's have a look a there we go. 140 00:09:40,640 --> 00:09:46,280 So now we are done with the first components, which is this one. 141 00:09:46,280 --> 00:09:49,280 The next one is going to be the image container. 142 00:09:49,280 --> 00:09:52,640 So let's see how we are going to design this once also. 143 00:09:52,850 --> 00:09:55,550 So back to the structure here. 144 00:09:55,640 --> 00:10:00,140 Now I'm done with the first section, that is the header container. 145 00:10:00,740 --> 00:10:03,380 Next I'm going to be the image container. 146 00:10:03,380 --> 00:10:04,940 So it's going to be as. 147 00:10:05,910 --> 00:10:06,750 Image. 148 00:10:07,650 --> 00:10:08,790 Container yet. 149 00:10:09,000 --> 00:10:14,340 And for this one I wrapped, remember, I have individual items. 150 00:10:14,520 --> 00:10:17,400 This Dave, this Dave, this Dave. 151 00:10:17,400 --> 00:10:18,030 This Dave. 152 00:10:18,030 --> 00:10:19,020 And the image. 153 00:10:19,260 --> 00:10:22,980 That's why I'm going to wrap everything inside a Dave. 154 00:10:23,130 --> 00:10:30,540 So Dave and the class is profile dash img dash container. 155 00:10:33,110 --> 00:10:34,580 Is Dash. 156 00:10:34,670 --> 00:10:35,750 I am g. 157 00:10:36,350 --> 00:10:37,000 Good. 158 00:10:37,010 --> 00:10:40,630 So here I'm going to have the image and the image. 159 00:10:40,640 --> 00:10:42,590 Let me import it here. 160 00:10:43,440 --> 00:10:47,060 And you can get the image from the asset folder. 161 00:10:47,070 --> 00:10:54,450 So the name of the image I can use anything but let me use profile image which is from. 162 00:10:55,310 --> 00:11:02,840 Code ..4.4 slash and I have the assets and then I have the profile. 163 00:11:02,880 --> 00:11:06,410 IMG So that is what we have. 164 00:11:06,530 --> 00:11:11,810 So I chose the IMG rather yeah, this is the import for the image. 165 00:11:11,810 --> 00:11:16,640 So inside the SLC I'll provide the profile image. 166 00:11:16,640 --> 00:11:22,040 Now let's see, definitely I'm going to be a little bit bigger, but don't worry, I'm going to use 167 00:11:22,040 --> 00:11:23,930 CSS to control it. 168 00:11:23,930 --> 00:11:31,010 So that is it about that the next one going to be which are this ones, this one and that and that. 169 00:11:31,010 --> 00:11:35,510 So I'm going to add through it, Divs, one div here and one div here. 170 00:11:35,510 --> 00:11:42,140 And for the image two, I use border bottom and what I hope to achieve this effect the first day going 171 00:11:42,140 --> 00:11:46,310 to have a class called circle dash one. 172 00:11:46,310 --> 00:11:55,040 So let me select this one shift option down arrow key twice and let me change this 1 to 2 and this 1 173 00:11:55,040 --> 00:11:55,760 to 3. 174 00:11:55,790 --> 00:11:58,040 Well, I think I only used to. 175 00:11:58,040 --> 00:12:03,320 So let me remove, I use this one and that, so let's remove the three. 176 00:12:04,280 --> 00:12:04,910 Right. 177 00:12:05,360 --> 00:12:11,600 So for a day we are going to use access to add the border and the background color. 178 00:12:11,600 --> 00:12:14,240 So we are not going to add anything yet. 179 00:12:14,420 --> 00:12:17,780 So if you save it, this is what we have now. 180 00:12:17,780 --> 00:12:20,570 We are done with the structure of the header. 181 00:12:20,750 --> 00:12:23,240 What has left is about a CSS. 182 00:12:23,240 --> 00:12:25,790 So let's get into that the next video.