nft-preview

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  👋 Greetings, Qstar12!

  🎉 Congratulations on finishing your first challenge! I hope that you enjoyed doing the project. I have some feedback on this solution:

  • Accessibility
    • Alternative text for the image element should not contain any words that related to image such as avatar, picture, graphic, illustration, etc.
    • Alternative text for the image element should be informative. Some resources to learn about the alternative text.
      • Axess Lab | Alt-texts: The Ultimate Guide
      • Images Concepts • WAI Web Accessibility Tutorials
    • The author's photo should have an alternative text. Use the author's name as the alternative text. (alt="Jules Wyvern")
    • The equilibrium image should be wrapped with an interactive element (a). As you can see every time the user hovers the image, it will show the eye icon, which means that it might tell the user that you can view the image by clicking the image.
    • Every page should contain one h1. In this case, you can wrap <a href="#">Equilibrium #3429</a> with h1.
    • Always wrap text content with a meaningful element (p).
    • Only use span and div for styling purposes (not as the main element that wraps the text).
    • I would recommend using CSS border property to create the line instead of using hr element. hr element has a role as a separator, which in this case the content below it should not be separated.
  • Styling
    • For the hover effect of the equilibrium image, you can use CSS background properties and pseudo-element. If you want to know how to do it, you can take a look at my solution and read the README where I explain it.
  • BEM
    • It looks like you are using the BEM class naming convention. You should always append the block element with the child element. So, instead of .__image you should write .card__image.

  BEM (Block Element Modifier) in general
  .human { /* .block */ }
  .human__hands { /* .block__element */ }
  .human__hands--right { /* .block__element--modifier */ }
  

  • Best Practice (Recommended)
    • Always use classes to reference all the elements that you want to style. Using id is going to make your stylesheet have high specificity (hard to maintain).

  That's it! Hopefully, this is helpful!

  2

  ---

  

  Qstar12•70

  @Qstar12Posted almost 3 years ago

  @vanzasetia thanks for your feedback and thoughtful review. The main reason I love this platform is the mentorship. I look forward to resunmitting this challenge. Taking your advice into account.

  I entered into the challenge with basic knowledge in stylesheets but my name conventions need improvement. I came across the issue of specificity. Being self-taught one of the best ways I learn is to let the mistakes happen on smaller project in hopes that I can grow and learn as I progress to larger projects.

  Thanks!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  @Qstar12 You're welcome! 👍

  0
• 

  Volodymyr Balashov•510

  @volod-onePosted almost 3 years ago

  Hey!

  As for the layout it looks not bad. But I have a strange feeling about your ETH and days elements. It seems not being centered comparable to icons.

  Also, could you please explain to me why you decided to use double low dash for class names?

  And it could be a good idea to think about responsiveness at small devices like Galaxy Fold (280px).

  Btw, in your feedback request. I don't think you want to use let for functions, better to use const. Just keep it in mind.

  Good luck!

  0

  ---

  

  Qstar12•70

  @Qstar12Posted almost 3 years ago

  @DevilDoctor27 you are correct. I initially attempted to center text and I additionally attempted to align items. Im looking for guidance so I decided to let the community flesh it out. Thanks for your mentorship.

  I will resubmit this attempt as I have noted your feedback. As far as my naming convention @Vanza Setia is correct. I used the BEM naming convention. However, I all together could have chosen not to use this naming convention. It would have made maintaining the style sheet much easy. I learned a lot about specificity and I look forward to growing.

  Thanks!

  0