Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT card solution with HTML and CSS

@riccardosmile

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Alamin 1,960

@CodePapa360

Posted

Hi @riccardosmile👋 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.

  • One area of improvement in this code is the use of CSS vendor prefixes. For example, the code uses vendor prefixes such as webkit and moz for certain CSS properties. This can add extra lines of code and make the CSS more difficult to maintain. Instead, consider using a tool such as Autoprefixer to automatically add vendor prefixes to CSS properties as needed.
-webkit-transition: background-color 0.4s ease-in-out;
-moz-transition: background-color 0.4s ease-in-out;
transition: background-color 0.4s ease-in-out;
  • Another area of improvement is the organization and naming of CSS classes. For example, some classes have very general and ambiguous names like info and text it could be more specific to what they represent like price-info or description-text which can make the code more readable and easier to understand.
.info{
    display: flex;
    justify-content: space-between;
    margin-top: 1.2rem;
}

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

Hope I'm Helpful! 👍

Keep up the good work! 😊❤️

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord