NFT-preview-card-component Solution using scss

Community feedback

• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  Hello Renzen Lama ! Congo 👏 on completing this challenge

  Just one thing:

  • add border-radius to the card

  happy Coding😀

  Marked as helpful

  1
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @RenzenL,

  Congratulation on completing another frontend mentor challenge.

  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 NFT card ) and a footer (which will be the attribution).<Footer> should not be in the <main >. HTML5 landmark elements are used to improve navigation .

  • 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 "avatar img"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 class="space-between" and in each <li> there would be <img> and <p>.

  General point : Really important to keep css specificity as low/flat as possible. The best way to do styling is single class selectors. Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.

  You might have a look at my solution , to see how I did the hover effect on the image , it might my helps.

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

  Marked as helpful

  1

  ---

  

  Renzen Lama•40

  @RenzenLPosted almost 3 years ago

  @PhoenixDev22 Thank you for this comprehensive feedback😊, I will try and implement your advice ASAP .

  1
• 

  Dev Rathore•2,600

  @GitHub-dev12345Posted almost 3 years ago

  Nice Coding 🚀🚀👍 Congratulation to complete the challenge ❤️👍 My small suggestion : 1.In Card design CSS Code Used this:

  transform : scale(0.8); this property decrease the size of card. 😉

  large size for increase the number of scale & small size for decrease the number of scale

  I hope you find this helpful

  Marked as helpful

  1
• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 3 years ago

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

  Also I have some tips for improving your code:

  • remove all margin from card class because with grid they are superfluous
  • 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
  • after try to add a little transition on the element with hover effect

  Overall you did well :)

  Hope this help and happy coding!

  Marked as helpful

  1

  ---

  

  Renzen Lama•40

  @RenzenLPosted almost 3 years ago

  @denielden Thanks for your feedback !

  1