Skip to content
Submitted over 2 years ago

NFT Preview Card | using flex box

Mahmoud Attiyah•50
@M-Attiyah
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

What is your opinion ?

Community feedback

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

    Hello @M-Attiyah ,

    Congratulation on completing another frontend mentor challenge.

    I have some suggestions regarding your solution:

    • Use main landmark to wrap the <body> content (which will be the NFT card )HTML5 landmark elements are used to improve navigation .

    • To tackle the accessibility issues: Page should contain a level-one heading . In this challenge , you can use <h1> with class="sr-only" (Hidden visually, but present for assistive tech).

    • Anything with a hover style in design means it's interactive. you need to add an interactive element<a> around the image , Equilibrium #3429 and Jules Wyvern and add a hover effect on them.

    • 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-view, icon-ethereum, icon-clock ).

    • The avatar's alt should not be "person image "it's meaningless , you can use Jules Wyvern. Read more how to write an alt text

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

    • You can use <ul> to wrap id="ethereum-info" and in each <li> there would be <img> and <p>.

    • You can use border-top to id="card-person" instead of <hr id="line">

    • To center the card on the middle of the page use flexbox properties and min-height: 100vh; to the body . (no need for position absolute.)

    • width: 300px;an explicit width is not a good way . consider using max-width to card instead and a little margin to the card that will prevent it hitting the screen edges.

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

    General point : Really important to keep css specificity as low/flat as possible. The best way to do styling is single class selectors.

    Overall , your solution is good . Hopefully this feedback helps.

    Marked as helpful
    0
  • Travolgi 🍕•31,400
    @denieldenPosted over 2 years ago

    Hi Mahmoud, I took some time to look at your solution and you did a great job!

    Also I have some tips for improving your code:

    • add main tag and wrap the card for Accessibility
    • remove all unnecessary code, the less you write the better as well as being clearer
    • add hover effect to the title and author name
    • You can add the effect :hover creating a div that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution

    Overall you did well :)

    Hope this help and happy coding!

    Marked as helpful
    0
  • Naveen Gumaste•10,480
    @NaveenGumastePosted over 2 years ago

    Hello Mahmoud Attiyah ! Congo 👏 on completing this challenge

    Let's look at some of your issues, shall we:

    • Color for 3days left is gary i think not teal!

    • Always use h1 first and then h2, h3 and so on

    • you are missing <html lang="en"> in your html doc

    • Warp your card content around the main tag Ex: 👇

    <body>
<main class="container">
*all you content here*
</main>
</body>
``


happy Coding😀
    Marked as helpful
    0
  • Sudharsan Jain•200
    @Sudarsh1010Posted over 2 years ago

    I think you forgot to add Hover Effect. Check active-states img in the design folder. and It's good

    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