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 created with flexbox

Mihael 260

@mihaelpavlakovic

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


Hii everyone, this is the third challenge I have tried to recreate. I'm so happy about how it turned out, but I think I could further improve in writing cleaner code.

It would be helpful for my future growth if you could point me in the right direction. For example, I'm interested in potentially better solutions for this challenge. In which area do I need to improve, and what do you recommend that I should implement? What are some best practices that I haven't got right?

Thanks for your attention and all the future feedback.

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Hello @mihaelpavlakovic, Congratulations on completing this challenge!

I like the work you’ve done here, your solution is almost complete. I’ve some suggestion for you to improve the code/design:

1.Add transitions to make the interaction smoother while the element gets hovered, you can use a value like transition: all ease-in 0.5s.

2.Use units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. To save your time you can code you whole page using px and then in the end use a VsCode plugin called px to rem heres the link → https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem

3.Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, making the images easier to work, see the article below where you can copy and paste this css code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/

✌️ I hope this helps you and happy coding!

Marked as helpful

0

Mihael 260

@mihaelpavlakovic

Posted

@correlucas Wow, thanks for such a detailed comment! I will implement all the points you have mentioned.

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