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 card component using HTML, CSS and JavaScript

Kristina225ā€¢ 260

@Kristina225

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, everyone. Any feedback you can give me on my solution is appreciated. I was mostly struggling with the hover state on the image. I added an empty <div> in my HTML for the cyan transparent background and changed its 'display' property with 'mouseenter' and 'mouseleave' with JavaScript. But maybe there are better ways and JavaScript is not necessary. Thank you all.

Community feedback

Yazdunā€¢ 1,310

@Yazdun

Posted

Hello Kristina, well done on this challenge šŸ‘ I see you've written extremely clean code, thumbs up šŸ‘

  • about solution itself, as you said yourself, you don't need JS for hover stats, all you need is :
.card__image--container:hover .card__image--backdrop,
.card__image--container:hover .card__image--icon {
  display: block;
}

in your css and you'll achieve same functionality without any javascript.

  • here there is another issue I found, you've used width: 35rem; and height: 59.6rem; on your card, so when device's width gets smaller your layout will break, it is not recommended to use static size for your elements and you must let the content specify the size, so what you can do is :
.card {
  width: 100%;
  max-width: 35rem;
  // rest of the code ...
}

.card__image {
  display: block;
  position: relative;
  /* let the content specify width */
  max-width: 100%;
  border-radius: 0.8rem;
}

and some padding on the body, will make sure that your layout won't break on small screens.

  • use PRETTIER extension on your code editor to format your code.

  • side issue about github šŸ˜„ : don't jam all your solutions on one branch, create separate branch for each solution, and as you are already using netlify for deployment, you can easily deploy each branch automatically using netlify, this way if you mess up one of your project, your whole repo won't go bananas and you can easily delete the corrupted branch.

I also opened a pull request to your repo which will fix the solution issues I mentioned, keep coding

Marked as helpful

2

Kristina225ā€¢ 260

@Kristina225

Posted

@Yazdun thank you so much for your comments about my code! They are really helpful, for both this one and future projects. As for the github repo, I don't know why I thought it would be easier to put all projects together. It's not. And I didn't even think about what would happen if I mess up on one project like you said. :) Thank you again.

0
Yazdunā€¢ 1,310

@Yazdun

Posted

@Kristina225 glad I could help

1
Travolgi šŸ•ā€¢ 31,460

@denielden

Posted

Hi Kristina, great job! Congratulations on completing the challenge.

JavaScript in this case is not needed :) You can solve adding 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

Overall you did well :)

Hope this help and happy coding!

Marked as helpful

1

Kristina225ā€¢ 260

@Kristina225

Posted

@denielden thank your for your comment. The solution for only using CSS was so simple, but I did not see it while I was doing the project. :) You're solution looks great.

1
Travolgi šŸ•ā€¢ 31,460

@denielden

Posted

@Kristina225 You're welcome! Thanks a lot :) And keep it up

0
Hexerā€¢ 3,680

@Phalcin

Posted

Nicely done. Keep it up

1

Kristina225ā€¢ 260

@Kristina225

Posted

@Phalcin thank you.

0
Naveen Gumasteā€¢ 10,480

@NaveenGumaste

Posted

Hay ! Kristina225 Good Job on challenge

1

Kristina225ā€¢ 260

@Kristina225

Posted

@Crazimonk thanks for taking the time to view my solution. I had fun doing it.

1

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