How exactly do I make a navigation bar/header for my portfolio project?

I’ve been trying around with a lot of different code but just haven’t been able to get it to look right. As a point of reference, this is the basic idea of what I want it to look like[https://codepen.io/freeCodeCamp/full/YqLyXB]. I just want to have my name on the left side, and my three links to portfolio, contact info, and about section on the right, on the same exact line. Can anyone help me with this? Thank you in advance. And I apologize if that link didn’t work.

Think of HTML as a reverse tetris, every element you put in (besides a few exceptions like position absolute) falls upwards. In this example, a navbar is just a big tetris block that fills the upper part of a website, it’s the first piece you put in. Inside this tetris block, you have a set of rules (like having your name on the left side, and a menu on the right side). This is all that a navbar is, just a div with a few links.

This navbar isn’t done manually though, they are using Bootstrap to display the navbar. in this case all you have to do is check the bootstrap documentation, here: https://v4-alpha.getbootstrap.com/components/navbar/.
They teach you how to use their library to display a navbar.

1 Like