Certification Project - Personal Portfolio Webpage element <nav>

HTML-CSS
1

When tested on browser or on Preview of submit Project page, the property sticky and/or fixed of element nav works just fine. But when submitted (run the tests) consoles returns error: “12. your #navbar element should always be at the top of the viewport”. Below follows snippet of #navbar:

#navbar {
  background: #2a3430;
  padding: 0.5rem;
  font-size: 1.45rem;
/*  position: fixed; */ /* just to show what was used and worked on browser*/
/*  width: 100%; */ /* just to show what was used and worked on browser*/
/*  left: 0; */ /* just to show what was used and worked on browser*/
  position: sticky; /*works on browser and Preview */
  top: 0; /*works on browser and Preview */
  z-index: 10; /* ensure highest stacking order */ /*works on browser and Preview */
}

Much appreciated thoughts/comments/suggestion.

2

please provide a link to the lab you’re discussing and all the code you wrote for it so we can try it.

you can also run developer tools on your browser to examine the navbar to see where it is located.

3

Thanks for your reply. Apparently there is nothing wrong with the code since it is working as it should on different browsers and at freeCodeCamp submit / Preview page. But anyway bellow follows the code. Much appreciated your attention!

screenshot_freeCodeCamp_02
screenshot_freeCodeCamp_021402×704 99.5 KB


<!DOCTYPE html>
<html lang="eng">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="styles.css"/>
    <title>Portfolio Page</title>
  <head>
  <body>  
      <nav id="navbar">
        <ul>
          <li><a class="nav-link" href="#welcome-section">Эй</a></li>
          <li><a class="nav-link" href="#projects">Проекты</a></li>
          <li><a class="nav-link" href="#profile-link">Ало</a></li>
        </ul>
      </nav>   
    <section id="welcome-section">
      <div class="welcome-img">
        <img src="https://cdn.pixabay.com/photo/2021/12/21/03/56/street-6884534_960_720.jpg"></img>
      </div>  
      <div class="welcome-text">
          <h1 class="text-cycle">
            <span>Ahoi</span>
            <span>你好</span>
            <span>Привет</span>
          </h1>
          <div class="text-txt">
            <p>Ego consulti paratus sum.</p> 
            <p>Ad hoc officium expers et paratus.</p>
          </div>
      </div>     
    </section>
    <section id="projects" class="showcase">
      <div class="snippet project-title">
        <h2 class="project-tile"><a href="#">HTML 1</a></h2>
        <pre><code>
&lt;body&gt;
    &lt;h1 id="title"&gt;My IRC Chanel Visitors Survey Form &lt;/h1&gt;
    &lt;p id="description"&gt;Thank you for your time! Appreciate your thoughts.&lt;/p&gt;
    &lt;form action="" method="POST" id="survey-form"&gt;
        &lt;fieldset&gt;
          &lt;label id="name-label" for="name" &gt;Name&lt;/label&gt;
          &lt;input id="name" type="text" placeholder="Type your name      [required]" required&gt;          
          &lt;label id="email-label" for="email" &gt;Email&lt;/label&gt;
          &lt;input id="email" type="email" placeholder="Type your email (example@something.com)     [required]" required&gt;
        </code></pre>
      </div>
      <div class="snippet">
        <h2>CSS 1</h2>
        <pre><code>
