Skip to content
Submitted over 2 years ago

NFT Card Preview

Kelsey Christensen•20
@kelseychristensen
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

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.

Community feedback

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

    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
    1
    Kelsey Christensen•20
    @kelseychristensenPosted over 2 years ago

    @PhoenixDev22 Thanks so much for your thoughtful and detailed feedback. I'm going to implement these changes :)

    1
    Kelsey Christensen•20
    @kelseychristensenPosted over 2 years ago

    @PhoenixDev22 I implemented a lot of these changes though I'm confused about the anchor tags around interactions. Including them means there are links that don't go anywhere... but maybe that's just because if this were a real, live site, the elements that have interactions would lead to a valid link. Thanks again for your thoughtful feedback.

    1
  • Naveen Gumaste•10,480
    @NaveenGumastePosted over 2 years ago

    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
    1
  • Ahmed ibrahim•370
    @Ahmedhassanin12Posted over 2 years ago

    you did it well kelsey , keep going 👌🎉✔

    Marked as helpful
    1
  • darkweb•210
    @darkweb907Posted over 2 years ago

    Flex can make that easy

    Marked as helpful
    1
  • Adarsh•1,640
    @adram3l3chPosted over 2 years ago

    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
    1
    Kelsey Christensen•20
    @kelseychristensenPosted over 2 years ago

    @adram3l3ch Thanks! I re-worked this using flexbox and still faced challenges getting the text and images to align in the ethereum/days left area, but it was a great way to get an introduction to using flexbox.

    1
    Adarsh•1,640
    @adram3l3chPosted over 2 years ago

    @kelseychristensen You can make the ethereum-image-container to a flexbox and add property align-items:center; to vertically align its children

    0
  • 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
    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