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 challenge - Completed with Chakra UI/React

@Andrew-Castro

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


Still need to implement the image hover overlay. I am new to Chakra so I was unsure how to properly go about this. Submitting the challenge for now while I explore my options but I am open to community feedback.

Community feedback

Travolgi 🍕 31,420

@denielden

Posted

Hi Andrew, I took some time to look at your solution and you did a great job!

Also I have some tips for improving your code:

  • add main tag and wrap the card for Accessibility
  • You can add the effect :hover creating a div that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution
  • try to add a little transition on the element with hover effect

Overall you did well :)

Hope this help and happy coding!

Marked as helpful

1

Account Deleted

Hello there! 👋

Congratulations on finishing your challenge! 🎉

I have some feedback on this solution:

  • Always Use Semantic HTML instead of div like <main> <header> <footer> , etc for more info
  • All Images must have alternate text
  • you can add the image and background color on hover with pseudo elements :before & ::after if you are not sure what i am talking about you can learn from my example

i hope this is helpful and goodluck!

Marked as helpful

0

@Andrew-Castro

Posted

@Old1337 Hey Old, thanks for the response.

  • I used ChakraUI for this project which uses react components such as 'Box' and 'Flex' which eventually compile down to divs. I am unsure if there's a way to do it otherwise but I'd gladly use it if I could.
  • I have since added alt text but the changes aren't reflected here on FEM, is there a way to resync a solution?
  • Yes, since submitting I have seen other users use this method and I will give it a shot, thank you for your helpful suggestions.
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