Skip to content
Submitted almost 3 years ago

NFT preview card component using html & css

kasemkl•40
@kasemkl
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Feedback on this will be great and any feedback on how i can improve this solution will really be helpful. any feedback is appreciated thank you all guys

Community feedback

  • Mushfiq Rahman•300
    @Ayon95Posted almost 3 years ago

    Hi, good job completing this challenge. You can make some improvements to your HTML markup and CSS:

    HTML

    • Try to use semantic HTML elements whenever you can.
    • Use the <main> element for the main content of the page.
    • An <article> element is appropriate for a piece of content that makes sense on its own, for example, a card like this.
    • You can use an <ul> and <li> elements for the card stats section (0.041 ETH, 3 days left).
    • A <footer> element is a good choice for the author information section; it'll be like the footer of the article.
    • The attribution section should go inside a <footer> element; this will be the footer of the entire page

    CSS

    • Instead of px, use responsive units like rem and em. These units make it easier to implement responsive web design and they are good for accessibility as well.
    • It's good to use CSS variables (custom properties) for values that you use in multiple places in your stylesheet. This will make your CSS code easier to maintain.

    Some resources

    Hope this helps and good luck on your coding journey :)

    Marked as helpful
    2
    Vanza Setia•27,775
    @vanzasetiaPosted almost 3 years ago

    @Ayon95 I don't recommend having a footer for the card content since it is not a full webpage. It is one chunk of content that all belong together and in a real website would sit with other content.

    If the footer element lives inside the article element, it has no corresponding role, it's just like a div.

    Marked as helpful
    2
    Mushfiq Rahman•300
    @Ayon95Posted almost 3 years ago

    @vanzasetia Hi, at first I also thought that the <footer> element was only meant for the entire page but then I checked MDN's page on it, and they said that it "represents a footer for its nearest sectioning content or sectioning root element". They even have an example where they specified a footer for an article.

    After doing a bit more digging, I learned that if the page contains more than one 'contentinfo' landmark role or the <footer> element, then an appropriate label should be provided with aria-label for each footer. Even after then, the footer inside the article won't be considered 'contentinfo' as you've mentioned, so I guess it's not that important and you could simply use a <div> instead. Since having a <footer> in an article doesn't add any clutter for screen readers (I tested it with NVDA), I guess it simply comes down to your preference.

    Thanks for making me think about this. I learned something new as a result of it. Hope you also find these articles insightful.

    These are the examples from MDN:

    Article with footer:

    <article>
    <h1>How to be a wizard</h1>
    <ol>
        <li>Grow a long, majestic beard.</li>
        <li>Wear a tall, pointed hat.</li>
        <li>Have I mentioned the beard?</li>
    </ol>
    <footer>
        <p>© 2018 Gandalf</p>
    </footer>
</article>

    Page with multiple <footer> elements:

    <body>

  ...

  <article>
    <h2>Everyday Pad Thai</h2>
    <footer aria-label="Everyday Pad Thai metadata">
      <p>Posted on <time datetime="2021-09-23 12:17">September 
       23</time> by <a href="#">Lisa</a>.
      </p>
    </footer>
  </article>

  ...

  <footer aria-label="Footer">
  </footer>
</body>
    Marked as helpful
    0
    kasemkl•40
    @kasemklPosted almost 3 years ago

    Hi @Ayon95 ,thank for your comment I appreciate your note

    1
    Mushfiq Rahman•300
    @Ayon95Posted almost 3 years ago

    @kasemkl No problem. Glad to be of help :)

    1
  • Naveen Gumaste•10,480
    @NaveenGumastePosted almost 3 years ago

    Hay ! kasemkl Good Job on challenge

    These below mentioned tricks will help you remove any Accessibility Issues

    -> Add Main tag after body <main class="container"></main>

    -> Learn more on accessibility issues

    If this comment helps you then pls mark it as helpful!

    Have a good day and keep coding 👍!

    Marked as helpful
    0
    kasemkl•40
    @kasemklPosted almost 3 years ago

    @Crazimonk thank you , I appreciate your comment

    1

Please log in to post a comment

Log in with GitHub

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