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 preview card using flex-box

Riccardo 100

@RZwartenbol

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

@obocanegra-dev

Posted

Hello Riccardo! 👋

Congratulations on your excellent work in the Frontend Mentor challenge! 🎉 You've done a great job, and I want to highlight some suggestions to further improve your project:

It's a good practice to use semantic elements in HTML. For example, instead of using a card container <div class="card-container">, you could consider using a <main> element and then use <section> elements to group related content within the card. This will help improve the structure and accessibility of your code.

When it comes to headings, if there's only one, it's preferable to use an <h1>, as it represents the main heading of the page. This will help search engines and screen readers better understand the hierarchy of your content.

For icons that are used purely for decoration and have no informational purpose, it's better to leave the alt attribute empty. This way, screen readers can skip the description of those elements and provide a better accessibility experience.

For interactive parts of the design, such as buttons or links, it's recommended to use the appropriate tags (<button> or <a>, respectively). This will help users clearly identify interactive areas and improve the usability of your project.

Finally, I would recommend creating a README file for your project. This file can serve as a guide for other developers and explain the purpose and functionality of each part of the project. This will help effectively share your work and facilitate the understanding of your code by others.

I hope you find these suggestions helpful. Remember, they are only recommendations to enhance your project. Keep up the great work and continue improving your skills!

Wishing you much success in your future projects! 🚀✨

Best regards, Oscar

1

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