Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

I had everything working perfectly, then I started playing around with some CSS settings and now I keep getting " Your #navbar element should always be at the top of the viewport."

Here’s my code thanks for your help: https://codepen.io/ZapZaqZap/pen/YzgWNbg

<!-- file: index.html -->
<link rel="stylesheet" href="styles.css">

<ul id="navbar">

  <li>

    <a href="#about">About</a>

    </li>

  <li>

    <a href="#projects">Projects</a>

    </li>

  <li>

    <a href="#profiles">Profiles</a>

    </li>

</ul>

<body>

 <div id="welcome-section">

  <h1>I am Zach</h1>

   </div>

 <div id="about">

   <h3>a web developer</h3>

   </div>

 <div id="projects">

  <div class="project-tile"></div>

  <h2>Some of my recent projects...</h2>

  <a href="https://www.youtube.com/watch?v=0rDtsfZULo4&list=PLktFju7xyBzQDTD6H-dBtQW84i1h32P0F&index=8">codeMans Youtube</a>
  <a href=""></a>
  <a href=""></a>
  <a href=""></a>
  <a href=""></a>
  <a href=""></a>
   </div>

  <div id="profiles">

  <h4>Available to collab...</h4>

   <a id="profile-link" target="_blank" href="https://www.freecodecamp.org/ZapZaqZap">FreeCodeCamp Profile</a>

   </div>
 </body>  

/* file: styles.css */
@media (min-width: 200px) {
  background-color: blue;}

#navbar {display: flex;
padding:15px;
background-color: lightblue;
text-decoration: none;
list-style: none;
padding-left: 130px;
width: 100%;
}

#navbar a {text-decoration: none;
padding: 15px;
font-size: 17px;}

body {background-color: #2C5C82;
color: white;
margin: 0;}

h1 {position: relative;
text-align: center;
top: 180px;}

h2 {position: relative;
text-align: center;
top: -110px;}

h3 {position: relative;
text-align: center;
top: 160px;
font-size: 15px;
font-style: italic; }

h4 {position: relative;
text-align: center;
top: -20px;}

#projects {text-align: center;
margin-top: 590px;}

#projects a {color: white;
text-decoration: none;}

#profiles {text-align: center;
margin-top: 500px;
margin-bottom: 20px;}

#profiles a {color: white;
text-decoration: none;}

Your browser information:

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

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

2

How would you use CSS to “fix” an element to the top of the screen? You said you had it working before. Is it just a case that you forgot a keyword, or do you absolutely have no idea how to do it? Have you tried searching the googles?

2 Likes
3

I wasn’t fixing anything, just trying to spruce it up. I google searched this exact issue and noticed a lot of results but literally none of them were the fix to my particular problem. I just started coding recently, so… did you look at my code and figure out the solution?

1 Like
4

Yes, I know the solution to your issue but we don’t generally just tell people the answer but rather help them find the answer on their own. I tried to give you a hint in my previous response but apparently it wasn’t enough. Here’s another. The test says “Your #navbar element should always be at the top of the viewport.” You can reword this as:

“Your #navbar element should always be “positioned” at the top of the viewport.”

Does that ring any bells? You’ve actually positioned a lot of other elements in your form using the relative value. That moved them from where they naturally were placed to somewhere else. Perhaps there is another type of positioning that can allow you to always put #navbar at the top of the page?

2 Likes
5

Thanks for your help. Coding made me realize I’m dyslexic apparently hence the misunderstanding of your hint.

2 Likes
6

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