Personal Portfolio Webpage: User Story #11(problem)

HTML-CSS
#1

Hi, I have been trying to solve this problem a lot of time but I am unable to solve it.
Here is my Webpage:
https://codepen.io/Marathe07/pen/WNGKKNP?editors=1100

And also tell me the change, that I should do to make my site better.
And there is one more thing,
Whenever I try to click the About Page I see some green color too, but I should see the red color.

Please tell me how to solve this.

#2

@alok.v.marathe, 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.)

In this case the failing message is;

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 30 to be close to 0 +/- 15  
AssertionError: Navbar's parent should be body and it should be at the top of the viewport : expected 30 to be close to 0 +/- 15

What is your navbar’s parent?

On a side note, codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.

  • The link to the font goes in the box labeled ‘Stuff for <head>’

Mentioning because you have elements out of order. Links for a font would never be in the body element. Review this for an understanding of the HTML boilerplate tags.
Also to help, run your HTML code through the W3C validator.

  • There are HTML coding errors you should be aware of and address.

And don’t use in-line styling. Make all your styling external.

1 Like
#3

Thank you for your reply.
I made a huge change with the help of the W3C validator.
But I am still getting the error:

https://codepen.io/freeCodeCamp/pen/MJjpwO?editors=1100

And, even my order of the navigation links changed in the header.

#4

The link you just shared is an empty test suite.

Screen Shot 2021-01-12 at 11.09.07 PM
Screen Shot 2021-01-12 at 11.09.07 PM2554×1274 227 KB

The original link for this post leads to a 404 error.

Screen Shot 2021-01-12 at 11.09.29 PM
Screen Shot 2021-01-12 at 11.09.29 PM2442×1144 164 KB

#6

Here is the correct link:

https://codepen.io/Marathe07/pen/OJRBoWG

#7

body must be the parent of the navbar.
You may have to remove these lines


<html lang="en">
<head>
      <title>Portfolio project</title>
    </head>

and

</html>

also add these lines to your css file

*{
  margin:0;
  padding:0;
  box-shadow:border-box;
}

The problem is with the open space it had at the top side and bottom side of the navbar.

2 Likes
#8

Thank you so much!!!
It worked.
But I couldn’t understand this:

#9

These help to remove the white spaces you have at the border of the viewport. It is a good practice. To avoid unwanted horizontal scrollbars.

1 Like
#10

Oh, ok.
Thanks again :grinning_face_with_smiling_eyes:

#11

It looks like @krishnasai3cks beat me to punch for the answer :laughing:
But I am glad you figured out the answer.
Also this is called a basic css reset.

I would still remove the inline styles from your html code though.

          <li><a style="float:right; display: block; padding:20px" class="flex-item" href="#welcome-section">About</a></li>
2 Likes
#12

Okay.
Thank you !

Oh, so you mean removing the style tag from HTML and adding it to the CSS file right?

#13

Yes, you need to remove the style attribute from your html and place it in the css section.

#14

And the last thing I wanted to ask!
Is the webpage looking good?:sweat_smile:
If not, just tell me what should I change.
Don’t give me the solutions.
After I do the corrections, please verify and tell me if I did it right or wrong. Ok?
Just for practice :smiley:

#15

So sorry there’s one more thing which I just noticed.
The navigation tags are totally opposite, to how I had arranged them.

#16

For the nav links, I would personally ditch the floats and use flexbox instead.
You could review the flexbox lessons on how to do that but it is pretty easy with just a few lines of code.

I would also review the lesson on giving links meaningful text because “this link” is not that accessible.

I would also make sure to review @Roma’s comments he gave you earlier.

#17

Hi,
I seem to be having the same issue, Ive followed the steps but still no luck, if anyone can shed some light on the situation it would be greatly appreciated
https://codepen.io/Scott_F5/pen/ZEBMxKJ
Many Thanks

#18

@scottferg07, when tests fail 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.

Since the OP’s issue has been resolved it would be best if you opened your own topic if you continue to have an issue.