Personal Portfolio Webpage - Build a Personal Portfolio Webpage

how to put navbar element at the top of the viewport
i don’t know what they mean by putting the navbar at the top of the viewport. could somebody please clarify that for me?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=500, initial-scale=1.0">

  <meta charset="UTF-8">
<title>Norma's Portfolio</title>
<link rel="stylesheet" href="styles.css"/>
<script src="https://kit.fontawesome.com/b98b02e413.js" crossorigin="anonymous"></script>
</head>
<body>
  <ul>
    
  <div id="navbar">
   <li class="about"><a href="https://www.freecodecamp.org/learn/2022/responsive-web-design"></a></p>
    <a href="about.hsp"><span class="about">About </span></a></li><li class="work"><a href="work-ethic.hsp"><span class="work">Work</span> </a></li><li class="connect"><a href="connect.hsp"><span class="connect">Connect </span></a></li>
  </ul>
 
</div>
  <div id="welcome-section">
<h1 id="title">Hello my name is Norma<span id="heart">💜</span><span class="title-two"> a web developer</span></h1>

<h1 id="projects">These are some of my projects</h1>
<a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page">
<div class="project-tile">
<img src="https://cdn.theatlantic.com/thumbor/1eLgsh6WVKKyOvSZQj8Lghm9iGQ=/1200x800/media/img/photo/2020/04/photos-essential-work-farmers-coron/f01_1216824338/original.jpg" alt="farmer" class="image-one"/><p class="border">Tribute Page</p></a>
  
  <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-69"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="cat-photo-app" class="cat"/><p class="cat-text">Cat photo app</p></a>
</div>
</a>



<div id="projects">
  <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-intermediate-css-by-building-a-picasso-painting/step-89"></a>
</div>
<div id="bottom">
<h1 class="together">Let's work together</h1>
  <p class="coffee">"How do you take your coffee?"</p>

<p id="profile-link">
  <a src="https://www.freecodecamp.org/misslathan" alt="profile-links"><i class="fa-brands fa-free-code-camp"></i><span id="freecodecamp">FreeCodeCamp.org </span></a><a href="https://www.linkedin.com/in/norma-lathan-a10667139/" alt="linkedIn"><span class="linkedIn"><i class="fa-brands fa-linkedin"></i>LinkedIn </span></a><a href="" alt="email"><span class="email"><i class="fa-solid fa-at"></i>Send an email</span></a>
</p>
</div>
</body>
</html>
body{
  text-align:center;
    margin: 250px;
  font-family: sans-serif;
background:linear-gradient(90deg, hotpink, rgba(20, 30, 40, 60))
}
#navbar{
position:absolute;
 right:0;
  top:0;
   margin:0 auto;
   font-family:sans-serif verdana;
   font-weight:bold;
  
    

}
ul{
  list-style-type: none;
  overflow: hidden;

}
li{
  float:left;
  
}

a:link{
  text-decoration:none;
  
}
 

a:hover{

transform: scale(1.5);
  cursor:pointer;
}
.about{
  padding:10px;
  margin-right:20px;
  
}

.work{
  padding:20px;
  margin-top:10px;
}
.connect{
    padding:20px;
  margin-top:10px;
}



#welcome-section{
  margin:0;
  display: block;
}
#image-one {
width:350px;
top:0;
display:flex;



}
#title{
  color:white;
  font-family:sans-serif verdana;
}
.title-two{
  display:flex;
  align-items:center;
  justify-content:center;
 
}
.linkedIn{
  margin:10px;
  color:white;
   font-size:25px;
}
.email{
  margin:10px;
  color:white;
 font-size:25px;
}
#freecodecamp{
  margin:10px;
  color:white;
  font-size:25px;
}
.fa-free-code-camp{
  color:white;
}
#projects{
  margin:250px;
  display: block;
  font-family:sans-serif verdana;
  color:white;
  left:25px;
}
.project-tile{
  margin:0;
  display:flex;
  
}
.image-one{
  max-width:400px;
  float:left;
  
  margin:20px;
    border: 5px solid #ddd;
  border-radius: 4px;
  padding: 5px;

  
}
.border{
color:white;


  

}
h1{
  color:white;
  
  
  
}
.cat{
  border: 5px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  max-width: 400px;
  margin:0;
 
}
.cat-text{
  float:bottom;
 color:white;

  
}
.about{
  color:white;
}
.work{
  color:white;
}
.connect{
  color:white;
}
.coffee{
  color:white;
   font-family: sans-serif;
  font-size:20px;
  
}

the tags are placed in the wrong order here which may cause problems.
Move the opening ul tag below the opening tag of the div to see if that helps a bit.

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

here’s a html validator to use to check your work.
I believe you have enough mistakes that they may cause the tests to fail even though your navbar is placed at the top

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.