NFT preview card component

Community feedback

• 

  Alamin•2,000

  @CodeWithAlaminPosted almost 2 years ago

  Hi Eunice Sepúlveda👋 Great job on completing this challenge! 🥳

  I noticed a few areas where your solution to the challenge could be improved, and wanted to share my suggestions with you.

  • It would also be helpful to add comments to the CSS file to explain the purpose of certain styles and to provide context for other developers who may be working on the project. For example, a comment could be added before the .image-overlay class to explain that it is used to create a hover effect for the image.

  • To reduce the repetition of styles and make the code more efficient, consider using CSS variables (also known as custom properties). This will allow you to define a value once and reuse it throughout the stylesheet, rather than repeating the same value multiple times. For example:

  :root {
      --main-color: hsl(178, 100%, 50%);
  }
  
  .title {
      color: var(--main-color);
  }
  
  .image-overlay {
      background-color: var(--main-color);
  }
  

  • Instead of using the height property to specify the dimensions of certain elements, consider using the max-height property. This will allow the elements to adjust their size automatically if the content inside them changes.

  Overall, this is a very well done solution to the challenge. Great job!

  Hope I'm Helpful! 👍

  Keep up the good work! 😊❤️

  Marked as helpful

  0