Review for the tribute page needed

Code Feedback
1

Hello Campers, I hope you are all doing fine. I kindly need a review to my tribute page project. Please review https://codepen.io/byronesonga/pen/KKZKLZm

1 Like
2

I think as a beginner you did well. And I would like to suggest the following:

  1. Since this is a very basic project, I wish you have worked on your typography skills more and added different font styles.
  2. The image you have used is not that good looking in larger resolutions. I wish you have used bigger picture and changed image resolution in connection with screen resolution using media queries.
    Tehcnically you have done a good job. And try to work on your artistic side also as you progrees. Good luck!!
3

Welcome to the forums @Songa. Your page looks good. Some things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
    The test script, with all tests passing, should be included when you submit your projects.
    Your page passes 5/10 user stories. 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 specific questions on what you don’t understand.
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (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.
  • Run your HTML code through the W3C validator.
    There are HTML syntax/coding errors you should be aware of and address.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upxper right of each section and then click on the respective ‘Analyze’ link.
    The one for CSS is good. Use it and address the issue(s). (Be wary of duplicating selectors, it can make maintenance a nightmare)
    (The one for HTML misses things which is why I recommend W3C)
  • Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
    “green belt movement” is not accessible

On a side note, do not try and duplicate the sample projects. The instructions say to make yours “functionally similar” and “give it your own personal style”.

In the future when asking for feedback on your projects you’ll get more eyes on them if you open your topic in the #project-feedback subforum.
I’ve taken the liberty of moving this for you.

4

Thank you so much for the Review, I am going to work on issues you have highlighted .

5

Hi Songa,
Here’s a higher resolution version of that photo of the Obamas and Wangari Maathai :

https://media.npr.org/assets/img/2013/06/26/obama-kenya_custom-60bc61748528321bd286c152f2ea5e619aaacdbf-s1100-c50.jpg

However, this photo might be subject to copyright, and in general it’s best to source photos from those with Creative Commons licences ( These licences allow for a variety of types of Free Use of Creative Commons Images). Here are a collection of a number of links to Creative Commons searches For Wangari Maathai.

Creative commons images

Wangari Maathai Images at WIKIMEDIA COMMONS:

Wangari Maathai Images at GOOGLE CREATIVE COMMONS SEARCH

Wangari Maathai Images at CREATIVE COMMONS

Wangari Maathai Images at FLICKR CREATIVE COMMONS

A VIDEO ON CREATIVE COMMONS USAGE

6

Thank you so much, I have worked on it.

7

Hello fellow Campers, hope you are doing fine. I kindly need a review for my tribute page project. Here is the link https://codepen.io/byronesonga/pen/MWrKObJ
Kind regards.

8

Your page looks good @Songa. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (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.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upxper right of each section and then click on the respective ‘Analyze’ link.
    The one for CSS is good. Use it and address the issue(s). (Be wary of duplicating selectors, it can make maintenance a nightmare)
  • Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
    “wangari maathai” is not accessible

I will say do not copy things from the sample project. For example the following font-family property in the body selector in your CSS contains fonts that you would have to link to or import because they are Google fonts
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;

This last one is a suggestion. You don’t have to do it if you don’t want to.
Your id="tribute-info" has dates that are bold. Why not take away the bullet points since it’s easy to see where each line starts.

9

Thank you so much for your feedback.

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.