Personal Portfolio Webpage: Build a Personal Portfolio Webpage

HTML-CSS
1

Your #navbar element should always be at the top of the viewport.
Im quite stuck on this portfolio page. please could someone advise me on what to do.
Been stuck on this one for a day or 2.

Please mind my code and the placement of it :slight_smile: I rushed it a little bit.

 <!DOCTYPE html>
 <html lang="en">
<head>
  <title>Adeoye's Portfolio</title>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta name="author" content="adeoye"/>
  <link rel="stylesheet" href="styles.css">
  </head>
  <header>
  <nav id="navbar">
    <ul>
      <a href="#about-me" id="nav-link-1">About me</a>
<a href="#projects" id="nav-link">Projects</a>
<a href="#contact" id="nav-link-2">Contact</a>
      </ul>
    </nav>
</header>

CSS


#navbar{display: flex;
  font-size: 1.1rem;}
  
#navbar a{color: var(--text-p);
position: absolute;
z-index: 1; 
text-decoration: none;
background-color: rgb(168, 22, 43);
font-size: 25px;}

#nav-link{top: 0.6em;}

#nav-link-1{
  top: 0.6em;
  left: 7em;}

[https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage]

2

Stories 7, 8 and 12 passed with that code for me. You need to do a closing html tag but that didn’t cause the tests to fail for me.

You may have to do a “hard refresh” of a page in your browser if you have an out of date, cached version of that website.

While on the problematic site use the key combination below to trigger a hard refresh depending on your operating system:

  • Windows: CTRL + F5
  • Mac/Apple: Apple + Shift + R or Command + Shift + R
  • Linux: F5

To learn more about this read: Refresh your cache - When hitting F5 just isn't enough!

If a hard refresh doesn’t work, try opening the problematic page in your browser’s private browsing mode.

3

unfortunately the problems still the same after following the instruction above.
I might have to carefully restart my project. It’s very messy anyway to begin with.

4

Hi, @adeoye

The first thing to fix here would be the list. Each list item must be an <li> element.
You can still have your links <a> tags there, but they must be inside <li> tags, like:

<ul>
    <li>
      <a href="#projects">Projects</a>
   </li>
  <!--  . . . add more li tags here . . . -->
</ul>

As for the styles, it could be a bug with this site. It took me a while to get any styles to work. Even very simple things. I had to refresh the site multiple times. :thinking:

5

I’ve just found the solution.

all I had to do was #navbar{ position: fixed; top: 0;} :rofl:

took me hours

1 Like
6

Yeah, what’s funny is I tried that, and a few other things, and the CSS had no effect. I think the sandbox is kind of buggy.

You probably learned a lot more than you realize in those hours, so don’t feel bad :wink: