Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:

Hello, I’ve tryed everything I could find on this Forum and nothing seems to work.

I still can’t get “12. Your #navbar element should always be at the top of the viewport” right.

Can anyone please help me? Thanks =]

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css">
    <title>My Portfolio for fCC</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <nav id="navbar">
      <ul>
        <li><a href="#history">If you wanna know my history</a></li>
        <li><a href="#projects">Check'em my projects</a></li>
        <li><a href="#contact">Call me maybe</a></li>
      </ul>
    </nav>
    <section id="welcome-section">
      <h1>Hi, hello! Me llamo is Felipe</h1>
      <p class="text welcome">I'm but a student, simply trying my best to learn some WebDev stuff</p>
      <p class="text welcome"><a href="https://www.freecodecamp.org/felipead" id="profile-link" target="_blank" class="hyperlink">Here</a> is my profile on freeCodeCamp, there is not much to see</p>
    </section>
    <div id="history">
      <h3>In this section I present my academic and professional path</h3>
      <p class="text">I first graduated in Portuguese, in 2013. Then I worked as a Portuguese techer at a public school for 2 years.</p>
      <p class="text">Later I quit teaching and became a Law student. I graduated in 2021 while also finishing my first postgraduate specialization in Labor Law. Meanwhile I was approved in a public service entrance exam to work at a Labor Court.</p>
      <p>I now have been working in said Labor Court for more than seven years, and my experiences here range from Justices' Offices, to National School for Judges, and now Judicial Secretary.</p>
      <p>At the beginning of this year (2025), I decided on a new career path. I started studying JavaScript, HTML and CSS, as well as System Analysis and Development in SENAC as a Technological Undergraduate student.</p>
    </div>
    <div id="projects">
      <h3>Here I'll prove that I already have close to none projects</h3>
      <h4>Responsive Web Design Projects</h4>
      <ul>
        <li class="project-tile hyperlink"><a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form">Build a Survey Form</a></li>
        <li class="project-tile hyperlink"><a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page">Build a Tribute Page</a></li>
        <li class="project-tile hyperlink"><a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page">Build a Technical Documentation Page</a></li>
        <li class="project-tile hyperlink"><a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-product-landing-page-project/build-a-product-landing-page">Build a Product Landind Page</a></li>
      </ul>
      <h4>JavaScript Projects</h4>
      <ul>
        <li><a class="project-tile hyperlink" href="https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/build-a-palindrome-checker-project/build-a-palindrome-checker">Palindrome Checker</a></li>
      </ul>
    </div>
    <div id="contact">
      <h3>Because there is a slight chance of getting a text</h3>
      <ul>
        <li>E-mail</li>
        <li>WhatsApp number</li>
        <li>Instagram</li>
        <li>GitHub</li>
      </ul>
    </div>
  </body>
</html>


:root {
  --text-color: #0707c9;
  --title-color:#3e0707;
  --link-color: #038690;
  --div-color: #5c88ba;
  --background-color: #98aabc;
}


html {
  box-sizing: border-box;
  scroll-behavior: smooth;
  font-size: 60.5%;
}

@media (max-width: 75em) {
  html {
    font-size: 55%;
  }
}

@media (max-width: 61.25em) {
  html {
    font-size: 50%;
  }
}

@media (max-width: 28.75em) {
  html {
    font-size: 40%;
  }
}

body {
  font-family: 'Tahoma', sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.4;
  background: var(--background-color);
}

h1 {
  color: var(--title-color);
  font-size: 5rem;
  text-align: center;
}

h3 {
  color: var(--title-color);
  font-size: 2.6rem;
  text-align: center;
}

h1, h3 {
  margin: auto;
}

#navbar {
  position: fixed;
  z-index: 1000;
  width: 100%;
  background-color: black;
  top: 0;
  left: 0;
}

#welcome-section {
  padding-top: 70px;
}

ul {
  list-style: none;
  padding: 1.5rem;
}

li {
  padding: 0.5rem;
}

a {
  text-decoration: none;
  color: var(--link-color);
}

p {
  padding: 1.0rem;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:140.0) Gecko/20100101 Firefox/140.0

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

2

Hi there and welcome to the forum!

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

Click on the “Reset” step button and force a refresh of your page with CTRL + F5 if you’re on Windows then try to paste the code in again. On other systems, please follow the instructions here.

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.

or - Turn off high contrast themes on Windows (from accessibility settings menu)

I hope one of these will work for you.

1 Like
3

I simply tryed on a different browser (Chrome) and it worked!

The issue was probably something with my work office Mozilla being unable to be uptaded for technical reasons.

Thanks a lot!

1 Like