1 00:00:08,840 --> 00:00:10,070 In this video. 2 00:00:10,100 --> 00:00:13,760 Let's get started to design this website. 3 00:00:14,060 --> 00:00:21,860 But before we continue, we need to have a road map, meaning how we are going to start this particular 4 00:00:21,860 --> 00:00:22,640 project. 5 00:00:22,940 --> 00:00:29,600 Remember, every element on the page that you see is made up of components. 6 00:00:29,780 --> 00:00:37,170 So we have what is called the number component and which contains other children. 7 00:00:37,190 --> 00:00:41,900 That is the length and then the logo and then for the header. 8 00:00:41,930 --> 00:00:43,840 This is one component. 9 00:00:43,850 --> 00:00:52,180 And inside this component we have individual children and this one can be a component of these children. 10 00:00:52,190 --> 00:01:00,980 So for this, we can start at any point, we can start developing the footer here or we can start developing 11 00:01:00,980 --> 00:01:03,230 the services component. 12 00:01:03,260 --> 00:01:05,030 The choice is yours. 13 00:01:05,239 --> 00:01:12,130 One cool thing about React is that there is no formal way of structuring your projects. 14 00:01:12,140 --> 00:01:14,360 So let me show you the easiest way. 15 00:01:14,480 --> 00:01:23,180 So now inside the SABC, let me collapse all the open folders and inside the SABC, let's create one 16 00:01:23,180 --> 00:01:23,820 folder. 17 00:01:23,850 --> 00:01:32,030 Core components and I'm going to keep all these components inside that component folder. 18 00:01:32,240 --> 00:01:37,820 So the first component we are going to create is called the NAV Bar. 19 00:01:39,160 --> 00:01:40,570 And insights. 20 00:01:40,600 --> 00:01:51,610 Let's go ahead and create the component number dot G's and our add the CCIS inside its own folder. 21 00:01:51,610 --> 00:01:56,020 Core nav bar does CCIS. 22 00:01:57,570 --> 00:02:03,250 Now let's go ahead and use the snippet called our AFC. 23 00:02:03,300 --> 00:02:10,919 If you don't have that extension, go to extension section and search for React Redux. 24 00:02:10,919 --> 00:02:14,760 And this is an extension that I installed with this one. 25 00:02:14,790 --> 00:02:18,870 It can help us to generate that component really easily. 26 00:02:18,900 --> 00:02:21,690 So now let's get back to the components. 27 00:02:22,110 --> 00:02:29,690 If I make use of our AFC and I hit enter, it has given me the functional component. 28 00:02:29,700 --> 00:02:33,570 So let's see how we are going to structure our nav bar. 29 00:02:33,600 --> 00:02:43,620 I'm going to use the nav tag and inside I'm going to have a DIV with a class called NAV logo and then 30 00:02:43,710 --> 00:02:46,860 it's not logo like that. 31 00:02:47,190 --> 00:02:52,260 And then inside that I'm going to add an image that is my logo. 32 00:02:52,680 --> 00:03:01,350 So next step is I need to locate the source of this image and I need to import it here as logo from 33 00:03:02,190 --> 00:03:05,340 dot, dot, slash, slash assets. 34 00:03:05,340 --> 00:03:08,730 And I have the logo dot, p and G. 35 00:03:09,030 --> 00:03:12,540 So let me use it here as logo. 36 00:03:12,600 --> 00:03:16,560 And for the art, I'm going to use logo also. 37 00:03:16,590 --> 00:03:19,260 Now I'm done with the first section. 38 00:03:19,590 --> 00:03:23,160 The next section is going to be the nav link. 39 00:03:23,160 --> 00:03:28,290 So I'll make use of nav dash links and here we go. 40 00:03:28,470 --> 00:03:32,370 So inside I'm going to have lists of links. 41 00:03:32,400 --> 00:03:38,130 The first link is home link for a slash, and then the name is home. 42 00:03:38,370 --> 00:03:46,800 I want to have three more links so I will select all press shaped and then option and then my down arrow 43 00:03:46,800 --> 00:03:50,190 key and three times and here we go. 44 00:03:50,340 --> 00:04:01,620 So I would change this one to about and then this one to services and this one to portfolio. 45 00:04:01,950 --> 00:04:02,600 Great. 46 00:04:02,610 --> 00:04:05,100 So now we are done with the HTML. 47 00:04:05,130 --> 00:04:08,880 So let's go ahead and use it inside the app components. 48 00:04:08,910 --> 00:04:11,850 Let's require the number components. 49 00:04:11,850 --> 00:04:13,890 And I have the auto import. 50 00:04:13,890 --> 00:04:15,150 That is nice. 51 00:04:15,180 --> 00:04:18,570 So next is I need to render inside this. 52 00:04:18,570 --> 00:04:20,190 So I'm going to make this off. 53 00:04:22,290 --> 00:04:23,740 And here you go. 54 00:04:23,760 --> 00:04:27,550 You can see that the image has covered all the page. 55 00:04:27,570 --> 00:04:30,800 We are going to use cases to control it. 56 00:04:30,810 --> 00:04:35,550 So in the next video, let's get started with the case for the number.