Skip to content
Submitted over 2 years ago

nft-preview-card-component-main

Sathya D•310
@satzzzzz07
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

Hey all open to suggestions and feedback!!

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted over 2 years ago

    Hello Sathya D,

    Great work! Congratulation on completing this challenge. I see you have received some incredible feedback. I have some suggestions regarding your solution if you don't mind:

    HTML

    • Page should contain a level-one heading. In this challenge , as it’s not a whole page, you can have<h1>visually hidden with sr-only.
    • Since there's a :hover state on the image and means it's interactive, So there should be an interactive element around it. When you create a component that could be interacted with a user , always remember to include interactive elements like(button, textarea,input, ..) for this imagine what would happen when you click on the image, there are two possible ways:
      1: If clicking the image would show a popup where the user can see the full NFT, here you use <button>. 2:If clicking the image would navigate the user to another page to see the NFT, here you can use <a>. For the same reason , you can use <a> to wrap Equilibrium #3429 and Jules Wyvern.
    • The link wrapping the equilibrium image should either have Sr-only text, an aria-label or alt text that says where that link takes you.
    • For any decorative images, each img tag should have empty alt=""and add aria-hidden="true" attribute to make all web assistive technologies such as screen reader ignore those images in( icon-view, icon-ethereum, icon-clock ).
    • If you wish to draw a horizontal line, you should do so using appropriate CSS. You may remove the <hr>, you can use border-top: to the avatar's part.
    • To use more semantic tags , you may use <figure> and <figcaption> for the avatar's part.
    • For class="outer", you can use an unordered list <ul>, in each <li> there should be <img> and <p> that way you can align them centrally.
    • Adding rel="noopener" or rel="noreferrer" totarget="_blank"links. When you link to a page on another site using target=”_blank” attribute , you can expose your site to performance and security issues.

    There are so many ways to do the hover effect on the image, The one I would use is pseudo elements::before, ::after. You can use pseudo-elements to change the teal background color to hsla. Then the opacity can be changed from 0 to 1 on the pseudo element on the hover. Also using pseudo elements makes your HTML more cleaner as there's need for extra clutter in the HTML .

    You might like to have a look at my solution here, it might help.

    Overall, well done! Hopefully this feedback helps.

    Marked as helpful
    1
  • Adarsh Rai•560
    @AdarshRai0Posted over 2 years ago

    Hi Sathya D, congratulations on your new challenge! 🎯🙌You had done a great job !!! I took a look at your code and I have some tips for you.💡✅ To avoid the HTML Issues Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

    Document should have one main landmark

    Context: <html lang="en">

    All page content should be contained by landmarks div to Footer

    Context:

    <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Daniel Daporta</a>.
  </div>

    To

    <footer class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Daniel Daporta</a>.
  </footer>```
    Marked as helpful
    0

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