Build a Personal Portfolio - Build a Personal Portfolio

HTML-CSS
1

Tell us what’s happening:

im having trouble on the last step i did everything i could and it wont go trought what im i doing wrong?

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Personal Portfolio</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
  
  <!-- Navbar -->
  <nav id="navbar">
    <a href="#welcome-section">Welcome</a>
    <a href="#project-section">Projects</a>
    <a href="#profile-link">Profile</a>
  </nav>

  <!-- Welcome Section -->
  <section id="welcome-section">
    <h1>Welcome to My Portfolio</h1>
    <p>I am learning web development 🚀</p>
  </section>

  <!-- Projects Section -->
  <section id="project-section">
    <h2>My Projects</h2>
    <div class="project-tile">
      <p>Project 1: Simple Website</p>
      <a href="https://example.com" target="_blank">View Project</a>
    </div>
  </section>

  <!-- Profile Link -->
  <div class="profile">
    <a id="profile-link" href="https://github.com/yourusername" target="_blank">My GitHub Profile</a>
  </div>
  </body>
</html>

/* file: styles.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

/* Navbar */
#navbar {
  width: 100vw;  display: grid;
  grid-template-columns: repeat(3, 1fr);  
grid-column: 1/-1;  position: fixed; 
text-align: center;
  background: gray;
  height: 65px;
top: 0;
left: 0;  z-index: 2;
}

#navbar a {
  color: #fff;
  text-decoration: none;
  margin: 0 15px;
}

#navbar a:hover {
  color: #f0db4f;
}

/* Welcome Section */
#welcome-section {
  height: 100vh; /* Full viewport height */
  background: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#welcome-section h1 {
  font-size: 3rem;
  color: #333;
}

/* Projects Section */
#project-section {
  padding: 50px;
  background: #fafafa;
  text-align: center;
}

#project-section h2 {
  margin-bottom: 20px;
}

.project-tile {
  margin: 20px auto;
  padding: 20px;
  max-width: 300px;
  background: #eee;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.project-tile a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

/* Profile link */
.profile {
  text-align: center;
  padding: 20px;
}

#profile-link {
  display: inline-block;
  padding: 10px 15px;
  background: #333;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}

#profile-link:hover {
  background: #f0db4f;
  color: #000;
}

/* Media query */
@media (max-width: 600px) {
  #welcome-section h1 {
    font-size: 2rem;
  }
  #navbar {
    flex-direction: column;
  }

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:128.0) Gecko/20100101 Firefox/128.0

Challenge Information:

Build a Personal Portfolio - Build a Personal Portfolio
https://www.freecodecamp.org/learn/full-stack-developer/lab-personal-portfolio/build-a-personal-portfolio

2

your code as you posted it here works for me.
Can you try to erase everything and copy it back in from the one above and retry?

3

it still doesnt go trough

4

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.

5

i have firefox browswer could it be that then because i been using this brower for my codiing never had a error like this til now

6

I don’t know, try the things in the list one by one

7

i did everything i could it still does go trough i will try on google chrome once i get the link to log in to my personal account

8

Yeah I did everything I could it won’t go trough idk what to do to finish css now

9

go to next step, and try again in the future