NFT-PREVIEW-CARD-COMPONENT

Community feedback

• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Hi Javier!

  You can improve a little more the design taking into account that not only the image has that effect of color change but also the title Equilibrium and the user's name.

  On the other hand to the images always add the alt attribute, in this attribute you have two options or put text or not if you put text put something that refers to the importance of this image, for example alt="Icon". In case the image is only decorative you can use the alt="" and also add the attribute aria-hidden="true". If you are interested to know why, please answer me the message but it is a matter of accessibility on the web.

  I think that's what I would recommend to you by the way that it eliminates the errors in the report that frontendmentor generates so you generate a new report to see if there are still errors.

  Good luck!

  Marked as helpful

  1
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello, Javier! 👋

  Congratulations on finishing this challenge! 🎉

  You've gotten some feedback about img element and I'm just going to give feedback on the CSS.

  • Remove min-width: 100vw; from the main element. It doesn't needed because by default main element is a block element which means it will have full width.
  • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs. Also, I have a great article that will explain rem and em units in a simple way. I recommend reading it if you're not familiar with those units.
  • The card (.container) only needs max-width in order for it to be responsive. So, I recommend removing the width and min-width properties.
  • If the values are the same for all sides like border-radius: 1em 1em 1em 1em;, then you can use the shorthand way, border-radius: 1em. It's much shorter.

  That's it! Happy coding! 😁

  Marked as helpful

  0
• 

  Abdul•8,540

  @SamadeenPosted over 2 years ago

  Hey!! Cheers 🥂 on completing this challenge.. .

  Here are my suggestions..

  • You can add alt attributes to your img tag to aid screen-readers.

  This should fix most of your accessibility issues

  . Regardless you did amazing... hope you find this useful... Happy coding!!!

  Marked as helpful

  0