Skip to content
Submitted almost 3 years ago

NFT Preview Card Component

Abby Nyakara•190
@AbbyNyakara
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

Any feedback on how i can improve my solution will be highly appreciated.

Community feedback

  • Abdullah Farea•180
    @AbdullahFareaPosted almost 3 years ago

    Everything is good. you should use these:

    1. "justify-content: space-between" to make space between "units";
    2. for the "icon-view" use "top: 50%; left: 50%; transform: translate(-50%, -50%)" to center it
    Marked as helpful
    0
  • PhoenixDev22•16,950
    @PhoenixDev22Posted almost 3 years ago

    Hello @AbigaelN2021,

    I have some suggestions ,to tackle the accessibility issues

    • All page content should be contained by landmarks. So wrap the <body >content in <main >to read more about landmarks , And the <footer >(for the FM attribution ) should be out of it.

    • For any decorative images, each imgtag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those imagesalt="clock, alt="ethereum-icon"icon-view, and avatar ‘s alt="” text shouldn’t be “avatar “ , The text alternative should convey the meaning or content that is displayed visually. You can read more about alt text

    • Anything with a hover style in the design means it's interactive . You need to add an interactive element ( an anchor tag <a>) around the imageand Equilibrium #3429 and Jules Wyvern

    • You can use unordered list <ul> to wrap class="units and in each list item would have <img > and <p>.

    • The eye image doesn't really need to be in the html, you could do it with css.

    • no need for <hr> you can you use border-top toclass="bottom .

    Hopefully this feedback helps. Keep coding!

    0
    Abby Nyakara•190
    @AbbyNyakaraPosted almost 3 years ago

    @PhoenixDev22 . Thanks a lot. This is very helpful. Almost like a html/css masterclass lol!.

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

    Hay ! Abby 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

    Keep up the good work!

    0
    Abby Nyakara•190
    @AbbyNyakaraPosted almost 3 years ago

    @Crazimonk, thanks. really helpful. I've been wondering how to sort the accessibility issue for weeks!. thanks you!

    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