Tribute page feedback CR May 22

Hi there,

I’ve only been learning code for a week now so go easy on me please. Here is my project:

Chris

Good job for your first project. Not a lot of technical issues. Just a few things:

  • The <title> element is meaningless outside of the <head>, so you can get rid of the one you have in <main> as it is doing nothing.
  • You are using an <img-div> to wrap the image. There is no such element. I think you meant to use a <figure>, which is required in order to use a <figcaption>.
  • Also, no such elements as <tribute-info> or <tribute-link>. Just curious, why did you use these tags? See the Periodic table of HTML elements for all the elements you can use. It is actually possible to define your own custom elements but you would generally use JS to define their behavior. I’d just stick to the standard HTML elements for now.
  • That numbered list looks like a list to me and should probably be marked up with an <ol>.

Besides the issues above, I think my main critique would be that you didn’t add a lot of styling to make the page look interesting. The point of these challenges is not just to pass all of the tests but to learn how to create web pages. I’m not saying you need to create a work of art, but I think you should definitely challenge yourself a little more on your CSS skills.

1 Like

Hi. Thank you for the feedback. I will perhaps go back and play around with the styling a little and ensure I challenge myself more in the next project.

Re. the elements point, the instructions for users on the project were:
User Story #6:I should see an element with a corresponding “id=“tribute-info”” , which contains textual content describing the subject of the tribute page.

User Story #7: I should see an “a” element with a corresponding “id=“tribute-link”” , which links to an outside site that contains additional information about the subject of the tribute page.

This means that the id attribute on the element should be set to “tribute-info” but it does not mean the element itself should be named “tribute-info”. You still use the standard HTML elements, you just have to have the id set correctly.

1 Like

Instead of this:

    <tribute-info id="tribute-info">
      Martin Luther King needs to be remembered for what he said as much as what he did. What follows are USA Today's top 10 quote's taken from this extraordinary human being taken from 
  </tribute-info>

You can use p tags

   <p id="tribute-info">
      Martin Luther King needs to be remembered for what he said as much as what he did. What follows are USA Today's top 10 quote's taken from this extraordinary human being taken from 
   </p>

Removing the tribute-link tags here would be good.

    
      <a id="tribute-link" href="https://en.wikipedia.org/wiki/Martin_Luther_King_Jr." target="_blank">Link to Martin Luther King jnr., Wikipedia.org</a>
 

As for project feedback, I think it is a good first attempt especially for only learning for a week.
I also like your use of semantic tags like main and figcaption.

I think your received some really good feedback on how to improve in the future.

When it comes to all of these projects, take chances and experiment with different html and css features. Most of these class projects will be solely for learning purposes.
Build it, experiment, research, ask questions/feedback and then move on.

This is the perfect time to try things, break things and learn more as a developer.

Just keep building and pushing yourself because that is how you are going to level up as a developer.

Hope that helps! :slight_smile: