Skip to content
OverviewSolutions
3
Comments
3
Krisztina Kovari
@krystonen

All comments

  • rebecca•60
    @rebeccaaaaaaaaaaaSubmitted almost 3 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
    Krisztina Kovari•60
    @krystonenPosted almost 3 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
  • Krisztina Kovari•60
    @krystonenSubmitted 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
    Krisztina Kovari•60
    @krystonenPosted almost 3 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
  • Krisztina Kovari•60
    @krystonenPosted 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