The assumption is you have the basics. You know how to create a heading, how to style it. But in terms of constructing a layout, you'd rather somebody else do it. Okay, I'm going to help you with that. So we'll begin with the standard navigation bar. I'll show you how to mentally think of the structure, write it up, and then we'll handle the CSS. Now, if we switch over to Sublime, I have a Laravel project, but there's really no need for it. This could be a static site as well.

All right, so if we come back and give that a refresh, there we go. Now we see it. However, we're seeing all this spacing around it, and that's because by default, browsers are going to add a certain amount of default styling. So if we click on the body tag, and by the way, if you're not familiar with Chrome DevTools, I can hit Shift Command C, or on any section, I can right click and choose Inspect. Now, if I'm looking at my body tag here, I can click on Computed, and this will show me an overlay of all the margin, border, padding, and dimensions. So immediately you can see all around we have eight pixels of margin. And where does that come from?

of HTTP requests you make. Next, for your links, you'll often see this in your projects. Type equals text/css. It's superfluous. You don't need it. It's already the default. So keep it simple. All right, so I'm going to create public/css, normalize.css, and paste this in. Okay, so now, if we were to come back, remember that we have set some overrides here that have not been saved.

Okay, so now, if we were to come back, remember that we have set some overrides here that have not been saved. So this is how it currently looks. But let's give it a refresh to pull in the normalized changes. And now you'll see it did just do the basics. It did reset some of those margins. And if we had a larger site, you would see some more changes that were made. Okay, so let's reset this heading here. I'm going to go to css/app.css, and again, I'm being very, very generic here. So the h1 within the header should have no margin-top, and we'll give that a refresh.

I'm going to go to css, app.css, and again, I'm being very, very generic here. So the h1 within the header should have no margin-top, and we'll give that a refresh. Okay, but now over here, you can see we have a couple things. One, the text is centered here, and that's fairly standard, right? We refer to this as a container. So let's do that. Let's come back here, and we'll say, all right, well, this whole header, it's a container. Now we could wrap it within a div called container, or why don't we just put it on the header here. So we'll call it container, and then style it here.

So remember, we have one section that wraps these two, and another section below that wraps those links. Let's focus on the one up top. I'm going to set a display of flex. Now, whenever you set a display of flex, by default, it's going to put everything left to right, or inline. It's not really the best term, but it's an easy way to think of it. It doesn't have to be that way. You could set a flex-direction of column, and now, once again, it's going to go vertically. But by default, it's going to be displayed as a row.

We set a display of flex, we justify the contents, and we're starting to get a layout here. Okay. So let's begin. Now later in this series, I'm going to show you how to use a tool called Tailwind to make the CSS so much easier to prep. But for now, we're going to create traditional classes. So what do we want to call this? Whatever you want. You could say headerTop. That's fine.

However, you'll notice there's now no space between the links. So we can either set a bit of margin between them. We could set a width for each one. It's whatever you want to do. Let's try this. I'll select an anchor tag, and I'm going to click this plus symbol, and this will allow me to create a new selector. Why don't we say nav a, and we'll set padding on the left of 10 pixels and padding on the right of 10 pixels. Okay.

All right. Let's implement that. And yeah, you'll see often you play around in the browser, you figure out what you need, how it's going to look. And then once you're set in stone, you can copy this and paste it in, or there's even ways you can structure things so that as you edit a file here, it's immediately reflected in the underlying source code. But we're not interested in that for now. All right. So I think we're fairly close to what we had originally.