2.2 Set Up the Page and Header

Hey welcome back to build a one page website with fruit, no coding required. In this part of the course, we're gonna set up the background color for the page. We're gonna add in a container to hold our header. In that container, we're gonna add some title takes. And we're also gonna add an image. All right, so let's start by adding in a container for our header. So just hover on this little bar that runs down the left to make this component section open up. From this drop down, make sure you have basic elements selected. And then, we're gonna drag and drop this thing marked container onto our canvas. And down in the widget tree here, we're gonna rename it. So we'll double-click and we'll name that header. And now we're gonna give it some width control and some height control. So we're gonna set the width to 940 pixels, px. But we're gonna set the maximum width to 95%. So what that's gonna do is, as long as there's enough space, it will set the header to be 940 pixels wide. But if there isn't enough space to show it at 940 pixels wide, then the maximum width that this container will have is 95% of the available space. So if we go down smaller, just hit Edit and break point here to confirm. Now you can see that it shrunk this container down and we have a little bit of space on the left and right sides, because we have set it to be 95%% of the available width. So then we do not have things too smushed up when we get down to these lower widths. So I'm gonna hit this full break point again to go back to the default view. We're also gonna give it some height control. Now by default 12 rim has been inserted here. So we just gonna delete that and instead we're gonna give this a fixed height of 22 rim. I've showed you the site we're gonna be creating before. It has a dark look and I also went for a sort of a minimalist style. So to help me choose the colors that I was gonna use in the design what I did was I started by adding in an image first,and often this is the easiest way to get a design going. You pick out some nice images and then you do your design, so that it's gonna work with those images. It can just help to speed the process along. So I'm gonna go to add component. And this time I'm gonna go to free images from Unsplash. Unsplash is a fantastic site for stock photos, everything is absolutely free. You can use the photos for commercial or non-commercial purposes. And they're all really high quality, so the fact that there is an unsplashed search in here is super handy. Now the image we're gonna use in the header, you should be able to find it by searching for the words dark minimalist. That's the image we are gonna use here, however before we can add it in we're just gonna need another container to be nested inside our header, so that there's something for that image to go inside of. So we're just gonna drag that in, make sure that the shape of your container is highlighted blue. That's how you're gonna know that it will be nested inside. And then you can see down here, this container is being nested inside the header. And we're just gonna double-click that again and rename it to home image. And by default this container we've just added in has just filled up the size of it's parent, we don't want that to happen though. We want this container to be a maximum of 336 pixels wide. And we would want it to be minimum height of 18 rim. So now we're ready to add our image in, we go back to the Unsplash tab. Its preserved our search, which is handy. Now we can drag-and-drop into the container that we just created. And that has set that to be the background image for this container. Now if we scroll down on the right side here, you'll see this section named Background. We could click that to expand it, and here it shows our background image. And this is the URL for the unsplashed image. And right now, the alignment of this image is a little bit off, it's clipping off the top of the flower. So we want the flowers to be more centered. So down here, this is where we can control the alignment of our background image. So instead of having the position set to center center, we're gonna change it to center top. That way the top of the image is gonna be aligned with the top of this container, and that pushes our flowers down to a much more appropriate position. Now we also don't want this image to be centered, like it is by default. We wanna push it over into the right side. And to do that, we're gonna need to open up this advanced section here. And then here where it says float, we're gonna change that to float right. All right, so now we've got our right aligned image. The next thing that we're gonna do is set the background color for our whole page, so that it matches the background color of this image. And then that's gonna make this image blend seamlessly into the overall design. To do this, I recommend that you install a colorpicker extension into whichever browser you're using. Here I'm using Chrome, and I like the ColorZilla extension. So what I'm gonna do is just grab my colorpicker and I'm just gonna click this gray area. And that shows me if you look along the top of the screen here that the color code of this dark gray here is 111111, so I've copy that to my clipboard. Now I'm gonna go into the PAGE tab up here, and now I can change the background color. I'm just gonna paste in that code, 111111, hit Enter. And now we've got a nice background color that blends in with this image. All right, so now we're ready to add in our title text. Once again, we're gonna go over to the components. I'm gonna choose basic elements, so we're gonna drag in this text. And you might think that you should drop it here where you see this plus symbol, we're not actually gonna do that I'll show you why. We can see that that automatically added a grid, grids can be handy. We're gonna be using them, but we don't want to use them in this case. So I'm just gonna undo that. Instead, what I'm gonna do is drag our text in just anywhere on the page here. And then we're gonna manually move this text up and nest it inside the header. And also we want the home image to come after the text box in the order here. So now we're just gonna rename that to title, and then we get ready to turn this into the title for our page. First off, we're gonna delete this paragraph text here, we don't need that. We're going to replace this headlines, so it says froont, F-R-O-O-N-T. And we're gonna change the heading level from heading four up to heading one. Right now, this has some width parameters already set on here by default, but we just want this text to be automatically sized. So we're gonna delete these settings from these width boxes here. And now we're gonna get in to the advanced section here, and we're gonna set this to float lift. We're also gonna go to this display property here and change this to in line block. And when I click on the canvas there, you'll notice that the image here just popped up a little bit. That's because we've got the image floating to the right and the title floating to the left, which is gonna allow them to sit side by side in this header here. All right, so now let's change up the typography of our title. So if we scroll down, you'll see the typography section and it's telling us to double-click in order to be able to edit this typography. First up, we're gonna change the font and there's a whole bunch of different fonts you can use here. It pulls in fonts from Google fonts and from Typekit. We are gonna go with a font named Source Sans Pro, so to find that we can just type in source and there we go. There's our Source Sans Pro font family, now we're gonna make this much larger so it's suitable for title text. We're gonna boost this up to 6 rem. I'm just gonna deselect that, so you can see it a little better. And we're gonna change the color here. We want this to be a lighter color, so we've got better contrast. And if you click this little box here to visually select the color, or you can type the color directly in if you have the code. In this case, we're gonna be using the color D5, D5, D5. We're also gonna add a little bit of spacing in between these letters. It's just gonna give it a little bit of a stylized look. If you click this arrow here, there are some presets for adding spacing in between letters. But they're all a little bit too big, so what we're gonna do is we're gonna add in a value manually of 0.15EM. All right, there we go, that's looking nice. Now what we also wanna do is control the alignment of this text here. We want it to be vertically centered, so it lines up with the flower. But we also want it to have a little bit of space around the outside. So, We're gonna go up to the margin section here. The margins control how much space there is around the outside of an object. Padding control is the spacing on the inside. So to add the right spacing around the outside, we're gonna add two rem at the top, two rem at the left side, two rem at the bottom. And we don't need any spacing on the right side, so we're just gonna blank that out. And now to make it center itself vertically, what we're gonna do is use a little bit of a trick. We're actually gonna use the line height setting here. What we're gonna do is set it, so that the height of the line of text that we're using for our title is the height of all the space that we have available inside our header. So we're gonna change that to 18 rem. And now, we have nice vertically centered bit of text. So if we look at where our header is, now everything's nice and aligned. We've got a little space here on the left side of our title, it's centered well vertically. Now image here though still needs a little tweaking. It's just a little too high up the top here. So we're gonna give this some changes to its margins as well. We're gonna change the top margin to two rem, we'll also change the bottom margin to two rem. And this will make sure that when we start adding in content below the header section, it's not gonna feel squashed up against the rest of the content. And then we're gonna blank out the left and right sides. All right. So now, everything is just right and that makes the head section good to go. In the next lesson, we're gonna start building out the next section of content, and that's gonna be the features panel. So you saw before we had a little panel with three icons and little bit of text describing some features. We'll be putting that section together across two lessons. So in the first one, we're gonna set up the outer panel that's gonna contain those features. And in the lesson after that, we're gonna add the content inside that panel. So we'll get that outer panel together in the next lesson, I'll see you there.