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

Responsive nft-card html css flexbox

Enrica 170

@ErriGarcia

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi everyone! Please leave a comment below if you have any suggestions! Thank you so much!

Community feedback

@VCarames

Posted

Hey @ErriGarcia, some suggestions to improve you code:

To give you HTML code structure, you want to set up your code in the following manner (only did parent containers):

<body>
   <main>
      <article class=“card-container”></article>
   </main>
   <footer class="attribution"></footer>
</body>

The Main Element identifies the main content of the document.

While the Article Element will serve as the card’s container, because the card represents a complete, or self-contained, section of content that is, in principle, independently reusable.

More info:

https://web.dev/learn/html/headings-and-sections/

  • The Figure Element is not being used correctly and is not needed for this challenge.

  • The NFT Alt Tag description needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image/icon to someone.

  • Wrap the "NFT image", "Equilibrium #3429" and "Jules Wyvern" in an Anchor Tags <a>. The anchor tag will allow users to click on content and have them directed to another part of your site.

Happy Coding! 👻🎃

Marked as helpful

0

@ylmzcbk

Posted

Hi Erica, Your design looks perfect except horizontal rule you have at the bottom. About your HTML structure:

  • A page always must have a main tag.

And you should definitely consider using dynamic measures like rem instead of px. This way your projects can look perfect on all screens.

Nice work!

Marked as helpful

0
KF 20

@KillingFiction

Posted

Good Job! You Just forget to make the hover on image like in the challenge hope you make it.

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