NFT card component using HTML, CSS and JavaScript

Community feedback

• 

  Yazdun•1,310

  @YazdunPosted almost 3 years ago

  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

  @Kristina225Posted almost 3 years ago

  @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

  @YazdunPosted almost 3 years ago

  @Kristina225 glad I could help

  1
• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 3 years ago

  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

  @Kristina225Posted almost 3 years ago

  @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,400

  @denieldenPosted almost 3 years ago

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

  0
• 

  Hexer•3,660

  @EmmanuelHexerPosted almost 3 years ago

  Nicely done. Keep it up

  1

  ---

  

  Kristina225•260

  @Kristina225Posted almost 3 years ago

  @Phalcin thank you.

  0
• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  Hay ! Kristina225 Good Job on challenge

  1

  ---

  

  Kristina225•260

  @Kristina225Posted almost 3 years ago

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

  1