1 00:00:06,490 --> 00:00:07,570 In this video. 2 00:00:07,570 --> 00:00:09,610 Let's work on the layout. 3 00:00:10,210 --> 00:00:15,430 So inside the HTML, let's collapse. 4 00:00:15,430 --> 00:00:19,380 The one that we have done that is the number and then the header. 5 00:00:19,390 --> 00:00:22,690 The next step is going to be the actual contents here. 6 00:00:23,020 --> 00:00:29,260 So for that one, I'm going to wrap everything inside a tag section. 7 00:00:29,680 --> 00:00:33,130 And for every page we're going to have one section. 8 00:00:33,130 --> 00:00:35,050 So here we go. 9 00:00:35,050 --> 00:00:41,560 And for this section I want to give it a class, say container flex. 10 00:00:42,010 --> 00:00:44,470 So with this going to be a flex container. 11 00:00:44,740 --> 00:00:47,680 And after that, we're going to add two items. 12 00:00:47,680 --> 00:00:53,620 That is the main content and then the sidebar that is this one and then this one. 13 00:00:53,620 --> 00:00:55,090 So here we go. 14 00:00:55,090 --> 00:01:02,110 I'm going to make use of the main for the main content and for sidebar, I'm going to use a side. 15 00:01:02,110 --> 00:01:04,480 So we have these two tags. 16 00:01:04,480 --> 00:01:13,750 So inside the main here, we can give it a comment as right now or main as that. 17 00:01:13,750 --> 00:01:16,960 So here is going to be the side. 18 00:01:17,080 --> 00:01:18,910 So let's start with the main. 19 00:01:19,120 --> 00:01:22,570 So for the main, we are going to have individual items. 20 00:01:22,570 --> 00:01:31,360 And for the first one I want to give it as an article and inside I want to give it each one as what 21 00:01:31,360 --> 00:01:36,760 one man stock is on. 22 00:01:36,760 --> 00:01:37,600 Hot Kick. 23 00:01:39,250 --> 00:01:39,550 Good. 24 00:01:39,550 --> 00:01:46,690 So for the article here, let's give it a class called post content as post content. 25 00:01:47,350 --> 00:01:52,040 Now after the H one, let's add the image for the post. 26 00:01:52,040 --> 00:01:59,440 So going to be as I g and the first image I use is called post two, which is this one. 27 00:01:59,770 --> 00:02:10,750 And the class for the image is going to be as post image and for the of make it as post dash image. 28 00:02:11,740 --> 00:02:12,340 Great. 29 00:02:12,520 --> 00:02:16,390 The next one is going to be the actual info of the post. 30 00:02:16,390 --> 00:02:21,520 So now we are done with the title and then the image. 31 00:02:21,520 --> 00:02:24,880 The next step going to be the info about the post. 32 00:02:24,880 --> 00:02:29,390 So I'm going to wrap this one inside it on Container Corp. 33 00:02:29,620 --> 00:02:40,330 So after the image, let's add P here and for the P, let's give it a class as post dash info and inside 34 00:02:40,330 --> 00:02:44,380 we're going to have some font awesome icons and some links. 35 00:02:44,560 --> 00:02:48,310 So the first one is let's put inside this pan tag here. 36 00:02:48,490 --> 00:02:52,100 And inside this pan we are going to add the icons from font. 37 00:02:52,120 --> 00:02:52,810 Awesome. 38 00:02:52,810 --> 00:03:01,180 So I here and the class for that from font awesome is going to be f e s dash a dash user. 39 00:03:01,330 --> 00:03:03,550 You can copy any font of your choice. 40 00:03:03,820 --> 00:03:11,290 And for the author, I put them inside the h ref as John du great. 41 00:03:11,380 --> 00:03:21,130 So this pan for this one is going to be the post dash author so going to be as that and next is going 42 00:03:21,130 --> 00:03:26,980 to be the details about the post that is the date it was created and the icon. 43 00:03:26,980 --> 00:03:34,300 So I can select or copy and paste, I can make use of shifts and then option down arrow key and I would 44 00:03:34,300 --> 00:03:43,540 change this one to post date and inside I'm going to change the icon to f a r. 45 00:03:44,560 --> 00:03:52,750 And then the icon is f a does calendar and then does not. 46 00:03:52,900 --> 00:03:54,370 Then this one going to be the time. 47 00:03:54,370 --> 00:03:58,000 So I remove this one and use the time tag. 48 00:03:58,360 --> 00:03:59,950 Going to be as time. 49 00:04:03,280 --> 00:04:04,210 Einstein going to be? 50 00:04:04,210 --> 00:04:08,290 The date time is equal to 2022. 51 00:04:08,500 --> 00:04:09,610 Does. 52 00:04:10,780 --> 00:04:15,760 Nine Dias one it can be anything and provide us generally. 53 00:04:17,690 --> 00:04:22,910 First 2022 or make it as December. 54 00:04:24,350 --> 00:04:26,390 It can be any date of your choice. 55 00:04:26,810 --> 00:04:27,290 Great. 56 00:04:27,290 --> 00:04:28,250 So let's save it. 57 00:04:28,250 --> 00:04:30,080 And now let's have a look. 58 00:04:30,080 --> 00:04:31,940 And this is what we have. 59 00:04:31,940 --> 00:04:34,430 We can see that the image is too big. 60 00:04:34,430 --> 00:04:36,350 Don't worry, we will control it. 61 00:04:36,590 --> 00:04:39,770 So the next step going to be the actual contents. 62 00:04:39,770 --> 00:04:49,040 So here I put the content inside p tag and give it a class as the host does body. 63 00:04:49,550 --> 00:04:49,880 Great. 64 00:04:49,880 --> 00:04:54,530 So here I'm going to add some random text here inside the post. 65 00:04:54,530 --> 00:05:00,770 So after the P, let me collapse this one and let's add the read more or continue. 66 00:05:00,770 --> 00:05:05,000 So I use what is called continue reading. 67 00:05:05,780 --> 00:05:07,880 Continue reading. 68 00:05:09,740 --> 00:05:14,260 Three dots and then a class going to be eyes. 69 00:05:14,690 --> 00:05:22,860 Post dash read dash more and going to be the home page. 70 00:05:22,880 --> 00:05:23,840 So that is it. 71 00:05:23,840 --> 00:05:30,380 So if I refresh this one, we are going to see this one down here. 72 00:05:30,680 --> 00:05:31,360 Great. 73 00:05:31,370 --> 00:05:34,520 So what I split is about the CSS part of it. 74 00:05:34,640 --> 00:05:40,130 So what has legs is about the sidebar, but we can see that for the final one. 75 00:05:40,130 --> 00:05:47,270 For the sidebar, we have a specific element which is for the author and then the rest of it is going 76 00:05:47,270 --> 00:05:49,550 to be the list of posts. 77 00:05:49,550 --> 00:05:57,410 So which means that we are going to add an element for the author and then we can copy and paste this 78 00:05:57,410 --> 00:05:59,700 post here inside of the sidebar. 79 00:05:59,720 --> 00:06:07,340 So let's work with the author element so inside the outside, or let me collapse the main because we 80 00:06:07,340 --> 00:06:13,280 are done with that and for the outside let's add these properties for the author. 81 00:06:13,310 --> 00:06:16,780 So I'll give it a class as a sidebar. 82 00:06:16,790 --> 00:06:19,970 So class is going to be outside. 83 00:06:20,920 --> 00:06:27,370 Ball and inside I'm going to have one day that's going to drop the other elements. 84 00:06:27,370 --> 00:06:31,120 So they're going to be asked about me. 85 00:06:31,630 --> 00:06:41,140 And inside that I'm going to add H to going to be as about the author. 86 00:06:42,130 --> 00:06:47,890 And after that, I'm going to add the image of the author and for this one. 87 00:06:49,180 --> 00:06:52,270 And next is let's add the image for the author. 88 00:06:52,270 --> 00:06:57,700 And the image I use is picture two as pic two. 89 00:06:57,700 --> 00:07:02,560 And then the off is let's give it as the author image. 90 00:07:02,920 --> 00:07:03,360 Good. 91 00:07:03,370 --> 00:07:08,730 So after that, let's go ahead and add the full name about the author. 92 00:07:08,740 --> 00:07:10,820 So here are going to be the H two. 93 00:07:10,840 --> 00:07:20,080 And the class is going to be as about name or full name here and here, you can use any name. 94 00:07:20,200 --> 00:07:24,430 And after that, I want to add the row about this author. 95 00:07:24,430 --> 00:07:28,300 So I'll use a small tag and say full stock. 96 00:07:33,100 --> 00:07:34,750 Web developer. 97 00:07:36,430 --> 00:07:37,090 Great. 98 00:07:37,090 --> 00:07:42,310 And last step is going to be the actual description about the author. 99 00:07:42,340 --> 00:07:51,900 Wouldn't it be as class about me dash bio and let me add some dummy text inside and here we go. 100 00:07:51,910 --> 00:08:00,490 So now I'm done with the author here as the author and then the last one going to be the actual posts. 101 00:08:00,490 --> 00:08:05,170 So like I said, we are going to use the same post for the main contents. 102 00:08:05,170 --> 00:08:12,700 So inside here select this one and collapse and then copy and then inside the sidebar here. 103 00:08:12,970 --> 00:08:20,140 So after the author, which is this one, we can collapse it and now have some space and now let's paste 104 00:08:20,140 --> 00:08:20,320 it. 105 00:08:20,320 --> 00:08:21,460 So save it. 106 00:08:21,490 --> 00:08:25,960 Let's check it out in the browser and this is what we have. 107 00:08:25,960 --> 00:08:29,800 Everything is big and not all that readable. 108 00:08:29,830 --> 00:08:35,500 So the next video, let's go ahead and start this one to have something like this.