My portfolio project with a few things I cant work out

Code Feedback
1

My portfolio

Hello. I seem to have met the objectives for the portfolio project. However, I have a few snags that I cant seem to work out.
One - On my navigation bar, when I click “Contact”, it directs the page to the contact area, however, the other links seem like they only gently nudge the page down a little bit, without actually directing to the designated area of the page.
Two - How can I make it so the elements on the page stay within the format Ive placed them when they are viewed on different types of browsers? I am having a really hard time figuring that out, and have read several articles and browsed some forums without finding a solution that seems to work for me.

I used a lot of placeholders in making this page, because honestly I dont have anything to put in those spots yet!! Haha. Hopefully after I move on from this project I can return to it and make it a bit flashier as I learn more. Thanks for looking !!

2

For inpage linking you need a structure similar to:

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#portfolio">Portfolio</a>
</nav>

<section id="home"></section>
<section id="about"></section>
<section id="portfolio"></section>

Notice the href in each <a> tag and the corresponding id of the sections. they must pair.

3

  1. IDs must be unique. You have the same id on your nav anchors. That target id (e.g., “portfolio” should only be on the target div. Also, those divs can only have one id.

  2. This isn’t my specialty, but I think the problem may be the use of the h1 which is a block level element. You can get a little better results if you adjust your CSS:

.pink-title-border {
  border-color: pink;
  border-width: 20px 10px 20px 10px;
  border-style: solid;
  background-color:white;
  max-width: 730px;
  padding: 10px 60px;
  margin: auto;
  border-radius: 800px;
  opacity: 0.8;
  display: table;
}

Also, please do a better job of organizing your code, with proper indenting. It makes it much easier to follow. If you select the code in a pane and do a shft-tab, codepen will auto indent.

4

Will do! Sorry about that, I’m brand new to this and working things out as I go along. Appreciate the advice!

5

Okay, so I was linking them to the div ID, but I should be linking them to a section ID? I’ll fix this.

6

You just need to have only one id to which they link. It could be a div. But section is a perhaps better because it is more descriptive, part of what they call semantic HTML.

Will do! Sorry about that, I’m brand new to this and working things out as I go along.

Yup, we’ve all been there.