Skip to content
Submitted over 3 years ago

NFT Card Preview

Kelsey Christensen•20
@kelseychristensen
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

By far the most challenging part of this challenge was aligning the ethereum icon, price, clock icon, and days and ultimately I relied on a clunky solution to do it because I just couldn't fuss with it anymore. I'm also not sure if the on-hover effects should be reversed with the default appearance. I would think you would get to preview the NFT image on hover but otherwise it would be hidden by the overlay -- however, it really appears from the images supplied in this project that the overlay and eye icon appears on a hover (or possibly a click). Regardless, this was a fun challenge and I am pretty happy with the results.

Code

Please log in to post a comment

Log in

Community feedback

  • PhoenixDev22•16,830
    @PhoenixDev22

    Hello @kelseychristensen,

    I have some suggestions regarding your solution:

    • There should be two landmark components as children of the body element - a main (which will be the component) and a footer (which will be the attribution).the<footer > should be outside the <main> .

    • In this challenge , you can remove the extra div <div class="parent ">and use:

    <main class="card">
/* the rest of the code here.*/
</main>
    • Anything with a hover style in a design means it's interactive. you need to add an interactive element<a> around theimage , Equilibrium #3429, Jules Wyvern. like this:
        <h1><a href="#">Equilibrium #3429</a></h1>
    <p class=""> Creation of <a href="#">Jules Wyvern</a></p>

    • Images must have an alternative textimage-equilibrium . You can useNFT name.

    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in (icon-clock.svg, /icon-ethereum.svg", icon-view.svg)

    • the icon-view doesn't really need to be in the html , you could do it with css. If you want it to stay in html it needs to be aria-hidden:true ` or role presentation with empty alt

    • the icon-view doesn't really need to be in the html, you could do it with css. If you want it to stay in html it needs to be aria-hidden or role presentation with empty alt.

    • Use <p> tag instaed of <header> .<p>Our Equilibrium collection promotes balance and calm.</p>

    • the link should be wrapping the original image and either have Sr-only text, an aria-label or alt text that says where that link takes you.

    • You can use an unordered list<ul> to wrapclass="info" and in each <li>, there would be <img > and<p>.

    • No need for <hr/> , you can use border-top to the avatar's part.

    • You should use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs.

    • To center the card on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body>like this:

    
body {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    background: hsl(217, 54%, 11%);
    font-family: 'Outfit', sans-serif;
}

    • an explicit width width: 275px; is not a good way . Remove the width from the card component and change it to max width instead. That will let it shrink a little when it needs to.

    • You should use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs.

    • About Table-Based Layout You should not use table-based layout under any circumstances .This design pattern is now considered very bad. It is bad for the user experience, bad for SEO, and bad for developers who have to maintain pages.Read more

    • try to put classes directly on anything you want to style.

    Overall your solution is good , Hopefully this feedback helps.

    Marked as helpful
  • Naveen Gumaste•10,420
    @NaveenGumaste

    Hay ! AYUSH Good Job on challenge

    These below mentioned tricks will help you remove any Accessibility Issues

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

    -> Always use the "alt attribute" and write what img is , and if the img is for decorative then leave it empty but always add it with img tag.

    -> 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
  • Ahmed ibrahim•370
    @Ahmedhassanin12

    you did it well kelsey , keep going 👌🎉✔

    Marked as helpful
  • darkweb•210
    @darkweb907

    Flex can make that easy

    Marked as helpful
  • Adarsh•1,640
    @adram3l3ch

    Congratulations on finishing the challenge. I don't recommend using table in this scenario, instead you could use flex for this kind of layouts

    Marked as helpful
  • Account deleted

    Hello there! 👋

    Congratulations on finishing your challenge! 🎉

    I have some feedback on this solution:

    • Always Use Semantic HTML instead of div like <main> <header> , etc for more info

    if my solution has helped you do not forget to mark this as helpful!

    Marked as helpful

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