Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:12Length:1.9 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.3 Create the Blog Section

Our last main content section is for the blog, and we’ll use CSS grid here one more time as we recreate this section of the Figma design.

4.3 Create the Blog Section

Hey welcome back to Figma to HTML. In this section of the course, we're gonna be creating the blog portion of our layout. I'm gonna move through this part of the course really quickly because you've now seen pretty much all the techniques that we're gonna be using. So we're basically going to be just implementing those same techniques one more time to get this blog section into the layout. All right so once again we're gonna need a wrapper element and we're going to give this the class blog. We're gonna need an inner class as well. And we're also going to apply inner_padding to this element. We're gonna need a heading with strong tags inside it. You can copy and paste the text from Figma and you'll get this. We have three posts that we wanna show, so we're going to use CSS grid again to position those posts. So we're gonna need an element we can apply that to. We're gonna give that element the class blog posts. Then we're gonna need an element for each of those posts. That can just be an empty div. Inside that div is the blog post image. The first one is Greenland. We are then going to need an element to hold all of the content that's showing up in that blog post, the teaser content. So we're gonna give this the class blog post teaser. Inside the teaser, we're going to need a heading. And a paragraph of text followed by a Read More link. And we're gonna have the Read More link to say Read More and then we're just gonna include an ASCII character. And then you just need to copy and paste the heading text and the paragraph text from each one of the blog posts in the figment design. And when you've done all that you're gonna have this code. And then to round all of that out there is a button at the bottom of the blog section that says read that blog. So outside of this blog post's div, we're just gonna add a link element. We're gonna use the button class that we already set up. And we're going to set the text to say, Read our Blog. All right so that has already taken shape to a degree. We've already got our button in there looking as it should be. And the spacing around the inside of this section from the defaults that we've already set up and heading is all working. So now we just need to set up our grid for the blog post and then style up the content inside them. So grab our blog post class. We'll turn it into a grid. We'll set up the grid-template columns to be three equal columns using the same technique that we did previously. And we want a gap in between these columns of 0.65 rem. We also want a bit of space above our blog posts, so going to target the direct child of the blog post class, and set the margin top to 1.5 ram. Now let's take a look at what we have so far, so our three columns are laid out correctly. That's all good. Now we need to fix up the internal content and change up the styling of the middle column. For the text formatting, I'm just gonna drop in a bunch of CSS all at once in here, cuz this isn't really anything you haven't seen already so far. We're just setting up a margin around the blog-post teaser, so that we have some spacing inside of that blog-post area. We're setting the text align to the left. For the heading, we're setting the font size and font weight, putting some space above it and below it, sending it to that doc font color and also sending it to a line to the left. And then we're telling our regular text to use the text color for variable that we set up earlier. All right, so it's looking pretty good so far. We need to style this link also though. So I've got one more color variable that we need to add in, this sort of a peachy pink color. So we're going to add that in as text color 5. And then we're gonna set the link inside our blog-post teaser to use that color and have a font weight of 500. So that teaser is all good. We have two things left that we need to do. One is we need to change up the styling of this central column and we need to change up the positioning of this button. We refer to our figment design. We can see that we're using the same type of a styling technique on this cell, as we did on this row here. And that we also have the image hanging over the top, in the same way that this image was hanging over the left. So we're going to use all the same techniques again. So I'm just gonna paste all this code in at once up here. And then run through what we're doing with each of these pieces of code. So here we're setting every second column to have that shadow and rounded corner on it. With this piece of code, we're telling the image to hang over the top by using this negative margin. With this piece of code, we're telling the central column, every second column to set its images to have a box shadow, and if we check out what we've got that gives us our central column looking just like it did in Figma. And you'll notice an interesting technique that's been used in this design here. This looks like the background color is lighter than its surrounds. It's actually not. This background is white and this background is white. It's just the drop shadow that creates an illusion to make it look like there are two separate colors here, but they're actually both white. So now the last thing left to do is to get our button here positioned in the center with the right amount of space above and below it. Now you might have wondered why we manually set this text, and this text to align left. That's because the easiest way for us to center this button is just to set text align to center for this whole part of the sign. So up here above our blog_post class, just as a note, it's always a good idea to put the classes in your stylesheet in the same order that they appear in the HTML. It helps you to navigate your styles. So we're gonna set blog to text-align: center. That centered that button. Now we only need to add spacing, which we'll do by targeting blog button. And we're gonna set the margin top value to 5.65 rim, and margin bottom, To 1.875 rim. So that has positioned our button correctly, and now this section is done. And with that, the entire main content section is finished. So we've now got all three of our header sections and all three of our main content sections, and that wraps up the main portion of the coding. We've only got one more little piece of content to add in, and that is the footer that we have all the way at the bottom here. And if you take a second look at this you'll see that this has the logo, page menu and the phone number, which is exactly the same as our main header up here. So in the next lesson, to cap off this design, we're just gonna quickly transfer the content from the main header into a footer element. So for that, I will see you in the next lesson.

Back to the top