nft-preview-card-component

Community feedback

• 

  Suzunatsu•130

  @st0272Posted 11 days ago

  Your HTML and CSS are well-structured and follow good practices. However, I have a few suggestions to improve efficiency.

  1. Use <img> Instead of CSS background-image
     The .hero image is an important piece of content, so it's better to use an <img> tag rather than the CSS background-image property.

  2. Use <p> Instead of <h2>
     The .content__caption element represents a description of the item. A <p> tag is more appropriate than an <h2> tag in this case.

  3. Enhance Accessibility for Clickable Elements
     This card element has a hover effect, so it should contain an <a> tag within a <main> tag for better accessibility.

  4. Unnecessary Part
     The sentence "Challenge by..." is unnecessary. Remove it or place it outside the card element.

  I hope my advice will be helpful for your coding. Keep up the good work!

  Marked as helpful

  0

  ---

  

  P

  toshirokubota•690

  @toshirokubotaPosted 11 days ago

  @st0272 Thank you for your comment. They all make sense and are helpful!!!

  0
• 

  Fernando Batista•530

  @FernJBatistaPosted 12 days ago

  🚀 Great job on this NFT preview card component! Your layout looks fantastic, and you've done an excellent job with styling. Here are a few areas where you nailed it and a couple of suggestions for improvement:

  ✅ What you did well: Solid layout & spacing – Everything is well-aligned and spaced properly, making the card visually appealing. Hover effects – Love the subtle hover effect on the NFT image and the text; it adds a nice interactive touch. BEM Naming – Most of your class names follow the BEM methodology, keeping your code modular and readable. 🔍 Suggestions for improvement: 1️⃣ BEM Consistency – Some class names, like .content__detail--cyan, are being used for an element rather than modifying the whole block. It would be better to use .content__detail-item--cyan to follow proper BEM conventions.

  2️⃣ Semantic HTML – Instead of using a <div> for .hero, consider using a <figure> element since it represents an image with potential captions.

  3️⃣ Global Class Names – The .body and .main classes are a bit generic. Renaming .main to something like .nft-card would make the structure clearer and avoid potential conflicts in larger projects.

  I would say your solution is great! You're doing great with the BEM class structure and semantic elements, these are just some suggestions to make it more maintainable and scalable. Nice one!

  Marked as helpful

  0

  ---

  

  P

  toshirokubota•690

  @toshirokubotaPosted 11 days ago

  @FernJBatista Thank you for your comments and encouragement! They are very helpful and I will incorporate your suggestions on my future projects. Thanks again!

  0