Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Tell us what’s happening:
Describe your issue in detail here.

Your code so far
I am stuck at step 11… the last step where the navbar must be kept up top all the time which it is!!! Yet it is not being recognized for some reason. Please help.

<!-- 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>Build a Product Landing Page</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <Welcome id="welcome-section">
      <header id="header">
    <nav id="navbar">  
 <ul>
       <li><a class="nav-link" href="#Welcome"rel="internal">Welcome</a></li>
   <li><a class="nav-link" href="#Beginner"rel="internal">Beginner</a></li>    
</ul>
</nav></header>
      <h1>Welcome to a Personal Portfolio Webpage</h1>
      <section id="projects">
        <h1>Welcome</h1>
        <a id="profile-link"
          class="project-tile" target="_blank" href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-transforms-by-building-a-penguin/step-104">Penguin</a>
        </section>
          <p> This is my first programming course in a long time. Responsive web design is fun and challenging at the same time.<a target="_blank" href="https://freecatphotoapp.com">Cat photos</a></p>
          <h1>Beginner</h1>
          <p>I started with a project of making a Cat photo app from then I went on to making a magazine. It was a task that took some time to accomplish.<p>
            <h1>Animation</h1>
            <p> The best part of RWD was to learn about animation and how easy it is to make a simple animation. The realization of how difficult it is to run multiple animation on a single screen became obvious to me afer just making one happy penguin!!</p>
    <div class="project-tile">
           <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"> 
    </div>
</body>
  </html>
/* file: styles.css */

header {
  position: fixed;
  width: 30%;
  top: 0;
  left: 0;
  background-color: white;
  color: black;
  font-family: 'Exo 2', sans-serif;
  padding: 1em;
}

html {
  font-size: 100%;
}

body {
  width: 100%;
  height: 100vh;
  top: 10;
  margin: 150;
  font-family: 'Baskervville', serif;
  color: linen;
  background-color: rgb(80, 0, 40);
}

h1 {
  font-family: 'Anton', sans-serif;
}

a {
  text-decoration: none;
  color: black;
  display:fixed;
}

@media only screen and (max-width: 720px) {
  .image-wrapper {
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 600px) {
  .text-with-images {
    grid-template-columns: 1fr;
  }
}
.project-tile {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 10px;
}

.project-tile img {
  width: 100%;
  max-width: 350px;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
}

.project-tile::after {
  content: "";
  width: 350px;
}

Your browser information:

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

Blockquote

you have some serious problems in your html that need to be fixed.
I suggest you put your code into this online html validator and fix as many errors as you can. (you may have to fix it then put it in again iteratively till all the errors are gone)

After that make sure you place your navbar at the top of your body block of code (Don’t put any other element ahead of it)
And make sure you simplify your css (you can also validate it in the same website above by switching from html to css validation option)

1 Like

In your CSS you styled the header, not the navbar. So remove the header selector in line 1 and replace it with #navbar.

1 Like

Thank you for that link. I have been able to clean up quickly.