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 Card Component w/ Hover Animation CSS

Christian Lam• 20

@ui-Auxilary

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


How to optimise HTML Structure/CSS? ie. Unnecessary divs, better grouping of elements

Are there better methods to create an overlay animation over an image?

How to reduce repeating styling in CSS, and in-line styling in the HTML?

Community feedback

darryncodes• 6,430

@darryncodes

Posted

Hi Christian,

Really decent solution, nice work with this one!

I'd recommend reviewing your accessibility and html report it's a good habit to get into:

Overall though a really good design aesthetically!

Marked as helpful

1

@Eric-Ferole

Posted

Hi Christian, nice work. You forgot your alt attribute on your img tag, it's important for accessibility and SEO. I saw you use a div to make your overlay. It's perfectly good. But most will use the pseudo element ::before to make that kind of effect.

For the structure I would suggest you to learn BEM methodology. Super easy to learn and it will help you to structure your class. Also, read about HTML 5. You could make your HTML structure more accessible with tag like <footer> instead of using a div with a class footer.

Hope it helps. Keep up !

Marked as helpful

1

Christian Lam• 20

@ui-Auxilary

Posted

@Eric-Ferole Thanks for the advice!

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