Submitted

Responsive Card Component w/ Hover Animation CSS

@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

Report

8

Accessibility Issues

8

HTML Issues

View Report

Christian Lam’s questions for the community

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

P

@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


@ui-Auxilary

Posted

@Eric-Ferole Thanks for the advice!

0

darryncodes 5,170

@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

Give some feedback to @ui-Auxilary about their solution...

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!