body {
  width: 100%;
  height: 100vh;
  background: center / cover no-repeat url(https://cdn.pixabay.com/photo/2016/03/18/15/02/ufo-1265186_960_720.jpg) #32373c fixed;
  color: #f5f6f7;
  font-family: 'Ubuntu', 'sans-serif';
  font-size: 16px;
  } 
/*text alignment*/  
h1, 
h1 + p, 
footer {
  text-align: center;
}  
/*border and background customization*/
fieldset {      
        </code></pre>
      </div>
      <div class="snippet">
        <h2>HTML 2</h2>
        <pre><code>
        /* Code Snippet 3 
        
        
        
        
        
        
        
        
        
        
        
        
        
        */
        </code></pre>
      </div>
      <div class="snippet">
        <h2>CSS 2</h2>
        <pre><code>
        /* Code Snippet 4 
        
        
        
        
        
        
        
        
        
        
        
        
        
        */
        </code></pre>
      </div>
      <div class="snippet">
        <h2>HTML 3</h2>
        <pre><code>
        /* Code Snippet 5 
        
        
        
        
        
        
        
        
        
        
        
        
        
        */       
        </code></pre>
      </div>
      <div class="snippet">
        <h2>CSS 3</h2>
        <pre><code>
        /* Code Snippet 6 
        
        
        
        
        
        
        
        
        
        
        
        
        
        */       
        </code></pre>
      </div>
      <div class="snippet">
        <h2>HTML 4</h2>
        <pre><code>
        /* Code Snippet 7 
        
        
        */       
        </code></pre>
      </div>
      <div class="snippet">
        <h2>CSS 4</h2>
        <pre><code>
        /* Code Snippet 8 
        
        
        */
        </code></pre>
      </div>         
    </section>
    <div id="profile-link-1" class="foot-note">
      <div class="guess">
        <a id="profile-link" href="https://www.freecodecamp.org/fcc-4f459f5a-359f-4a85-8a09-63f18b1636df" target="_blank"> 
          <svg class="icon" width="50" height="50" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect x="0" y="0" width="200" height="200" fill="#000000"/>
  
  <!-- Central beacon core (swirling vortex) -->
  <circle cx="100" cy="100" r="20" fill="none" stroke="#00FFAA" stroke-width="4" opacity="0.8"/>
  <circle cx="100" cy="100" r="15" fill="none" stroke="#00FFAA" stroke-width="2" opacity="0.6"/>
  
  <!-- Fibonacci-inspired signal tendrils -->
  <path d="M100 100 Q110 90 120 80 C130 70 140 65 150 70" fill="none" stroke="#00FFAA" stroke-width="3" stroke-linecap="round"/>
  <path d="M100 100 Q90 110 80 120 C70 130 65 140 70 150" fill="none" stroke="#00FFAA" stroke-width="3" stroke-linecap="round"/>
  <path d="M100 100 Q110 110 120 120 C130 130 140 135 145 130" fill="none" stroke="#00FFAA" stroke-width="2" stroke-linecap="round"/>
  <path d="M100 100 Q90 90 80 80 C70 70 65 60 60 65" fill="none" stroke="#00FFAA" stroke-width="2" stroke-linecap="round"/>
  
  <!-- Signal nodes at tendril ends -->
  <circle cx="150" cy="70" r="5" fill="#00FFAA" opacity="0.9"/>
  <circle cx="70" cy="150" r="5" fill="#00FFAA" opacity="0.9"/>
  <circle cx="145" cy="130" r="4" fill="#00FFAA" opacity="0.7"/>
  <circle cx="60" cy="65" r="4" fill="#00FFAA" opacity="0.7"/>
  
  <!-- Subtle pulse effect (larger faint rings) -->
  <circle cx="100" cy="100" r="30" fill="none" stroke="#00FFAA" stroke-width="1" opacity="0.3"/>
  <circle cx="100" cy="100" r="40" fill="none" stroke="#00FFAA" stroke-width="1" opacity="0.2"/>
</svg>
        </a>
        <span class="description">Эй, корабль!</span>
      </div>
      <div class="disclaimer">&copy Авторское право 2025 Кюри </div>
      <div class="credits">
        <p>image by <a href="https://pixabay.com/users/24910824/?tab=achievements&order=latest&pagi=1">yoonason23</a> via <a href="https://pixabay.com">Pixabay</a></p>
      </div>              
    </div>
  <body>
</html>


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #0a0c0e;
  font-family; 'Ubuntu', sans-serif;  
}

#navbar {
  background: #2a3430;
  padding: 0.5rem;
  font-size: 1.45rem;
/*  position: fixed; */
/*  width: 100%; */
/*  left: 0; */
  position: sticky; 
  top: 0;
  z-index: 10; 
}

#navbar ul{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  list-style: none;     
}

.nav-link {
  text-decoration: none;
  color: #e0e4e5;
}

.nav-link:hover {
  color: #00cc88;
}

#welcome-section {
  color:#f5f6f7;
  height: 95vh;
  background: #111315;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 1.5rem;
  gap: 1.5rem;
}

.welcome-img {
  width: 55%;
  flex: none;
  height: 100%;
}

.welcome-img img {
  width: 100%;
  height: 100%;
  object-fit: contain; /*ensures image fits whitin constainer without distortion*/
  display: block; /*removes any default inline spacing*/
}

.welcome-text {
  width: 45%;
  flex: none;
  padding: 1.1rem;
} 

