FREELessons:12Length:1.9 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Create the Top Header

We’re now ready to start coding up the content, beginning with the three headers that comprise the upper portion of the page.

3.1 Create the Top Header

Hey, welcome back to Figma to HTML. In this section of the course, we're gonna be creating the top three headers that form up the overall header area of the site. And we're gonna be beginning with this top header here, the one that has the background color the same as the outside background color of our design. In the interests of keeping it relatively simple, we're not gonna include these links here, English, French, Espagnol. We're just going to include these popular destinations, and these links are in the right hand side here. We already set up the basics of the HTML that we're gonna need for this section in the last video. So we just have a little bit more to add. The first thing we're gonna need is a div that can control that little sub section of content where we have our popular destination links. I said div, but actually what we're gonna use is a navigation element. This is meant to be a sort of navigation link, so that's what we'll include. So we go nav, and then we're gonna give it the class popular_destinations. So popular_destinations and then tab gives a nav element with the class popular_destinations. Now if we look at our content in the top right here, the actual locations are linked. But this bit of text here that says Popular Destination is just regular text. So I'm just gonna add in a div, and then in Figma, we can actually right-click and Copy as Text, and we can paste that straight in. Sometimes in templates you might need to correct some of the text a little bit. We're gonna add an S onto the end of this so it's grammatically correct. Now for all the linked items, we're gonna add in just a placeholder link with just a little hash. We're going to need one, two, three, four, five of those. So we're just gonna add in one, two, three, four, five. And then hold down Ctrl, click each one of the bits of text. Copy as Text, and then just paste them into each line. And when you're done you'll have this. So that's all the HTML that we need to add for this section. Now let's add in a little styling. The first thing we're gonna do is set the background color correctly for this row on top here. So we're gonna go into our style sheet. We're gonna set up our top header style. And I'm gonna give it a background color. I'm gonna use one of the variables that we've all ready set up. And we know we want it to have the same background color as our overall body. So we're gonna say background_color_two. So giving it the same variable as we used up here in our body. So that has giving us the correct background color in our top header area. Now we need to control the height of this top header area, and then style up our text. So let's select the frame for our top header, and we'll have a look at our height, it's 50. So in our code, we wanna set our minimum height to the rem equivalent to 50 pixels, which is 3.125 rem. So that's just 50 divided by the base font size of 16. And now because we've set the inner class to have a height that inherits from its parent, and our inner class is inside our top header class, This inner will inherit a height that we added in here of 3.125 rem. All right, so now let's apply some styling to our navigation menu here. We're going to be typing our popular underscore destinations class, so add that into our styling. And we wanna do two things. We want to align all of these items over on the right side of our header, and we wanna put them all next to each other. At the moment, popular destinations is on a different line to each of these links. And the way we're gonna achieve both of these things is by using flexbox. So we'll say display to flex. Display, flex, and just by using flexbox that's going to put all of the content onto the same line. Now we want to push it up to the end of our top header area and to do that, we're going to use the justify content property. And we're set it to flex end. So it pushes everything to the end of our flexbox. So let's check on what we've got so far. All right, so as we said, everything is on the same line now and pushed over on to the right. Now we need to style the text that we have in the section here and control the alignment and spacing a bit more finely. The first thing we want to do is set the font size correctly. So I'm gonna hit Ctrl, select one of these items and look at the font size. It's 12, so let's add a font size property to our popular destinations. 12 pixels converts to 0.75 rem. Now we also wanna make sure that the height of our letters. Or rather the height of the line that contains our letters is the same as the height of our top header. That way, the letters will all be vertically centered in that space. And we can do that quite easily by just adding in a line height property, and setting it to the same height as our header. So that is 3.125 rem. Now our font is at the right size, and you can see the text is vertically centered. Now we're going to make sure we have an appropriate amount of spacing around each one of our items. And we also want to set the font weight correctly. So if we go back to Figma, and we select one of our links here, we can see that the font weight should be set to medium. That actually translates to a font weight of 500. So in our code, let's grab our population_destination class again. Just copy and paste it, only this time we wanna target any A elements that are inside our popular_destination's div. So that's only gonna target the link items in there. And we can set our font weight to 500. And now we wanna put a bit of space on the left side of each one of our links. So in Figma, let's see how much space there is in between each one of these items. The way we can do that is by making sure that one of them is selected, like we already have. And then holding down Alt and hovering over a neighboring element. So that tells us that each one of these items is about 30 to 32 pixels apart from the next one. So we'll just go with a 30 pixel margin, we'll set that on the left side. And in a rem value, that's gonna translate to 1.875. All right, so now our gaps are correct and our font weight is correct. Now all that's left for this section is to remove the underlines from the links and correct the colors of both the links and the regular text. The color of the links here is actually used in quite a few places throughout this design as a highlight. So we're going to make that color for those links the same as the links that are gonna be used throughout the site. And we're going to define that color as a new variable, and we're going to color it highlight color so that we can use it in a bunch of other places too. So over here, let's grab a copy of that color code. We are going to create a new starter target, all of the A elements in the site. We're gonna set text decoration to none. That's gonna turn off that underline. Now, let's make a new color variable, call it highlight color. And add in that color from Figma. Then we're gonna apply that color to our links by saying color and adding in a variable and choosing a highlight colored variable. I've actually just realized that I just put the normal color codes in here. What I should have done, previously we've created another variable for that and called it border_color. So let's just fix that up now, put that up here. And replace these with our variables. I'll just do that twice. All right, so now that has changed the color of this correctly, and you can see we've still got our border colors in there so that's all still fine. Now to change the color of the Popular Destinations text. Go back to Figma. Ctrl+click on that Popular Destinations text so we can get this color code. We'll just copy that. We're gonna make another variable. We'll call this one text color one. And just a little note there, you can use hyphens when you're creating your variable names. But the good thing about using underscores to separate the words is that when you double-click on that variable name in your code, it'll highlight the whole thing. And makes it a lot easier to copy and paste variable names. Just a little side note. Now we wanna target this text here which is inside this div. So in the same way that we were targeting the A element that was a child of Popular Destinations. Instead, I'm just gonna copy and paste this whole block of code. We're going to target div child elements. And now we're just gonna add in a color for this text. Once again, we're using a variable. Start typing it in, and it will autocomplete for us. And now that sets the color correctly. So that is everything that we needed to do to get our top header section up and running. We've set up our HTML, our alignment, our link and other text coloring, and our font sizing. In the lesson, we're gonna continue building out the headers. We're gonna be moving on to this main header section here. So for that, I'll see you in the next lesson.

Back to the top