NFT Preview Card

Community feedback

• 

  Shahin Aliyarli•680

  @sliyarliPosted about 1 year ago

  You've done a great job creating the card and styling it. Here are some specific suggestions to help you further enhance your project:

  HTML:

  1 - Heading Structure: Consider using heading elements (<h1>, <h2>, etc.) in a semantic order. For example, using an <h1> element for the project's title would provide a clear hierarchical structure.

  2 - Alt Text: For accessibility, provide meaningful alt attributes for the images, especially the icons. This helps users who rely on screen readers to understand the purpose of these images.

  3 - Consistent Class Naming: Aim for consistent and descriptive class names. This makes your HTML easier to understand and maintain, and it also helps others who might read your code.

  CSS:

  1 - Structure and Organization: Your CSS is nicely organized with clear class names. However, consider grouping related styles together. For example, you can group styles for .nft-card-img-hover and .nft-card-img-view to make it more coherent.

  2 - Transition Property: Instead of adding multiple transition properties to different elements, you can group them using a comma-separated list within a single transition property. This can help simplify your code.

  3 - Background Images: While using background-image for the .nft-card-img-hover, it's advisable to have a fallback background color as well, in case the image doesn't load or takes time to load.

  4 - Specificity: In your CSS, try to avoid overly specific selectors like .nft-card-img-hover:hover .nft-card-img-view. Simplify it to .nft-card-img-hover:hover .nft-card-img-view for better maintainability.

  5 - Units and Consistency: Consider using consistent units for measurements. For instance, you've used both px and em units. It's a good practice to stick with one unit throughout your project.

  6 - Heading Cursor: While using a cursor pointer for the heading <h2>, it might be better to use it only for interactive elements. In this case, the cursor pointer might not be necessary for the heading.

  Overall:

  You've done a great job implementing the design and interactivity of the card. To further enhance your project, focus on optimizing accessibility by providing descriptive alt attributes and maintaining consistent class naming. Additionally, organizing your CSS properties more cohesively and using a unified transition property can make your code cleaner and easier to manage.

  Keep up the excellent work, and remember that each project is a learning opportunity. Feel free to reach out if you have any questions or need further assistance. Keep coding and learning! 🚀👩‍💻

  Marked as helpful

  1