Layouts and the Foundation of Links

Project 2

Step 1: Create a navigation bar section using <nav> and </nav>. Inside of this, create a<div> to hold the content of the link button that will be made. “link one” is just a place holder, in the future a title will actually go here. For example salmon, coffee, cheese.

Step 2: After some CSS, the place holders, “link one” and “link two” are now next to each other, horizontally. That way when they are turned into actual links, they look more stylized like the heading to a real webpage.

Step 3: The heading is now a pretty purple!

Step 4: Since the navigation bar looks like it’s floating in the middle of nowhere, this is how to fix it.

Step 5: The purple section is larger so in the future it can become a normal looking task bar.

Step 6: When you hover over link one and two it will now highlight in light blue.

Like what you read? Give Rose Pacheco-Campbell a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.