Nav

Updated: February 17, 2022
No Credit Card Required
ClaimYour
FreeTrialClass

Transcript

I'm done with the main section. So I'll move on to the top of my page, just like before, I'll look at what I have in my mock up and break it down into code.

I'll make this top rectangle a header because it's holding introductory content like navigation and the title of the website header displays block, so it will take up 100% of the width of the page. Just like in the mockup, the title of the website will be an h1, and the links below the title will be anchors.

I'm going to put placeholder values for the href values for now. To finish my HTML, I'll wrap my anchors in nav tags. nav holds the main navigation for your website. Let's see how this renders in the browser. My h1 is all the way to the left, but I want it in the center. So we'll give it the text align center declaration. My anchor should also be centered. So I'll make the nav display flex. And I'll also give it the justify center declaration.

To add the final touches, I'll give the h1 some margin bottom and then give them the same margin values to keep the spacing consistent. I'll also add 30 pixels of margin to the left and right of the anchors inside my nav. This way they aren't all clumped together. There, my header is complete.

The last thing to implement for my gallery mockup is the footer. I'll start with the footer tags. Since I have three links for the main pages of my website, I'll use a navigation. Of course, I'll use anchor tags for my links. This time I don't need a Flexbox to position my anchors because I want them to sit right next to each other. These links will need some margin to Lastly, I'll use a paragraph for created by Christie. There we go. My first web page is complete.

Loading...