Grouping text content

- [Narrator] So currently, we've got the first image as part of this section. But how do we do this text that goes along with it? Well, at the moment, what we have to think about is this isn't separate area. It's actually one big column these two things together. We gon wanna group these two things together. How do we go about grouping these two things together? So in our HTML, we cut out the content sectioning, it's a big list of tags, which one should we use? Oh, we can kind of look through all of this.

Now the ones that when we kind of run out of things to pick, we use a div tag. A div is just kind of the most generic content container, divider is short for division is another way that people think of it. So we just wanna divide up a group by content using a div tag. So what I'm going to add into my project is a div tag. So go back into my index dot HTML. And after I've got my image, but still within my text area, I'm gonna do a div tag.

And my div tag opens up automatically and it's ready for some more content. What content do I want inside of this? If we remember from what we had in our figma file, we had two different things in here. We had a heading level two, heading number two, and then just general body text. So the general body text has been set up. We don't have anything for this. How do we do this? Well, again, as part of this, we also have things like a h2 tag, we've got a h1 tag, is a heading, h2 is the next one that we can use, next level down.

So in here in our div tag, what we're gonnna say is h2, and the h2, what text is going to be in here? Lost and Found. So I'm gonna take this and paste it in here. Now I just like to kind of tidy this up because it is quite short text. So I'm just gonna remove some of this spacing. And in this div tag still, because we still grouping this within the whole of the project, we're gonna add a p tag. P tag, paragraph tag. We used it earlier.

And again, we're just gonna use this content. This is just fake content, we're gonna let Aria put this in a little bit later. So again, I'm just gonna paste this text in. So what we'll see now, if we look back at the project is something like this. It's tryna fit itself in this one column, all the way down the page. Not really what we want. How do we make this div span across? Well, it's the same as what we did with our image, same kind of idea.

So here, we want this div to be four columns. In our style.CSS, what we want to do, underneath here, we're gonna say the section with the class or the label of project has a div inside of it. And we're gonna start this up in a div in a grid column. We want to start this at number nine, and span four. So again, let's just check, one two three four five six seven eight nine. Yep, that looks correct to me. So let's see how that looks. So there we go.

It's in the right place. Now we just need to start the power h2. A h2 tag is just a generic tag. So I'm gonna start this up generically rather than just in this kind of area. So because this is a more generic tag, I'm gonna actually do it with the h1, which is favorite for the page. So just like before, got a h1 now footer, our h2, though, looks a little bit different. The font family is Josefin Sans.

And the font size is a little bit smaller, how small let's go and check. So let's select that. And let's see in our textiles, this one is 24. Line height is 1.3. Let's add that in. So 24 and the font weight is just the regular one 400. And the line heights is a little bit bigger than the one above, 1.3. So this is more of a generic style.

We can use h2s in any part of the project now. So what we'll have here is Lost and Found. It's kind of a thinner version of this. Maybe you wanna add some space between this. If you wanna add some space, we add some margin. So I'm gonna add just a quick bit of margin in my h2. Every h2 will have a margin. Zero on top, zero on the right, little bit on the bottom, maybe 16 and zero on the left. So let's see how this looks. Lovely. Looks pretty good.

So I'm just gonna quickly, gonna do before next video is add the content into each of these sections in exactly the same way. All I'm gonna do is just quickly add in a div tag, and then add a h2 and a p tag. Notice how it's always in the section. These sections kind of line up. So there's always gonna be the section, there's div and then there's p. So there's always gonna be three boxes, three one two three, one two, so we're just making sure that this all aligns up.

So once you've done that, once you've added this text in, we'll talk about one more thing as part of all these projects.