Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Can someone tell me what it means to get navbar on top of the viewport ?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="sylesheet" href="./styles.css"></link>
    <meta charset="UTF-8"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
    <title>Portfolio</title>
  </head>
  <body>
    <section id="welcome-section">
      <h1>Hey I Am Mimic</h1>
      <p style="color: red">A Web Developer</p>
    </section>
    <section id="projects">
      <h2>These Are Some Of My Projects</h2>
        <a id="profile-link" href="https://www.freecodecamp" target="_blank">Profile Link</a>
        <header id="header"></header>
        <nav id="navbar">
    <ul>
        <li><a href="#default.asp">Home</a></li>
        <li><a href="news.asp">News</a></li>
        <li><a href="contact.asp">Contact</a></li>
        <li><a href="about.asp">About</a></li>
        </ul>
        </nav>
    </section>
    </body>
    </html>

/* file: styles.css */
header {
position: fixed;
}

@media only screen and (max-width: 600px){
  body{
    background-color: lightblue;
  }
}

Your browser information:

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

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

2

Yes, I will explain it only means that somewhere in the code it has to be moved so when I did this project I moved to the top of the body section, in other words cut, copy and paste the code to a nother location because html and/ or JS is a·syn·chro·nous.

2 Likes
3

Im sorry but can u plz explain again ? i didnt quite understand what im suppose to do

4

Doesnt it have something to do with setting the position in style.css?

5

Yes, it does. However, I think what @robheyays is trying to say is that your nav and its code should be the first thing in the body. But you are correct, having the nabber fixed to the top of the viewport is done with CSS.

1 Like
6

Normally when you hear about moving something to the top of the viewport it simply means to position an element at the very top of a webpage → the first thing a users sees on your website.

The viewport refers to the user’s visible area of a web page.

The top of the viewport should always be the first element inside your <body></body> tag.

7

So what change should i make in the code to make it pass ?
Thats what I’m not able to understand
Am I suppose to fix the position to top or something ?

8

When you want to “move” an element with only css you can make it’s position absolute, fixed or sticky (in some cases relative can also work):
Mod edit: removed

9

Got It !!
Thank You Everyone.

10

One more thing its telling me to add project-title to one element and i added it to title element on top.
But its not passing
Can someone tell me the reason ?
The title element is not even showing in the preview

11

@chriskmamo

This is a project to get a certification. All code should only be done by those who are attempting the project. No code should be given to them to help them pass any of the requirements

1 Like
12

Your portfolio should contain at least one element with a class of project-title → this means you should add a class name of project-title to one element no matter what element.

13

title or tile ?
both are not working

14

The class should be: project-title sorry

16

for fixed navbar on top of the viewport

17

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