Build a Fullstack Music App with Next.js Title & Subtitle UI Layout

Transcript from the "Title & Subtitle UI Layout" Lesson

[00:00:00]
>> Almost there. We'll keep moving, so we got the image. The next thing is to start making the container for the content that's gonna go to the right of the image here. So if we go back and look at our design I'm talking about this content here, so we got the subtitle, the title and the description.

[00:00:14] We're gonna make the container for that and then we'll put the props in there to actually fill it out. So, let's do that. So underneath this box and this image, we'll add another box still inside the flex cuz we got two children inside this flex image on the left, content on the right, so we'll make another box here.

[00:00:35] We're gonna add some padding to this, which will be like 20 pixels, probably. And then we want to adjust the line heights. I found that if we don't adjust the line height, the title, the subtitle and description are just too far from each other. For some reason the font that trucker's using, they just look too far to me.

[00:00:56] So I adjusted the line height to compensate for that, but you can make that decision yourself. I just felt like it was too far and there was no padding and no margin between them, It was just so far from each other. I think it's the font. I don't know what font they're using.

[00:01:10] So we're gonna adjust the line height there, make it tighter cuz it's by default that goes more than 40 pixels. And then we're gonna use a text thing here. The text component, literally, just abstracts away from having to ever use h1 through h6 or a p tag or span tag, it just abstracts that away from you.

[00:01:31] And you just use the text. I think you can do, as, it inserts itself whatever you want, any type of texting and it'll be that. But I think by default it just uses paragraph for everything. The one was positive, that's what it uses. I haven't checked, we can confirm after I add it.

[00:01:51] So for font size, this will be the subtitle. I'm gonna make that SM, small. You can see here all the values, all the way up to extra, extra small. I didn't know that was a thing. And then we want this to be bold. So we're gonna make font weight, bold and then casing, we'll just transform this to uppercase.

[00:02:16] And inside of here will be the subtitle. So I made it small, bold and uppercase because if you go look at the design, it's what it is. It's super small. It does look bold and is totally uppercase. So, that's why I did that. So we got our subtitle.

[00:02:35] The next thing is going to be the actual title. So we'll do another text right underneath it. They stack by default. So like I said, I think their paragraphs not like spintax. This will have a font size of six, XL I think works. You can play around with that number title.

[00:02:55] So we got our title here and then we got one more text and that'll be for the description, the font sizes for the same font size of the subtitle so it'll be small. Although this one is not bold, it's the opposite of bold, it's actually light. So I'm gonna say, font weights.

[00:03:12] 100, which is the lightest value, you can give a font, other than making it disappear. And we'll put description. So we got our subtitle, our title and description. So if you wanna see what this looks like, we can add some here. So add a subtitle here, I'll call it profile.

[00:03:32] I'll add a title here, I'll put my name and I'll add a description here. And what is the design say? Says 15 public playlists, I'll add that 15 public playlist. So we'll render that and we'll see what this looks like. And yeah, pretty close. the obvious thing is that it's not white, it's in gray.

[00:04:00] So we got to change the color of the text to be whites and then we can kind of see what it looks like from there. So let's go back to our gradient layout and I think a good place to put it will probably just be in this second box for now.

[00:04:15] So we can just say color, white. We'll move it higher, if this whole page is gonna have white text, we can do that. Maybe, I just don't know, don't wanna do that, but there we go. Got our profile, got our title, got our description. It's like the profile is kinda big compared to this.

[00:04:35] I feel like on the design, this is way bigger than a profile. So, I don't maybe make the profile or the subtitle even smaller. There was like a value was there, xx small. Let's see, extra small. Lets see if that looks like, yeah, that's a little better, but this one also has to be extra small too, they're the same Okay, but now I don't wanna make that light, cuz now you can barely read it.

[00:05:09] Okay, that's a lot better So we're getting there, got our header, got our gradients, got our content here on the right. And got our image, we'll put a real image in there in a minute when we load the profile and do all the database stuff. But I guess if you want to see what it looks with the image, you can go to the design notes.

[00:05:31] I have this one here, or you can put any image you want. So you can actually just click view, original, you can copy that URL right there. Just copy that URL, or you can go back to the Index, add an image and then put that URL in there.

[00:05:51] And then we'll see. Yeah, there you go. And then for the profile, I believe it should be round. So I'm gonna go ahead and make that round on the profile here. So, round image is actually true. And there you go. So I'm going to stop here, commit and push this up before we continue on with the homepage, cuz I feel like we did a lot of UI stuff here, lot of prop stuff.