Next.js Blog | Styling Individual Pages

Transcript

English (Auto-generated)

they're going to design the individual pages. Like this one, we're gonna just put some styling here. That's not a big deal for you because we've already done it. So we are gonna do nearly the same job but we need to finish what we've started. So this is why we are doing this. But a few more things we need to do on this page, for example, not any single page can be completed without adding the head tax. So we didn't add the attack yet. So like this one, it this has the The title uh and the title of this one one also has the description and this one has nothing like that. So we need to add a few things like like this page. So I'm simply gonna copy the head tag for now. I'm gonna paste it right here within this div tag. Okay, that's awesome. But it's gonna drove an error and this is the arab and why this error is here because the head is not defined. So this is a component. We need to import the component before using that. So I'm going to import it, importing the component had and we got it. Okay, that's awesome. And um the next thing we need, we need, you know, if I go there the The Great Next Jace blog, the Great Next Jace blog. This one should have the title in this and it's actually this is a title so they should have this title. So I simply I am going to copy this and I'm gonna paste it right there like this way and I'm gonna add this sign and we're going to have the title here and that music works fine. Okay, the same gun, I'm going to do here with the content. So this is you know, this looks fine. It's a blog homepage. This this looks fine. However, it's a great next Js blog homepage that looks more good. But here we do not need this dummy or fixed text, we need we need the title there. I'm gonna copy, I'm going to paste the title there and one more thing I need, I need this text here but in this format and that looks awesome And now it should, it should work fine over the browser to I'm going to go there and I'm going to simply open the inspect element and inside the inspect element, I'm going to go there to the head tag and inside the head tag there's a title, there's a description son to whatever it is. La la la la la la la la the Great exchange block. So this looks fine. This works fine. And I think we got it both of the meta tags, the meta and the title looks fine. Now we need to design the page which is not a big deal for us anymore because first of all we need to simply copy that and we need to copy that multiple times because we're gonna make it a real page. Unfortunately we have very less data but we just increased it Absolutely. When you would be working on your own content, you're going to have a lot of data for the individual page. So for us this is the only way so this is what we're doing anyway. We got enough data now we can do the other things. The first thing we need is to absolutely, you know, centralize the page. So I'm gonna just put the main tag and in the main tag I'm simply gonna copy to copy and paste whatever we had earlier. And then I'm gonna go inside the main drag and adding a class class name and the name of the glass should be first of all um mx auto space. And the second thing I'm gonna do is With I'm going to make it to five. Um the 25 is not a good idea. Let's make it 35 at least. Okay, that looks better. But you can I think we have the less data. So what if I make it like that? Okay. Okay. Okay. The next important thing is actually we need to have this title there. Do some simply copy that and inside this main tag I'm gonna taste this title and we're gonna have we we just got a text with the text of the you know as a header for now and there this is the next blog. I mean here what I'm gonna do is I'm simply I am just gonna make, sorry not this one but that one the class name. And I'm gonna make the text a little bigger like 6XL and adding the space and there it is. And I think it just, let's just call it for example. And the next thing I'm gonna do is I'm gonna check, it looks fine. Okay. Now a few more tweaks m by three and yeah, I got some space right after that. And the next thing I'm gonna do is uh the text. I'm going to fly in not the rose but let's supply rose 800 and save it again and go back to the browser. Yeah. I got the, I got what I was looking for I think. And I'm gonna make it the font bold. Save it again. The font is bold. Now that looks good. Better I think. And I'm gonna make it five. Okay. This looks exaggerated. Anyway. Yeah, that's okay. That works. And the next thing I need is I think I need a little more content. Okay, now that's some content we've got mm hmm. Okay. One more thing I'm going to add is right here or right here. I'm gonna add a P tag and here I'm going to write, you know, b I'm going to write that april six. This is absolutely a fake date. I'm writing like that. Anyway. The class name. Okay. The classroom reading the text and I'm going to call the gray 800. Let's just see what I'm going to get. This is the prey. I'm gonna call it five save it again. And yeah that looks better and this is just the data. I've added a few more things I can add right here by reading this. You know I was thrown in for example Michael Jordan's a jordans. Okay And uh topic let's say it is the sure held and food save it. Okay this is a few things you can add and then you can keep it continue. I mean you know this is just the basic style are vetted and I think we just have designed our blog in the next you know in the next series of this blog we're gonna continue this and we're going to actually create our own API and we're going to bring our own data and we're going to kind of create the correct application. We are we would be able to control the data in the Edmund panel and we're going to delete the data. We're gonna add the data and we would be able to you know add our own data Instead of getting the data from the A. P. I. Is from the fake KPI we're gonna create our own API and then you know all the current thing in E. D. C. We're gonna we're gonna be doing by our own so till then stay tuned
142 Views 0 Likes 0 Comments

In this Cast, we will Style Individual Pages and Posts

Comment
Leave a comment (supports markdown format)