Skip to content
Submitted almost 3 years ago

layout using CSS grid ,flex-box

Joudiā€¢60
@joud-s
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

need your opinion ,it took me 3.5 hours separately
sorry didn't make it responsive

Community feedback

  • Vanza Setiaā€¢27,775
    @vanzasetiaPosted almost 3 years ago

    šŸ‘‹ Hi Joudi!

    šŸŽ‰ Congratulations on finishing this challenge! I have some feedback on this solution:

    • Accessibility
      • Any elements that have :hover or :active states should be interactive elements such as input, button, a, texarea, etc.
      • Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (Tab) easily.
      • Alternative text (alt) should be informative (useful) for the users. I would recommend reading a tutorial from W3 WAI about images and if you have more time, you can read the article about Alt Texts: The Ultimate Guide.
    • Responsiveness
      • It's pretty much responsive in my opinion. All you need to do is to add padding: 1.25rem; to the body element so that the card doesn't have full width on mobile device.
      • I would recommend using rem unit for max-width instead of px for better responsiveness across devices.
    .content {
  max-width: 380px;
}

    That's it! Hopefully, this is helpful!

    Marked as helpful
    2
    Joudiā€¢60
    @joud-sPosted almost 3 years ago

    @vanzasetia Hi Vanza , thank you for your feedback , I love using rem and em instead of fixed number for the width and height ,but still need some experience and practicing and i ll try to make the next one have more accessibility .

    0
  • PhoenixDev22ā€¢16,950
    @PhoenixDev22Posted almost 3 years ago

    Hello there ,
    Congratulations on completing your first project. Your solution is very good, To get rid of the accessibility issues shown in your Report:

    ā€¢ wrap everything in your body in <main> ... OR use semantic tags ... OR give role="" to the direct children of your <body> ... Click here to read more

    ā€¢ have at least one <h1> in your code, You should have used <h1> and move up by one level each time instead of the <h5>, <h6> for the titles. Click here to read more

    hope this feedback helps. Happy coding

    Marked as helpful
    2
    Joudiā€¢60
    @joud-sPosted almost 3 years ago

    @PhoenixDev22 thank you so much for your feedback ill try to avoid this issues next time actually this is my first feedback I'm so glad and thankful

    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