Mobile first NFT preview card using flex and Tailwind CSS

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  Hello

  The html on this needs adjustment. Anywhere there is a hover style on the design it's saying "this is clickable". That means it is essential to use an interactive element for each one.

  Once those anchor tags are in, don't forget to add obvious focus-visible styles as well to aid keyboard users 😊

  Marked as helpful

  1

  ---

  

  Raj Kiran Chaudhary•100

  @rk-codeflowPosted almost 3 years ago

  I was unaware about focus-visible @grace-snow. Need to dig about this. Huge thanks for pointing out this. 🙏🙏

  0
• 

  P

  Remus D. Buhaianu•3,125

  @MiculinoPosted almost 3 years ago

  Congrats on completing the challenge, @rk-codeflow!

  Your design looks nice and almost identical to the original one.

  Try to make the gray line more subtle - either change the color or reduce its opacity.

  Also, the transition effects should be triggered by hovers, not clicks.

  Marked as helpful

  1

  ---

  

  Raj Kiran Chaudhary•100

  @rk-codeflowPosted almost 3 years ago

  Tons of thanks for your kind words @Remus432. "Also, the transition effects should be triggered by hovers, not clicks" - I had never thought about this. Really thanks for your time.

  0
• 

  Web Wizard•5,690

  @rsrclabPosted almost 3 years ago

  Hi, @rk-codeflow ~

  Congratulate on great work here ~ I have studied your work, and really loved the way you used TW classes for card. Nice trying! Here are some of my tips on this project.

  1. Trying transition effects on hover event will make things more beautiful, I am sure.
  2. I think using pure CSS would be better on this case as it is rather simple project. Using TW on this will lead to countless HTML validation errors like now.
  3. While using pure CSS, please try BEM structuring, it will help you a lot.

  Here is my solution to this challenge and if it can help you even a bit, it would be really happy to me.

  https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH

  Cheers ~

  Marked as helpful

  1

  ---

  

  Raj Kiran Chaudhary•100

  @rk-codeflowPosted almost 3 years ago

  @tymren608 These are some awesome suggestions. Thanks a lot. Next time I will definitely keep these things in mind. I saw your code too. It is pretty well-structured. I would suggest you using clamp function for responsive text. This way, you don't have to define your font-size in media query.

  0
• 

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  Hey Keeran, to get rid of the accessibility issue shown in your Report, have at least one <h1> in your code :)

  Marked as helpful

  1

  ---

  

  Raj Kiran Chaudhary•100

  @rk-codeflowPosted almost 3 years ago

  @anoshaahmed Sure ... thanks

  1