Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:

Test 12 fails: “#navbar element should always be at the top of the viewport”
I’ve tried:
position: fixed; top: 0; width: 100%; z-index: 1000
Simplified HTML structure (removed wrapper divs)
Different CSS approaches (left:0/right:0 vs width:100%)
!important declarations
Multiple browsers (Chrome, Firefox, Safari)
Incognito/private mode
Cleared cache, disabled extensions
The navbar appears visually correct - stays at top when scrolling. All other tests (1-11) pass. Been stuck for days despite tryi

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>Personal Portfolio</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <nav id="navbar">
      <a href="#welcome-section">Welcome</a>
      <a href="#projects">Projects</a>
      <a id="profile-link" href="https://github.com/your-username" target="_blank">GitHub</a>
    </nav>

    <!-- Welcome Section -->
    <section id="welcome-section">
      <div class="welcome-inner">
        <h1>Hi, I'm Eleni. I build for the web.</h1>
        <p class="tagline">Front-end developer crafting clean, accessible interfaces.</p>
      </div>
    </section>

    <!-- Projects Section -->
    <section id="projects">
      <h2>Projects</h2>
      <div class="projects-grid">
        <a class="project-tile" href="https://example.com/project-one" target="_blank" rel="noopener noreferrer">
          <div class="project-card">
            <div class="project-thumb" aria-hidden="true"></div>
            <div class="project-body">
              <h3>Project One</h3>
              <p>A simple, responsive landing page.</p>
            </div>
          </div>
        </a>
        <!-- Add more project tiles as you build more work -->
      </div>
    </section>

    <footer class="footer">
      <p>
        © <span id="year"></span> Eleni Liap. Built with love and CSS.
      </p>
    </footer>

    <script>
      // Update year and enable smooth scroll offset for fixed navbar
      document.getElementById('year').textContent = new Date().getFullYear();
    </script>
  </body>
  </html>




/* file: styles.css */
:root {
  --bg: #0f172a;
  --panel: #111827;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --accent: #60a5fa;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
  scroll-behavior: smooth;
}

/* Navbar fixed to top */
#navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: #111827;
  z-index: 1000;
}

#navbar a {
  color: white;
  text-decoration: none;
  margin: 0 10px;
}

/* Welcome section full viewport height */
#welcome-section {
  min-height: 100vh; /* satisfies test */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
}

.welcome-inner {
  text-align: center;
  max-width: 800px;
  margin-top: 56px; /* offset visual beneath fixed navbar */
}

.tagline {
  color: var(--muted);
  margin-top: 0.5rem;
}

/* Projects */
#projects {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4rem 1rem;
}

#projects h2 {
  margin-top: 0;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.project-tile {
  display: block;
}

.project-card {
  background: var(--panel);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.project-thumb {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.25), rgba(14, 165, 233, 0.25));
  height: 160px;
}

.project-body {
  padding: 1rem;
}

.footer {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--muted);
}

/* Media query requirement */
@media (max-width: 768px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
  #navbar .nav-content {
    padding: 0.75rem 0.75rem;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:143.0) Gecko/20100101 Firefox/143.0

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

2

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.