Portfolio Page User story 7. The navbar should contain at least one link that I can click on to navigate to different sections of the page

Hello my fellow FCC warriors. I have completed every user story but I’m still for some reason unable to complete user story 7 which im suppose to navigate to different sections of the page by clicking on my navigation buttons. I have put the id’s correctly and everything but I can’t tell if this is a bug or there’s actually an error. Also I would like to say my portfolio page looks messed up if you look at it from an “editor’s view” for some reason. if you look at it from full page view it looks fine. Any help would be appreciated.

Link to my codepen:https://codepen.io/Gerwyn/pen/axXpvp
Full page view: https://codepen.io/Gerwyn/full/axXpvp

Edit:Sometimes i get 502 error too when i click on the navigation buttons:

You should notice with your current pen that when you click on the nav links the page does not shift to the desired section. That is what the test is looking for.

Why is this happening? Because your href attributes should have values referencing the section id.

Also, an element should only have a single id attribute. I notice the following has two:

<section id="welcome-section" id="home">

Also, keep in mind you want to link to the “top” of a section. Currently you are linking to a child element (the section) which is nested in a div above it. I would recommend having your section be the parent and not wrapping the section in the div element like you are doing now. Of course, you would need to adjust your CSS to reference different elements than you are now.

Sir, I have corrected 2 ids to only 1 id in each section. I have also made the sections “parents” of other elements. the href reference id’s are also correct. But it still doesn’t pass for me. could you take a look at it again to see if there are any other errors? :confused:

codepen: https://codepen.io/Gerwyn/pen/axXpvp

It looks like you pass the tests now, but when I click on the links, things don’t work the way I expect. For instance, when I click the Contact link, I am taken to the top of the page (Home). If I click on the Home link, I am taken to half way down into the Home section. If I click on the Projects link, I am taken half way down into the Projects section.

This is happening because of the location you put the id which you are link to. You will need to do something like I mentioned above to correct this behavior.

the ids and href attributes are correct. the only thing i can think of that are affecting it is probably the positioning. i use position:absolute; for everything here…

I did the technical documentation page which requires the same thing like you said clicking on the links to be directed to certain sections and it worked for me. but that’s because nothing was removed from the natural document flow?

I suspect the problem lies with position:absolute;? But then again I can’t think of a way to position sections like that because the “First section” required me to use absolute positioning to put the words literally perfectly in the middle both vertically and horizontally.

any tips and tricks sir? mhm…

Alright I’m done diagnosing my code… it looks like I’m just gonna be wasting time anyways. I’m moving on to javascript.

you never used “Analyze HTML” and “Analyze CSS” tools, right? you have many many warnings there, sometimes things don’t work because you do not have valid html - try fixing those and see if the page get better

actually i solved this months ago. the error was the unspecified id of nav elements or something.

there are still many errors if you analyse html

where is it? i cant find it

test suite is green it pass

there is a drop down menu for each box under an arrow pointing down, where there is a tool that tidy up the code and a tool that analyse the code

a lot of warnings from the html inspector, others from the css inspector

The analyse tool is dope but i realize messing up this little project and i couldn’t be bothered to touch it lol. its just not worth the effort. if i’d go back to it, i’d start from scratch. also im not 100% about maintaining responsiveness. if u zoom in and out on it ( full page ). its a disaster.

adding on, the errors probably aren’t the reasons why my page is not responsive. so better start over in the future.