.text-cycle {
  font-size: 3.5rem;
  position: relative;
  display: block; /*ensures .text-cycle takes up space in the flow*/
  min-height: 16rem; /*reserves space for the tallest span */
}

.text-cycle span {
  opacity: 0;
  animation: fade 9s infinite;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 3rem; /*normalizes vertical space for consistent spacing*/
  height: 15rem; /*prevents overflow from taller characters */
}

.text-cycle span:nth-child(2) {
  writing-mode: vertical-rl; /*vertical orientation for Mandarin*/
  text-orientation: upright; /*ensures proper character orientation*/  
}

.text-txt {
  font-size: 1.7rem;
}

#projects {
  background: #5a6670;
  padding: 2rem;
}

.showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.showcase .snippet {
  padding: 1rem;
  border: 1px solid #ccc;
  background: #2a2f34;
  border-radius: 8px;
}

.showcase h2 {
  text-align: center;
  color: #e0e4e5;
  font-size: 1.5rem;
}

.showcase .snippet code {
  display: block;
  text-wrap: balance;
  color: #d1d5da;
}

.foot-note {
  background:#252d2a;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  font-size: 0.8rem;
  color: #e0e4e5; 
}

.foot-note .guess {
  display: flex;
  align-items: center;
}

.description, .disclaimer {
  font-size: 1.2rem;
}

.foot-note .icon {
  margin-right: 1rem;
}

.foot-note a {
  color: #00cc88;
  text-decoration: none;
  font-size: 0.7rem;
}

.foot-note a:hover{
  text-decoration: underline;
}
/* Animation settings */

.text-cycle span:nth-child(1) {
  animation-delay: 0s;  
}

.text-cycle span:nth-child(2) {
  animation-delay: 3s;  
}

.text-cycle span:nth-child(3) {
  animation-delay: 6s;  
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  11.11% {
    opacity: 1;
  } /*fade in (1/9th of 9s) */
  33.33% {
    opacity: 1;
  } /*stay visible (2/9th of 9s)*/
  44.44% {
    opacity: 0;
  } /*fade out (1/9th of 9s)*/
  100% {
    opacity: 0;
  }/*stay hidden until next cycle*/
}

/*Responsive design*/

@media (max-width: 768px) {
  #welcome-section {
    flex-direction: row; /* keep side-by-side layout */
    flex-wrap: wrap; /* allow wrapping if needed */
    padding: 1rem;
    gap: 1rem;
  }

  .welcome-img {
    width: 50%; /* equal split for balance */
    max-width: 100%; /* prevent overflow */
  }

  .welcome-text {
    width: 50%;
    padding: 1rem;
    font-size: 1rem; /* adjust font size for small screens */
  }

  .text-cycle {
    font-size: 2.5rem; /* smaller for small screens */
    min-height: 12rem;
  }

  .text-cycle span {
    line-height: 2.5rem;
    height: 12rem;
  }
  
  .text-txt {
    font-size: 1.2rem; /*smaller for small screens*/
  }

  #navbar ul {
    flex-direction: row; /* horizontal stacking */
    justify-content: center;
    gap: 1rem; /* space between links */
  }

  .foot-note {
    flex-direction: row; /* horizontal stacking */
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    text-align: center;
  }

  .foot-note .guess {
    flex-direction: row;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .welcome-img {
    width: 45%; /* Slightly smaller for very small screens */
  }

  .welcome-text {
    width: 45%;
    font-size: 0.9rem;
  }

  .text-cycle {
    font-size: 2rem;
    min-height: 10rem;
  }

  .text-cycle span {
    line-height: 2rem;
    height: 10rem;
  }
}
4

screenshot_freeCodeCamp_01
screenshot_freeCodeCamp_011407×704 176 KB

5

please share a link to the challenge on the freecodecamp website

6

Thanks for your reply. I’ve already shared the code. It was written using xed on Xfce. The only link that I can think about , follows:

https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage

Much appreciated your attention!

7

Your solution works from my end. Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

8

ILM, thanks. I’ll try and let you know. Much appreciated!

9

All the steps were followed and the console error message persists.

10

I don’t know what to say, your code passes for me

can you check what error you get in the browser console?

11

No worries, thanks a lot for your time!!

screenshot_freeCodeCamp_04
screenshot_freeCodeCamp_041402×693 50.6 KB

12

ILM, follows a screenshot of console error.

screenshot_freeCodeCamp_04
screenshot_freeCodeCamp_041402×693 50.6 KB

13

please open the browser console, not that one