Personal Portfolio Webpage - Build a Personal Portfolio Webpage

I need help with putting the navbar at the top and with the @media query. Thanks
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet"href="style.css">
  </head>
  <body>

   <nav id="navbar">
    <a class="active" href="#About">About</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
    </nav>
    
</div>

    <section id="welcome-section"href="#about"><h1>Hi I am Tamar</h1><i>I am a digital artist</i>
    </section>
    <section id="projects">
      <div class="project-tile" id="project-tile"><link id="website">check out my <a href="href="https://www.michellecarlos.com/ ">website!</a></link></div>

      <div class="title" id="title">Here are some of my projects:</div>

      <div class="project1"><img src="https://img.freepik.com/premium-photo/cool-cat-digital-art-painting_303714-711.jpg?w=740"></img><div>

      <div class="project2"><img src="https://blog.tubikstudio.com/wp-content/uploads/2019/12/House-in-the-woods-illustration.png"></img></div>

      <div class="project3"><img src="https://classbento.com.au/images/class/digital-art-with-procreate-for-beginners-portrait-big.jpg?1644808637"></img></div>
</section>
<a id="profile-link" target="_blank"></a>

  </body>
</html>
/* file: styles.css */
#nav{
  top:0%;
  position:fixed;
}

Your browser information:

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

  • your id is ‘navbar’, and not ‘nav’:
#nav{ ................... here you should have an id selector instead of #nav *btw you don't have the id 'nav' at all
  top:0%;
  position:fixed;
}
  • ‘welcome-section’ should have ‘height’ property set to 100%
  • 'img elements should have ‘display’ property set to block, ‘width’ property set to 100%, and ‘margin’ property set to 0 for top and bottom, and ‘auto’ for left and right.
  • media query:
    Responsive Web Design Media Queries

Thank you for the help. I have followed your steps and I still cannot get it right. Not sure if its the CSS or html that is the problem.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet"href="style.css">
  </head>
  <body>

   <nav id="navbar">
    <a class="active" href="#About">About</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
    </nav>
    
</div>

    <section id="welcome-section"href="#about"><h1>Hi I am Tamar</h1><i>I am a digital artist</i>
    </section>
    <section id="projects">
      <div class="project-tile" id="project-tile"><link id="website">check out my <a href="href="https://www.michellecarlos.com/ ">website!</a></link></div>

      <div class="title" id="title">Here are some of my projects:</div>

      <div class="project1"><img src="https://img.freepik.com/premium-photo/cool-cat-digital-art-painting_303714-711.jpg?w=740"></img><div>

      <div class="project2"><img src="https://blog.tubikstudio.com/wp-content/uploads/2019/12/House-in-the-woods-illustration.png"></img></div>

      <div class="project3"><img src="https://classbento.com.au/images/class/digital-art-with-procreate-for-beginners-portrait-big.jpg?1644808637"></img></div>
</section>
<a id="profile-link" target="_blank"></a>

  </body>
</html>
#navbar{
  top:0%;
  position:fixed;

}

#welcome-section{
  height:100%;
}
.img{
  display:block;
  width:100%;
  margin-top:0;
  margin-bottom:0;
  margin-left:auto;
  margin:right:auto;
}

@media only screen and (max-width: 600px) {
  .img{
    padding:2rem;
  }
}

The css file name is “styles.css”.

  • margin:right:auto; … put the dash between margin and right

Wow thank you for your help.

1 Like

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