Skip to content
OverviewSolutions
3
Comments
3
Krisztina Kovari
@krystonen

All comments

  • Krisztina Kovari•60
    @krystonen

    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
  • Krisztina Kovari•60
    @krystonen

    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.

  • Krisztina Kovari•60
    @krystonen

    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!