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

NFT Preview Card w/ react-create-app, mobile-first and sass/scss

#accessibility#react#sass/scss

@Sloth247

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


Hi, thanks for visiting this solution page. This is my first time building with React other than code along at tutorials. This project is probably not good to practice React, but I wanted to try from newbie challenges. I hope the methods are correct. This app should fully accessible and focusable. I am looking forward to hearing any feedbacks or comments especially from someone who is familiar with React.

Community feedback

Jason Heys 175

@heyitsgany

Posted

This looks good, you've gotten pretty close to the design, nice work!

A couple of things to look at:

  • Your active state on the image (the colour overlay and eye icon) is a little larger than the image itself, so you get an odd extra bit at the bottom of the image when you hover.
  • You want to change the attribution div to a footer element instead (just to keep it semantically correct).
  • The height of the card could be increased slightly to better match the design.

Also, the solution report is stating that you need to include a h1 element, although looking at your markup I can see it's there. I'm not sure if making it aria-hidden has caused this issue?

Marked as helpful

0

@Sloth247

Posted

@heyitsgany Hi Jason, thanks for your feedback! I have fixed the pointers other than first one - I cannot find the solution, so I will ask in #help of the community. h1 element had to be .sr-only - screen reader only text, so I fixed.

0
Jason Heys 175

@heyitsgany

Posted

@Sloth247 so, to solve the problem with the overlay having the extra space at the bottom; make sure you give your img element a display: block.

It happens because image is an inline-level element so browser adds some whitespace under the baseline to adjust other inline elements.

Marked as helpful

1

@Sloth247

Posted

@heyitsgany Wow, that fixed!! Thank you very much and I keep in mind it in the future 👩‍🦰

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