All comments

• 

  rebecca• 60

  @rebeccaaaaaaaaaaa

  Submitted over 2 years ago

  How are you guys? Here's my solution to the challenge, I'm a beginner but I'm always looking to improve and study. I've been using this type of challenge to apply what I've been learning, any improvement opinion is welcome!

  

  NFT Card using Reactjs and Styled Components

  2

  30

  

  Krisztina Kovari• 60

  @krystonen

  Posted over 2 years ago

  Hi Rebecca,

  Nice work! I like that you used React and styled components. I have a few comments on your solution (I worked on it myself recently).

  • Check design for the hover state, I found it an interesting challenge in itself (tip: use pseudo elements.)
  • Try to resolve accessibility issues flagged by the report
  • Can you use more meaningful semantic HTML for your markup?
  • Would you consider using css variables styled components ( I actually looked this up for myself as well: https://www.joshwcomeau.com/css/css-variables-for-react-devs/ )
  • Responsiveness: On mobile the card doesn't appear fully. On desktop the card seems larger than on the design. My tips: try using relative units instead of fixed pixels where it makes sense. add media query if relative units don't do the job.

  Marked as helpful

  2

  This comment has received 1 replyShow
• 

  Krisztina Kovari• 60

  @krystonen

  Submitted almost 3 years ago

  When I got stuck with the hover state part of this challenge, I started to look at other people's solutions (on the slack channel) and I was surprised to see that many solutions didn't implement the hover state properly or at all. I would be curious to see how others solved this problem.

  

  NFT preview card component using HTML and CSS

  4

  40

  

  Krisztina Kovari• 60

  @krystonen

  Posted over 2 years ago

  I actually found a great youtube video about before after pseudo elements plus hover state: https://www.youtube.com/watch?v=djbtPnNmc0I I thought this may help someone else with this task.

  0
• 

  Sachin Khatri• 30

  @sachinkhatrilin

  Submitted almost 3 years ago

  

  NFT preview card challenge submission

  1

  20

  

  Krisztina Kovari• 60

  @krystonen

  Posted almost 3 years ago

  Hi Sachin, Nice job on the challenge!

  As I was just doing this challenge myself, I can share some of my thoughts with you as it's still fresh:

  • Look at the report and try to fix the HTML and accessibility issues. These are such useful messages and will make your code better.
  • I see you applied the hover state at once on the image, title and author name. My question to you: what's the purpose of the hover state(s)? When should they change color? When you hover the image, or when you hover the individual elements (image, title, author).
  • I also struggled to have no opacity on the eye icon on hover state. You can check my code how I did it.
  • When you hover the state, the border-radius from the corners are gone.
  • I think the spacing is ok, but some padding may be missing from the bottom and maybe between the image and the title
  • Some distance the arrow icon and the 0.041ETH missing
  • Your separator line has different color ( I would personally avoid using hr for this purpose)
  • On mobile view the padding got smaller around the image

  Cheers!

  0