Responsive nft-preview-card using React.JS

Community feedback

• 

  Teodor Jenkler•4,040

  @TedJenkler

  Posted 7 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!

  03

  Marked as helpful
• 

  Marzia Jalili•9,650

  @MarziaJalili

  Posted 7 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😎.

  08

  Marked as helpful