about how we can style the homepage. This page, we've already designed the the navigation now. This is the time to make this page looks awesome for now. It just looks, you know, just a lot of data puts uh puts at some place. So let's just make it look like a home page of the blog. So the first thing we need to do is we simply need to um we need to centralize this all so to to centralize it, we need to create a new class. I mean we can create a class at two places. I mean we can create a class here or if we if you make this one uh this div tag as a central one, it would work or we can go with this one too because in this main tag this the head tag is the only thing but in the main tag this is actually the data and hate tag. It doesn't need to be in the center so we can just go with this one, the main tag. So this the class name. And then I'm gonna put em ex Auto. This is the first thing I'm gonna do but it won't make any change for now. And then I'm gonna add in this space. And now I'm going to define the vid, I just made this main tag Auto. But now I need to define the with which is the next important thing. I'm gonna go with the with w and then I'm gonna go with the two and five and it's it's gonna make it Uh the center, you know, in the center, I can try different ratios. This is one ratio but I can try, you know, 1 5 15 I think no 15 doesn't look good. Let's make it to five. And I think this looks good here. Okay, so this is a kind of ratio we can use we can even use, you know uh eight x 10 now. eight by Sorry, 12. Yeah, the title over six x 12. Um I think Dubai five looks awesome. Okay. The second thing is okay, the cool website is now in a in a in a container. In a centered container. But in this centered container I need the objects in the center. So first of all, I'm gonna do something with this title. I'm going to go back there. And what I'm going to do exactly is um first of all I'm going to change the text or I think the text is okay, I'm simply going to add the text center. The next Js blog doesn't look meaningful but the next day's blog with okay now or I think just leave it as it is. No problem. Just go with it now. This is in a in the actual center and I'm going to do the same with this one. The link. This idea. This actually so the claps um name and text center saving it, going back and now you can see that everything is on this center till till now it looks awesome. But I need to add some margin just before the navigation I mean yeah so I'm just gonna go there back and I'm gonna add some margin margin and margin top m y I'm gonna add m Y. So it's going to be applied in the you know Y axis and there is some margin where a little one. But what if I say nine okay this margin looks kind of okay yeah. Alright that's okay. Now I'm going to do the same if I simply copy that & M. Y. nine I think it shouldn't be applied here but exactly here so we would have the space before and after both. I think that looks what I want it. I want this to be looked. Now. The second thing I need to do is I need to make this a proper title. It is not a title, it doesn't look like a title for now. And I also need to put the you know the objective and in this day what I'm gonna do is I'm going to go there and that got body. I don't want the detailed text but yes I want some text and now it's the second thing I'm gonna do is I'm making dev give and then right here I'm gonna make it I'm gonna I'm just gonna copy this link. I'm going to paste it inside. That looks good and this is going to be the title so the class again and sorry it should have any space class name. And the second thing I need is right here, I need the text three XL save it go to the browser and yeah, that looks like a title. And now I think If I make it four x five, yeah that looks good because the title is exactly bigger now and uh it looks good bye now. But still it doesn't look like what I'm looking for or what I'm trying to make it. So the second important thing I am going to do is adding some space before and after. So so to do that, I need to be here and I need to add the m Y I'm five again and saving it now. There is some space right after and before the before the each each content. And uh one more thing I think I need to do is I'm just making it to excel for now. Okay, a little bit smaller. And the second thing I'm gonna do is I'm going to get the title and the body. Actually I just want to I just want to make it little little But if I make it three, okay now or I think I need to make it not three but two again, I'm doing it for purpose and I'm gonna tell you what what is my purpose, I'm gonna apply. I'm gonna apply something like you know um I'm gonna play some javascript thing here and I'm gonna subtract some strings. This is why I'm doing this. So to do that, I'm going back here and here it is, you know, outside of this return just before the return statement but inside this post dot map, I'm going to get the title and uh I'm gonna apply some function like you know sub str And inside that, I'm going to tell how much from one to let's say 50. This is the total of the strings. I want one from 1 to 50. And then I'm gonna I'm gonna save the data of title, you know, in a in a variable and the variable should be declared just inside the component but above the console. Again, above the solution of the console but return and we do not need that console anymore by the way. So I'm gonna write here the title and the the gross who are post title title. I'm gonna leave it empty down and I'm gonna put the data, I'm simply gonna write it here and do it like that post title. And then the second thing I'm gonna do is I'm going to create another variable post body. I'm gonna copy that. I'm going to paste it right here and I'm exactly gonna copy that. And sorry. That shouldn't be like that. Okay facebook here and now that the the data dot body and I'm just simply going to believe that I'm going to call the post title instead of this one and I'm gonna call the post body instead of the data body. I'm gonna save it going back to browser and you can see that it is now Uh we were getting the short text now instead of a lot of text. It is shorter now and I'm just gonna allow instead of you know the 50, I'm gonna call it 80 and I'm gonna go back and now this text a little more than the title itself but make it 50. And yeah, you can see that this is the title, this is the body and I'm gonna do one more thing. I do not want a lot of text in the title so sorry in the body but I want to make it look like good. So I'm just gonna do this one and you can see that the dot, dot, dot, dot dot dot and then I'm gonna add in this space and I'm gonna create a link. Okay and in this link I'm gonna write read more. This makes it look like The one I wanted to be so hyper reference for now I'm visiting with slash nothing more than that. And I'm going to go to the browser and there is a read more button which is which is not very much active for now but let's make it active for sure. And uh not only make it active but I think add a line break too save it. Well they're back and okay. The read more button is right here and the read more button should look like more attractive than this. So um here I'm adding in a space and uh into the read more button. What I'm gonna do exactly. Mm hmm. Class name. And I'm gonna add some glass from the tailwind again. Which color I should apply here. Text steel. Um, Let's say 500. I'm not sure how it's gonna look but okay. It is not even looking anything. Um why? It's not looking the way it should be. Oh, oh, I wrote these tillage. It is late. My God. Okay, save it now. It's still not looking anything anyway, so something is still missing. Something is still off. What is off exactly? Let's just copy this Rich. Mm hmm. Okay. Start applying. Mm hmm. I have applied the class name correctly. The class name the things that are applied here correctly but it is not visible. If I just cut it and paste it here. Save it. Oh yeah, I got it. Actually my my bad. Let's just cut this off. Actually this is a component. Okay. It is not a tag. So a component has its own way to process things. It is not just a tag like this one. So component. Absolutely process according to its uses and it's you know, allowance. So I'm not gonna do anything in this link. Let's just make uh let's just put this link inside a div or something like that. You can create and expand. Let's space to cheer and just go with the browser. You can see that it looks actually nice now this is what I was looking for. I mean more Color but I think it should not be it should be like you know 600 And that looks more prominent. Let's make it 500 sorry David go back to the browser. Yeah that looks good. That looks better. Kind of battery. Yeah if I simply delete that it's not going to go up for now because it is the div. What if I make it the span and save it and should make it. Yeah that looks better than the earlier version and This one this should be three XL it's a title. Yeah that looks that makes it a little more good and but this button is not exactly how I want it to be. And also I'm thinking To make it six. Yeah that's an expense actually we have very less data here which is which is not very ideal. So I think I think I have an idea to to to make it work. Um what I should do copy. Okay that's gonna be a little a little longer right than I expected. Plus data dot body and then I think one of the class. Okay that looks fine. Now just copy this one. Taste it and equal to and then copy this and do this and then make it Sebastian are is not is not gonna fly because of why the data. The body. The post body. Okay, I see I see we are applying this inside that so I like it. Mhm. Host body. See the C means I mean the the collected version or something like that. Come on post body see and then yeah that works now. This should be here. Yeah, that's better. But it's still not behaving actually. I think it is not applying with this one. Mm hmm. Let's just see what we're going to get in the browser. If we just simply delete that. If I delete that for now. Save it go back to the browser. Yeah. Yeah there is a lot of content now and I think uh yeah I think I do not even need I think I don't need this one because this now looks like some some content here. So I think I think this looks better than that. Yeah, absolutely. It looks better than that. And now I also think that we can try to make it three. Yeah, now that looks some post because we've put some content. So I think uh yeah this this this looks better And also let's just make it 70 and go back. Yeah that looks right and great and that looks much much better than the previous version and uh I think one more thing when this is the title. I also think that it should have the underlying underlying class and I'm I'm gonna have the underlying text and yeah, one more thing is specifically this one Ny three. It should have some some personal space. Yeah, that looks a lot a lot better than the previous version. And uh I think one more thing let's do one more thing which is H R save it. Go to the browser. Yeah there is a line. Hmm mm hmm mm hmm. I see this is inside this this one And this H one should have a class name For itself and the class name should have the data like them by three and now. Yeah, there is some space before and after. Yeah, I think that looks better better than the earlier version. Now in the next video we absolutely can design the individual pages. So till then stay tuned.