Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>      
      <title>Personal Portfolio Webpage</title>
      <link rel="stylesheet" href="./styles.css"/>
    </head>
        <body>
      <nav id="navbar">
        <ul id="nav-list">
          <li>
            <a href="">About</a>
            </li>
            <li>
            <a href="">Work</a>
            </li>
            <li>
            <a href="">Contact</a>
          </li>
        </ul>
      </nav>
    </body>
    </html>

/* file: styles.css */
#navbar {
  backgroud-color:#be3144;
  position:fixed;
  top:0;
  left:0;width:100%;
  display:flex;
  justfay-content:flex-end;
  }

Your browser information:

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

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Please, why my “file: styles.css” does nothing to my “navbar”???

2

:balloon:Hello! Welcome to the forum!
Try removing the following from the href attribute in the link element.

Assuming that the css file hasn’t moved, that should fix the styling issue.
Does this help?
Keep up the good progress!

Happy Coding! :slightly_smiling_face:

3

thank you, i thought about it, i did that, but…nothing, steel don’t work

4

what this means? where to be moved?

5

Hello again, and thank you for your reply.

If I start a another browser, go to the challenge url without signing-in (like a new user), and start coding in the index.html and styles.css files, then my link element will look like that below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
</head>
...

However, if you create the project files (html & css) in an IDE like (vscode, pycharm, etc.) you will be able to choose where the css file is
located relative to the html file. Some developers like to keep their css files in a folder called css, for instance.

If you were to copy your html and css code from your IDE and paste them into the official freecodecamp challenge page, there will be a problem since the freecodecamp server doesn’t know where the location specified in the href attribute is on it’s server.

There is a good explanation for Absolute and Relative urls on the mdn website, where there is a wealth of other information regarding web development.

If, however, you would like to simply carry on with your challenge, you could test your that your link element is coded properly by assigning some styling to the universal selector like this:


* { 
background: red;
}

If that turns the preview background red then you know that the link element has the href attribute set correctly. If so, your navbar selector is not coded correctly.

Try that and see how you get on.

Does this help?
Keep up the good progress!

Happy Coding! :slightly_smiling_face:

6

Spotted a typo justfay-content:flex-end;

If styling code does not work, remove one at a time. If that doesnt’t work, then carefully add them back, checking in the preview.

7

Iap, it works, thanks

1 Like
8

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