NFT Card Preview

Community feedback

• 

  Gbenga Bayode•140

  @bammytech1Posted almost 2 years ago

  @hozayves Nice work mate. i will suggest you use rem for font sizes and em for padding and the likes.

  1
• 

  Alamin•2,000

  @CodeWithAlaminPosted almost 2 years ago

  Hi Yves MUHOZA👋 Great job on completing this challenge! 🥳

  I would like to share a few suggestions on this solution if you don't mind.

  HTML

  • Instead of using a div element with a class of ether-img-container to wrap the image and the div with a class of ether-img-view, it might be more semantically meaningful to use an a element to wrap the image and set the div with a class of ether-img-view as a child element. This would allow the entire image to be clickable and provide a visual indication that the image is a link when the user hovers over it. Learn more

  • Instead of using a p element with a class of ether-creator-name to wrap the creator's name and a link, it might be more semantically meaningful to use a cite element to wrap the creator's name and a a element to wrap the link. This would provide more context to the content and help search engines and screen readers understand the content better. Learn more

  CSS

  • Instead of using the color property to style the text color of different elements, it might be more useful to use the color property in conjunction with custom color variables defined in the "BASE" section. This would make it easier to maintain the color scheme of the site and avoid the need to change the color of multiple elements separately. Learn more

  • Instead of using the display property to toggle the visibility of the ether-img-view element, it might be more useful to use the opacity property in conjunction with a transition to create a smooth fade in and fade out effect. This would provide a more seamless experience for the user and avoid the need to recalculate the layout of the page when the element is shown or hidden. Learn more

  • Instead of using the border-radius property to round the corners of the ether-main element, it might be more useful to use the border-radius property in conjunction with the overflow property to create a "card" effect. This would allow the content inside the ether-main element to overflow the rounded corners and create a more visually appealing design. Learn more

  • Instead of using the max-width property to set the width of the ether-main element, it might be more useful to use the max-width property in conjunction with the width property and a media query to create a responsive layout. This would allow the ether-main element to adjust its width based on the size of the viewport and provide a better user experience on different devices. [Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/

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

  I hope this feedback was helpful. 😊 Keep up the good work!👍

  0