Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:
I’d made sure my #navbar is on the viewport as requested but it’s still not passing. Please do help me out, I can’t really tell where it’s coming from.

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <header id="header">
    <nav id="navbar">
        <ul id="nav-link">
          <li><a href="#welcome-section">Home</a></li>
          <li><a href="#projects">Work</a></li>
          <li><a href="contact">Contact</a></li>
        </ul>
    </nav>
  </header>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initia-scale=1.0">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  <link rel="stylesheet" href="styles.css" type="text/css">
  <title>Personal Portfolio Webpage</title>
</head>
<body>
  <section id="welcome-section">
    <h1>Hi👋🏼, I am Onazi</h1>
    <p>a web developer</p>
  </section>
  <!-- This is the projects section -->
  <section id="projects">
    <div class="project-tile"><a href="https://codepen.io/Joeblaze016/pen/wvmaGpR">Tribute page</a></div>
    <div class="project-tile"></div>
    <div class="project-tile"></div>
    <div class="project-tile"></div>
  </section>
  <section id="contact">
    <div>
      <a id="profile-link" href="https://github.com/joshuaonazi" target="_blank"><i class="fab fa-github"></i></a>
      <a id="profile-link" href="www.linkedin.com/in/joshua-onazi"><i class="fab fa-linkedin-in"></i></a>
    </div>
  </section>
</body>
</html>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

You wrote this whole section inside your <head> element but this is supposed to go in <body>.

3

I have actually placed it the body and it didn’t work, also the instructions says it should be above the viewport, which I just did and it is not still passing

4

The instructions say that “The section is only for metadata, which are hidden from the navbar should always be at browser screen when someone opens the top of the viewport webpage.” This means the actual navigation bar should appear at the top of the actual viewport (the visible area of the website), not that the code for the navbar should be on top of the code for the viewport.

5

Ok which means i should rather place the code in the body element that’s above the first section?

6

The section is only for metadata, which are hidden from the browser screen when someone opens the webpage. The section is for everything that you want to be visible to the user on the webpage. Based on these two facts, I think you can figure out which section it should be in.

7

Oboy… I have done what’s suppose to be done.

here is updated code.

<body>
    <header id="header">
      <nav id="navbar">
          <ul id="nav-link">
            <li><a href="#welcome-section">Home</a></li>
            <li><a href="#projects">Work</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
      </nav>
    </header>
    <section id="welcome-section">
      <h1>Hi👋🏼, I am Onazi</h1>
      <p>a web developer</p>
    </section>
    <!-- This is the projects section -->
    <section id="projects">
      <div class="project-tile"><a href="https://codepen.io/Joeblaze016/pen/wvmaGpR">Tribute page</a></div>
      <div class="project-tile"></div>
      <div class="project-tile"></div>
      <div class="project-tile"></div>
    </section>```
1 Like
8

Alright, great, next question to ask yourself: when you look at the preview of your webpage, does the navbar stay at the top of your viewport the entire time, if you scroll down? Compare the behavior of your navbar with the behavior of the navbar in the example (the read menu at the top that says “About,” “Work” and “Contact”) : https://personal-portfolio.freecodecamp.rocks/

You might not be able to scroll down yet, if you don’t have much content on your page. If so, try adding some fake text to make the page long, just to see how it behaves. You can generate fake text over here: https://www.lipsum.com/

9

OK i get the whole story now. let me get into my css and run that

10

Great. It’d worked… had to make the position attribute to fixed.
Thank you @danielrose :raised_hands:t3: for making me see this from another perspective.

1 Like
11

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