Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

responsive NFT preview card

Amin 80

@AMINKHALAJI

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Appreciate any help or feedback. I had a challenge hovering over part of the image.

Community feedback

P

@DeyanTopalov

Posted

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!

Marked as helpful

0

Amin 80

@AMINKHALAJI

Posted

Hi @DeyanTopalov , Thank you very much for your nice and in detail advices to my code. I will take a look on rem scaling and hover effects. Moreover, I will see your solution too. Thankfully , Amin

0

Please log in to post a comment

Log in with GitHub
Discord logo

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