1 00:00:07,710 --> 00:00:16,350 Let's put into practice what you've learned and the Flexbox and Responsive Design to build this website 2 00:00:16,350 --> 00:00:17,490 from scratch. 3 00:00:17,670 --> 00:00:21,630 As we discussed, the first step is what you call planning. 4 00:00:21,660 --> 00:00:30,120 The planning include how you are going to lay out your content, or you can have a look at some pool 5 00:00:30,150 --> 00:00:35,070 project that has been built by different developers. 6 00:00:35,070 --> 00:00:44,280 So we have more tools that you can have sample project and Figma is number one and Figma is a tool for 7 00:00:44,280 --> 00:00:45,210 designers. 8 00:00:45,210 --> 00:00:51,420 So I want to dive in more about Figma, but I want to show you that inside this application you can 9 00:00:51,420 --> 00:00:55,710 see some project or design built by the community. 10 00:00:55,800 --> 00:01:03,720 So if you click on community and files and templates and click on web, you can see that we have some 11 00:01:03,720 --> 00:01:07,470 point design built by other members in the community. 12 00:01:07,620 --> 00:01:14,160 So let's say that you want to build something like this, you click on it and then again click on that 13 00:01:14,160 --> 00:01:17,730 and expand it and increase the zoom level. 14 00:01:17,730 --> 00:01:24,450 And here you can see the kind of color and then the layout of this website as well. 15 00:01:24,450 --> 00:01:29,340 So you can have this one as a roadmap to build your website. 16 00:01:29,340 --> 00:01:30,750 That is the first step. 17 00:01:30,780 --> 00:01:37,230 Well, let's continue to build our application after we finish building this project, you have the 18 00:01:37,230 --> 00:01:41,880 idea to convert any design to your future projects. 19 00:01:41,880 --> 00:01:43,650 So let's get going. 20 00:01:43,650 --> 00:01:47,280 Before we continue for this kind of application. 21 00:01:47,280 --> 00:01:49,260 We can start at any part. 22 00:01:49,260 --> 00:01:55,170 We can start at the photo here or the number here or the body. 23 00:01:55,170 --> 00:01:57,150 The choice is yours. 24 00:01:57,150 --> 00:02:00,750 So let's start with the hero banner here. 25 00:02:00,960 --> 00:02:03,780 So now let's get back to the HTML. 26 00:02:03,810 --> 00:02:11,039 Let's remove everything from here because this one was playground and now inside the HTML too. 27 00:02:11,070 --> 00:02:12,990 Let me remove the h one. 28 00:02:12,990 --> 00:02:15,000 Now let's get started. 29 00:02:15,030 --> 00:02:21,360 The first step is let me have some comments to show me where I am in my code. 30 00:02:21,510 --> 00:02:28,590 So the first one I'm going to give is called the nav bar because that is the first thing we need to 31 00:02:28,590 --> 00:02:29,220 design. 32 00:02:29,220 --> 00:02:31,680 But we are going to start with the header. 33 00:02:31,680 --> 00:02:41,850 So after now bar, we have the header and after header we have the actual body, which is this one. 34 00:02:41,850 --> 00:02:46,020 And lastly, we have the footer down here. 35 00:02:46,020 --> 00:02:48,420 So let's move step by step. 36 00:02:48,420 --> 00:02:56,280 So here is going to be the actual content and down here is going to be the footer, so are going to 37 00:02:56,280 --> 00:02:58,380 fill up with a HTML. 38 00:02:58,410 --> 00:03:00,030 So let's start with the header. 39 00:03:00,150 --> 00:03:09,480 So we are going to use the header tag and inside I'm going to give it a day of class core header content. 40 00:03:14,500 --> 00:03:17,140 Go and inside that have a look. 41 00:03:17,500 --> 00:03:22,690 We see that we have the children inside this container. 42 00:03:22,690 --> 00:03:25,060 So this what we call the header. 43 00:03:25,060 --> 00:03:26,620 Why am I doing so? 44 00:03:26,620 --> 00:03:30,250 Because I want to use Flexbox to control it. 45 00:03:30,250 --> 00:03:34,930 Children, that is why I'm wrapping everything inside a container. 46 00:03:34,930 --> 00:03:39,760 And here I'm going to add each one which states that you write. 47 00:03:39,760 --> 00:03:45,130 We read, you write, we read. 48 00:03:45,640 --> 00:03:51,280 And then after that I added a P tag with some dummy text as that. 49 00:03:51,280 --> 00:03:53,380 Let me reduce the text a little bit. 50 00:03:53,530 --> 00:04:02,920 And after the P tag there is a link or a button, which is this one, and I put it inside a link because 51 00:04:02,920 --> 00:04:04,600 I want to be a link cover. 52 00:04:04,630 --> 00:04:13,480 So after the P, I added a link tag and let me give it hash tag and inside I added span because I want 53 00:04:13,480 --> 00:04:15,670 to style this one like a button. 54 00:04:15,670 --> 00:04:18,790 So creates new post. 55 00:04:19,540 --> 00:04:20,079 Great. 56 00:04:20,079 --> 00:04:24,910 Now I'm done with the semantic for the header if I save it. 57 00:04:24,910 --> 00:04:26,950 This what I have pretty simple. 58 00:04:26,950 --> 00:04:27,580 Right. 59 00:04:27,580 --> 00:04:31,750 So in the next video let's go ahead and style the header.