Skip to content
Submitted over 3 years ago

NFT Card Component Solution Using Flexbox

Anosha Ahmed•9,300
@anoshaahmed
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I would appreciate opinions on the organization of the HTML and CSS code. Also, if there is a more efficient way to do something than what I chose to do.

Code

Please log in to post a comment

Log in

Community feedback

  • Noemi Gali•280
    @NomiDomi

    Hey @anoshaahmed,

    Great job on your first design!

    I checked your other solution too and I saw that you improved tremendously from one design to another so really good job on that!

    I would encourage you to use not just colors in your :root selector but also font size, font family, font weights etc. The idea of having CSS custom properties or variables is to keep everything in one place for cleaner code and easy changes. This might not make so much sense as of now on such small projects, but when you work in big projects this is a must.

    I would also encourage you to take a step away from using pixels for margins, font sizes etc. Pixels don't allow for smooth responsiveness and will lock stuff in place.

    Here are some great tutorials on the different types of units:

    FYI I took inspiration from your design for the image overlay so good job on that!

    Hope this helps! Great start and just keep on coding! :)

    Marked as helpful
  • Account deleted

    Acho que o html poderia ficar melhor, mas resultado esta ótimo, fiz o meu com preguiça.

    Marked as helpful
  • Anton Sukhadolets•330
    @SuhodolecA

    Nice work!

  • Brandon•60
    @walker861

    Thanks for participating Anosha! I am new on my coding journey so I'm only able to speak from my extremely limited experience. Once I had a majority of my solution coded, I found yours on the slack channel. As a newbie, I felt I understood your code fairly easily.

    It helped me figure out how to do the hover states. I have been using The Odin Project but have not been exposed to use of the hover property. So that was extremely helpful. Thanks for posting! Happy coding!

  • roastgrammer•60
    @roastgrammer

    I think this is very nice for your first project and you did it well ! be happy:)

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