Skip to content
Submitted about 3 years ago

Card using Flexbox to center, and variables for colors.

Fizzify•20
@Fizzify
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I found making some of the hover effects hard like the view icon.

I was a little unsure of my previous code on the CSS variables because I haven't really used it in a long time.

Is my code good practice?

Code

Please log in to post a comment

Log in

Community feedback

  • Fluffy Kas•7,655
    @FluffyKas

    Heyo,

    I think you did great here. Apart from the things mentioned by @Samadeen, you could look into the following:

    1. Would be nice if you wrapped the layered image in an <a> tag, as I'm fairly sure it's supposed to take you somewhere when it's clicked on.

    2. Here's a useful article about alt texts. I suggest reading it but I'm going to sum up the parts relevant here: when writing alts, don't include words like image, icon, illustration etc. Using an <img> tag makes it self-explanatory what it is. For profile pictures, it's best to use the name of the person (here, it would be "Jules Wyvern."). For the icon, "Ethereum." would be a bit better.

    Marked as helpful
  • Abdul•8,560
    @Samadeen

    Hey!! Cheers 🥂 on completing this challenge.. .

    Here are my suggestions..

    • You should use <main class="container"> instead of <div class="container">.
    • Go down orderly when you are using the headings h1 down to h2 down to h3 and so on.
    • You can wrap your attribution section in a footer tag to avoid accessibility issues.

    This should fix most of your accessibility issues

    . Regardless you did amazing... hope you find this useful... Happy coding!!!

    Marked as helpful

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