Help Needed! - Build a Personal Portfolio Webpage

Hi all, I’m currently working on the last project of Responsive Web Design but I’m stuck at:

User Story #7: The navbar should contain at least one link that I can click on to navigate to different sections of the page.

User Story #11: The navbar should always be at the top of the viewport.

I’ve attached the link to my CodePen. Please let me know what I did wrong.

Thanks in advance!

https://codepen.io/danielanggggg/pen/LYjwOer

Hello there.

Do you have a question?

If so, please edit your post to include it in the Tell us what’s happening section.

Learning to describe problems is an important part of learning how to code.

Also, the more information you give us, the more likely we are to be able to help.


You don’t have much on your page so it’s not going to move much when you click one of the links.

Run your HTML code through the W3C validator.
There are HTML syntax/coding errors you should be aware of and address.
Since copy/paste from codepen you can ignore the first warning and first two errors.

Hi Roma,

How do I edit my post to include it in the Tell us what’s happening section?

Thanks,
Daniel

If you want to edit your initial post click on the ellipsis to expand it and then click the pencil to edit.

Easier though it just like you responded. Reply and ask your question.

Ah I get that part. I’m just not sure what the Tell us what’s happening section is. How do I include my post in the section?

Thanks,
Daniel

Skip the tell us what’s happening…that’s from a canned response. Just tell us what your question is.

Ah okay.

For User Story #7, I’m not sure why it isn’t being checked off. Although there isn’t much content yet, when I click on the Home and Projects link, the page does move according to the ids I gave them.

As for User Story #11, I have the navbar nested in header. When I scroll the page it does seem like the navbar is fixed to the top of the page. But it isn’t checked off as well. I’m not sure what I’m doing wrong.

Thanks,
Daniel

When you say “checked off” I think you mean a test is failing when you run the test script.

I only see one test failing when running the test script and that is in regards to the navbar.
When a test fails click the red button to see which test(s) are failing and text to help you correct the issue.
Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.

The failing test says

The navbar should always be at the top of the viewport.
Navbar's parent should be body and it should be at the top of the viewport : expected 97.75 to be close to 0 +/- 15
AssertionError: Navbar's parent should be body and it should be at the top of the viewport : expected 97.75 to be close to 0 +/- 15

Do you understand what the test is looking for and what it’s telling you?

On a side note, I realize in the product landing page project the user stories had the nav element nested in a header element but semantically you probably wouldn’t do that. You’d have two separate elements.
You can take the image you have and nest it in your nav element without using a header element at all.

Hope that makes sense and was a big enough hint.

Thanks Roma. That was helpful.

I believe User Story #11 is good now. But the issue with User Story #7 remains.

Here’s the error message:


Script error. (:0)
Error: Script error. (:0)
at r.onerror (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:599:14032)

Please advise.

Thanks,
Daniel

I’m not clear where you’re seeing this error. The errors from the FCC test script are descriptive, like what I showed in my previous link.

When I go to your page and run the tests I see the following…

EDIT: On a side note, since you forked the pen the FCC test script is linked in the settings of codepen’s JS editor. You do not need to repeat it in codepen’s HTML editor.

Huh, that’s odd.

I copied my codes into a new pen but it shows the same.

What browser are you using?
Is it current?
Have you tried clearing cache and running the test again?

I’m using the latest version of Chrome.

And yes, I also cleared cache and ran the test again but it’s still the same.

Are you running any extensions? adblocker?

I switched off my adblockers. I have quite a few other extensions running though. Do I have to switch them off as well?

I switched them all off but it’s the same.

you’ve cleared cache again and you’re not running in incognito mode, right?

I’m unable to duplicate your issue and I’m out of ideas.
Have you tried running it in FF?

just remove the # from the link and it will word!

Do you mean remove the # from the href code? I tried but it doesn’t work.

I tried running in Firefox but it’s shows the same.