Build a Tribute Page - Bill Gate

Code Feedback
1

Hi All,
Could you criticize this page for me?

https://codepen.io/mundipat/pen/QWLKXWg

Regards,
mundipat

2

Maybe we can reverse the question - how would you criticize it?

Bear in mind that the lessons that have brought you to this point have been about styling a webpage.

3

Hi @mundipat, your page looks good. Some things you may want to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>). Your page passes 8/10 user stories.
  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • this // is not a valid way to comment in CSS so it throws an error
    • in HTML you have a typo (missing equal sign)
  • Review the lesson about giving meaningful text to links
  • make your page responsive

These are nits, you can change them if you’d like but your design is your design.

  • The red text against the blue background doesn’t contrast well. Review good color choices.
  • Because you chose to use the different color to start your list items you can do away with the bullets.
4

Dear @Roma,
I am really grateful for the time you took to go through my beginner code and gave relevant advice.
This is the new site. https://codepen.io/mundipat/pen/QWLKXWg
Please, check again and advise.
How do I verify the number of my pages that pass the user stories?
Regards,
@mundipat

6

Truly. I went back to visit the lessons and I am getting it little by little.
Thx

7

Hi @mundipat, to check that you meet all the user stories keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>). It goes in the HTML section.

  • Your page passes 8/10 user stories.
    When a test(s) fail you’ll see the button is red. Click on it and it will show you which user story is failing and give some instructions on how to fix it.
8

I’d recommend centering your image. Since your image is inside of the figure element, which takes up the full width of the body, you can target the img by adding margin: 0 auto; to its ruleset.

This rule will give the img a top and bottom margin of 0 and automatically adjust the horizontal margins to center the image.