Build a Tribute Page - Bill Gate

Hi All,
Could you criticize this page for me?


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.

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

  • Keep the test script when forking the pen (<script src=""></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.

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.
Please, check again and advise.
How do I verify the number of my pages that pass the user stories?

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

Hi @mundipat, to check that you meet all the user stories keep the test script when forking the pen (<script src=""></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.

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.