Responsive nft-preview-card using React.JS

Community feedback

• 

  Teodor Jenkler•4,040

  @TedJenklerPosted 2 months ago

  Hi @nishanth1596,

  I have some additional feedback to help improve your project:

  Content for ::before and ::after: I noticed that the first feedback missed mentioning content: "". This is essential for ::before and ::after pseudo-elements. Using this overlay method, as @MarziaJalili mentioned, is recommended because it allows you to add hover effects and animations to the other layer while achieving the desired overlay effect.

  <main> Element Usage: It seems you're using the <main> element incorrectly. In your index.html, you can replace the #root div with a <main> element, provided you're not including a <footer> or <header>. This aligns with best practices for semantic HTML.

  Reducing Divs and Containers: You're using too many <div> and container elements. Aim to minimize these where possible. I recommend learning more about Flexbox to reduce the complexity associated with extra padding and margins in your card layout. Simplifying your structure will result in cleaner, more maintainable code, which is especially helpful in larger projects. (In React, you can use <></> for cleaner code when working with components.)

  List Element Usage: Be cautious with how you use lists (<ol> or <ul>). These should only be used for ordered or unordered lists. Misusing them can confuse the structure and semantics of your content.

  SEO Practice: I recommend practicing the use of SEO titles and descriptions in all your projects. Try adding these to your index.html, then share your project on Discord or social media before and after implementing these changes to observe the differences in visibility and engagement.

  Keep up the good work!

  Marked as helpful

  0

  ---

  

  Marzia Jalili•3,970

  @MarziaJaliliPosted 2 months ago

  @TedJenkler ahhhhhhhhhh you are definitely right buddy,

  Stupid me, I myself sometime forget to set that property and then wonder what in the world is wrong 🤦🤦.

  1

  

  Teodor Jenkler•4,040

  @TedJenklerPosted 2 months ago

  @MarziaJalili Happens the best of us :)

  0

  

  P

  Nishanth Venkatesan•680

  @nishanth1596Posted 2 months ago

  @TedJenkler thank you so much, its a great feedback, I will start implementing all these in my challenges!!

  1
• 

  Marzia Jalili•3,970

  @MarziaJaliliPosted 3 months ago

  Well done man,

  Here's the answer to your question:

  As far as I know we can't directly change the background of an image.

  Therefore, we have to use the ::before or ::after pseudo element.

  But the img element doesn't support them. So we set them on the parent element of the img.

  • Take the line below as an example for the HTML:

  <div className="image-parent">
    <img className="image" src="path of the image" alt="image"/>
  </div>
  

  • Then apply the lines below in CSS:

  .image-parent {
    position: relative; 
  }
  
  .image-parent::before {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: cyan; /* or the code of the color */
    opacity: .5; /* if you want the image to be seen */
  }
  

  By implementing these lines your will definitely achieve the desired effect😎.

  Marked as helpful

  0

  ---

  

  P

  Nishanth Venkatesan•680

  @nishanth1596Posted 3 months ago

  @MarziaJalili thank you so much for the wonderful explanation

  1

  

  Marzia Jalili•3,970

  @MarziaJaliliPosted 3 months ago

  @nishanth1596 of course bro!!!

  But you can do something to make it up for me.

  I have an exam in my English class, pray for me to get it all correct.

  1

  

  P

  Nishanth Venkatesan•680

  @nishanth1596Posted 3 months ago

  @MarziaJalili I'm not just praying, I’m also brewing up some magic spells to help you out. By the time you're done, you’ll be scoring 100 just by blinking! 😂✨

  2

  

  P

  Tsukimi•820

  @hikawiPosted 2 months ago

  @MarziaJalili Did you get it all correct?

  2

  

  P

  Nishanth Venkatesan•680

  @nishanth1596Posted 2 months ago

  @hikawi Even the sun might miss a day rising in the east, but not my spells! 😜✨

  1

  

  Marzia Jalili•3,970

  @MarziaJaliliPosted 2 months ago

  The exam is tomorrow guys,

  But guess what's new!!!!!!!!!!!!!!

  My baby bro just came to this WONDERFUL WORLD yesterday!!!!!!

  AHHHHHHHHHHHHHH, what am i doing here😅😅

  2

  

  P

  Nishanth Venkatesan•680

  @nishanth1596Posted 2 months ago

  @MarziaJalili congratulations!!

  1

  

  P

  Tsukimi•820

  @hikawiPosted 2 months ago

  @MarziaJalili Better give him a responsive NFT card as a gift!

  1