Personal Portfolio Webpage - Build a Personal Portfolio Webpage - Issues with Nav Bar

HTML-CSS
1

I am running into three error codes regarding the nav section of my code which are as follows:

  • Your portfolio should have a navbar with an id of navbar .
  • Your #navbar element should contain at least one a element whose href attribute starts with #.
  • Your #navbar element should always be at the top of the viewport

As far as I can tell, my code fulfills all three requirements and I am not sure what to do to correct these errors. Any advice would be helpful!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8' />
    <link rel='stylesheet' href='styles.css' />
    <title>Portfolio</title>
  </head>
  <body>
    <nav id='nav-bar'>
      <ul>
        <li><a href='#welcome-section'>Welcome</a></li>
        <li><a href='#projects'>Projects</a></li>
      </ul>
    </nav>

    <section id='welcome-section'>
      <h1>My Portfolio</h1>
    </section>

    <section id='projects'>
      <div class='project-tile'><a href='https://upload.wikimedia.org/wikipedia/commons/b/bc/Juvenile_Ragdoll.jpg'><img src='https://upload.wikimedia.org/wikipedia/commons/b/bc/Juvenile_Ragdoll.jpg'/ id='tile-img'></a></div>
    </section>

    <p>
      <a href='github.com' id='profile-link' target='_blank'>GitHub Profile</a>
    </p>

  </body>
</html>

/* file: styles.css */
#tile-img {
  max-width: 500px;
  max-height: 400px;
  display: flex;
  justify-content: center;
  margin-left: 70px;
}

h1 {
  margin-top: 25px;
  text-align: center;
  font-family: sans-serif;
  color: #eeccbb;
}

body{
  background-color: #aaee;
}

#nav-bar {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (min-width: 900px){
  #tile-img {
    max-width: 500px;
    max-height: 400px;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

navbar and nav-bar is not the same thing.

2 Likes
3

Thank you, I think I’ve been staring at the computer for way too long LOL.

4

its your navbar the instructions said to add an id of navbar but you instead put “nav-bar”. And don’t forget to correct the id in CSS :))

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.