responsive NFT preview card

Community feedback

• 

  P

  DeyanTopalov•430

  @DeyanTopalov

  Posted almost 2 years ago

  Hi Amin,

  Great work on this challenge!

  Few notes after looking at your solution and code:

  • It is a good practice to use relative units (like em, rem etc) and not pixels. This is in order to optimize the design and therefore user experience across different screen sizes. If you have you measurements in pixels, you can use any px to rem calculator found by google search.
  • It is a good practice to set custom variables for commonly used values across your code base (eg. font-size, font-weight, spacing, colors etc). Usually the design is build with a pattern/system in mind and by doing this - you will have consistency, and in case of an update - you will need to change the value only in your custom variables declaration and it will update in every place it is being used.
  • Use layout tools like flexbox and grid for, instead of margins etc. For spacing you can use gap and padding.
  • It seems there are some areas of improvements for the hover you have implemented - when you have a img that is to have a hover effect you can place that <img> inside a <div> and apply the hover to that one. It is a good practice to have both :hover & :focus.
  • also for the hover effect you can use pseudo elements like :before. They might be a bit tricky at start, but with a bit of practice those can provide some clever solutions.

  In case you are interested, feel free to review my solution for the same challenge.

  It is worth noting that I am no expert by any means, and this feedback is just my opinion.

  Overall great work and keep on coding!

  P.s. If you find this comment helpful, please mark it as such - this will help me understand when my feedback is useful and it's a much appreciated gesture!

  01

  Marked as helpful