Giving Feedback on my Tribute Page :)

Code Feedback
1

Hi Friends! Can you give me some feedback about my Tribute Page? It will help a lot. Thanks! :slight_smile:

1 Like
2

@jaromeaviles This is a great start! Your eye for design shows in this project. Here are some issues I’ve noticed that will help you improve the project:

  • You’re setting the color of the text with Bootstrap’s text-warning class. This isn’t wrong, per se, as it works but it’s not as semantic/readable as it could be. In other words, it took me a bit of searching in order to determine how you set your colors. If I was a developer that needed to update/modify your page at some point after you were gone, it would be more difficult for me than if the color was clearly defined in the CSS.

    If you add color: #8a6d3b; to your <body> element and remove all of the the text-warning classes from your HTML, you’ll have the text color you want in a more semantic/readable way.

  • Your <img> element needs to have an alt attribute. This element is technically incorrect without an alt attribute. Alt attributes are also very helpful for people who use screen readers. Here’s a wonderful resource where you can learn more about the importance of alt attributes.

  • You’re using inline styles like <strong> and style="font-size:19px". Some say that this is not the best practice as it’s ideal to separate the function (HTML) and design (CSS). Here’s a good resource for learning more about that.

  • I see you’re using <br> elements within your <li> elements. I’m guessing this is because you want more space between your list items. Another way to do this is to delete the <br> elements and use CSS to style your list items (li) and give them additional padding or margin.

  • See if you can fix the errors that come up here. Copy and paste your HTML into that text field. Those errors should be relatively easy to fix and they’ll help you learn more about HTML markup.

That’s a lot to think about. Let me know if you want me to explain any of this further or if you want more feedback. Keep working hard!

3

Thanks you for this! I already made some tweaks on my codes.

Check the link below. :slight_smile:

1 Like
4

@jaromeaviles The code looks better! It shows a much better use of CSS and the code is more readable, in my opinion.

One thing to keep in mind is that it’s better to change the style of one element than to put the same style in multiple elements. For example, you put color: #8a6d3b; and font-family: niconne; in three places in your CSS:

.tribute-style {
  
  font-family: niconne;
  color: #8a6d3b;
}

.tribute-style-header {
  
  font-family: niconne;
  color: #8a6d3b;
  font-size: 63px;
}

.tribute-style-text {
  
  font-size: 19px;
   font-family: niconne;
  color: #8a6d3b;
  
}

This can be simplified by adding the color and font-family to your <body> element and then removing the font-family and color lines from the above selectors. Then, if you want the black color for your bullet points, you can do this:

li {
  color: black;
}

So, basically by making this change, you reduce the code that deals with color and font-family by half, from 6 lines to 3. It’s not much at this level, but taking advantage of the cascade like this can make a big difference later when dealing with many more lines of code.