Home Page Layout

[00:00:00]
>> Let's finish up building our home page, right? We've got our header. That looks good. Let's finish up here with the title. I don't know what I call this. Jumbotron, maybe? I don't know if that's like an outdated term, but making up my own words today. The subtitle here and the two buttons.

[00:00:19]
So let's continue with our BEM naming architecture, our block element modifier. Let's start with the main section here. I'm going to give it a class of main. It's a little redundant, but we're rolling with it for now. I'm going to call this main heading. That's an element main_heading.

[00:00:40]
I'll call this main_sub-heading, Sub-heading. And we'll leave it at that for right now. I am missing a button, so I'm going to be a little sneaky here. Grab it from here, and then pretend that it already existed. It's our contact button. Come back to this. You didn't see anything, okay?

[00:01:13]
So if we looked at our design again, our title here, I guess it's defined in the style palette over here, right? Yeah, look at me calling things jumbotron, who am I? This is the heading and subheading. Rename you so everyone is on the same page heading 120 pixels, sub-heading as 40.

[00:01:36]
Maybe it means this hard. Okay, sub-heading. So 128 and 40 are the pixel values we're working with here. So back over here, let's go to our index file. Now we're gonna be coding in our index file because this is pertinent only to the home page. So main_heading, font size 128, I am also gonna give this a font weight of bold, so it really stands out.

[00:02:09]
That is definitely big, so it worked. Our sub-heading, our font size was sporty. So looking good. Now, you'll notice that our main content is pushed up against the viewport edge on like our heading or, yeah, our header element that has some padding here. So we'll go ahead and add some padding on to the main element as well to be consistent padding.

[00:02:39]
Okay, give it some padding. Cool, looks good. Looks like yeah, if you inspect and figma you can hold, you can highlight, click on an element and click Option on Mac and it'll show you the space so that's why I chose 150. So you'll also notice if we inspect here, the heading element, what we've defined, it's a paragraph here.

[00:03:06]
It has some margin on the top and bottom. You can see it has 128 pixels top and bottom margin. This is set on paragraphs in the user agent style sheet. So I'm gonna remove that and I'm gonna remove that in the base file just to be consistent. I'll put it up at the top here.

[00:03:22]
So for all paragraphs, I don't want any margin set up on there, right? So that's a little bit better. Now I'm not getting this massive space between our sub-heading and heading. Okay, let's style our button elements now. So by default, you can tell our button elements have some styling stung by the user agent but I want to remove that.

[00:03:49]
So the first thing that we will do, I will do this in the base class because buttons are not necessarily specific to the homepage. I think they are in this design, but we'll do it in here. So firstly, let's go ahead and give these some classes so we can style them using our naming architecture.

[00:04:09]
So we'll do a class of button. We'll also, well, I'm gonna come back to that. We'll give it a class of button. We'll leave it at that. I'll copy and paste on to the second one. Okay, in our base file, let's style our button. So we'll give it a font size of 32 pixels.

[00:04:27]
All these values are coming from our design doc. I'm going to stop switching back and forth just to save some time, but that's where I'm getting all these values from if you're wondering. We want to add some padding in here as well, so the button has some space.

[00:04:40]
You can see the width and height of the contact's button is really right up on there. So we're going to give it some padding. We'll do no top and bottom padding, but we'll add some left and right padding of 64 pixels. So now we can see it's a little bit bigger.

[00:05:00]
I'm gonna explicitly set a height on these buttons as well. I'm gonna make them 100 pixels in height like that, and I'm gonna set a border as well if we go back to our designs. And you can see this one has a border, we'll talk about that in a second.

[00:05:13]
But I will set that explicitly here. So border, say 4 pixels solid. We'll call it white for now. So we have two different kinds of buttons here in our design, you can see we've got two. We've got what I would call a primary button and a secondary button.

[00:05:27]
Primary button's gonna be the primary action that you wanna draw your users to secondary action, right? So that's how I'm going to name them. First I'm gonna define another style in our base file here. I'm gonna call this --color-button-border. So I could just set this to color text on primary because we want it to be white.

[00:05:53]
But again, we want it to be semantic. So what I'm actually gonna do, since I want this to be kind of themed, I'm gonna set this variable to a variable value. This is common. You can do this, but it's when you want to kind of keep things within the same color palette and still have their own semantic meaning here.

[00:06:12]
So, this will be our button border color, so, instead of saying white here, we can define the variable as the button border color. So, that's what it's looking like.