nft-preview-card

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace <div class="card"> with the main tag and <h3> with <h1> to fix the accessibility issues. click here for more on web-accessibility and semantic html

  Add aria-label attribute aria-label=" " to the <a> of the eye icon to fix the error and accessibility issue. The value of the aria-label is the description of the image. For more aria-label click here

  Give the alt attribute in the img tag a value. The value of the alt attribute is the description of the image. For decorative images like icons, there is no need to give it an alt value, for more on alt attribute Click here.

  For a responsive content, replace the width in .card with max-width and increase its value. max-width: 400px.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  bavly-el•20

  @bavly-elPosted over 1 year ago

  @Hassiai thank you very much

  I will definitely do as advised

  0

  

  bavly-el•20

  @bavly-elPosted over 1 year ago

  @Hassiai thank you very much

  I will definitely do as advised

  0
• 

  Shashikant•430

  @shashikantdev3Posted over 1 year ago

  Hello there 👋. Good job on completing the challenge! Here are some suggestions regarding your code that may be of interest to you.

  For avatar I can see you have used pseudo-element ::after but that seems not working as the image for the avatar is in png, It is a great idea to use pseudo-element in the case of SVG images but here it is not a good idea as it is in png format.

  Below are HTML and CSS changes that you might change in your code to make avatar visible

  HTML
          <div class="product__avatar">
            <img class="avatar" src="./images/image-avatar.png" alt="" />
            <p>Creation of <span> Jules Wyvern</span></p>
          </div>
  

  CSS
  .product__avatar{
    display: flex;
    padding: 1rem 1rem 0 0;
    gap: 1rem;
    align-items: center;
  }
  
  .avatar{
    vertical-align: middle;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    border: 2px solid var(--clr-white);
  }
  
  
  .product__avatar + p{
    margin-left: 20px;
    font-size:0.9rem;
    
  }
  p > span{
    color:white;
    margin-left: 3px;
  }
  

  Also for the hover effect on Equilibrium #3429 and Jules Wyvern make below changes in your CSS

  .card .main-img:hover a {
    cursor: pointer;  
    opacity: 1;
  }
  
  h3:hover{
    color:rgb(33, 247, 245);
    cursor: pointer;
  }
  
  span:hover{
    color:rgb(33, 247, 245);
    cursor: pointer;
  }
  

  HTML 🏷️: To clear/pass the Warning "Page should contain a level-one heading" and for Accessibility:

  Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy.

  Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy.

  HTML5 elements such as <main>, <nav>, <header>, <footer>, <section>, <aside> act as landmarks or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology (Users with disabilities). You can use the <div> for sub-items within landmarks like <section>. In other words for containers or sections in your HTML, you can use the <section> tag if you want to nest in subitems <div>.

  Landmarks such as the <section> may require that you specify a heading within. In other words, if the section has no heading it may throw an error when checked by an accessibility tool.

  It is advisable that you place all your main site content in a landmark element <main> Here is an Accessibility Evaluation Tool to check your webpage for any errors or warnings related to landmarks.

  There exists an attribution <div> that comes with the frontend mentor starter kit. You will have to wrap this <div> in a <footer> tag

  Read

  W3schools Accessibility Landmarks Notes for more information.

  Accessible Landmarks Article by Soctt.

  I hope you find my comment useful. 😄 Nevertheless, the solution you submitted is great! 🎉 Happy coding

  Marked as helpful

  0

  ---

  

  bavly-el•20

  @bavly-elPosted over 1 year ago

  @shashikantdev3 thank you very much for the golden advice and i will use it to improve my code

  0

  

  bavly-el•20

  @bavly-elPosted over 1 year ago

  @shashikantdev3 thank you very much for the golden advice and i will use it to improve my code

  0

  

  bavly-el•20

  @bavly-elPosted over 1 year ago

  @shashikantdev3 thank you very much for the golden advice and i will use it to improve my code

  0
• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  Congrats on completing the challenge successfully! It looks great on both mobile and desktop devices and is responsive.

  The avatar image seems to be not being displayed properly. Seems like a relative path issue so u can fix it with this:

  <img src="./images/image-avatar.png" alt="">

  basically add a "." from /images

  Hope you find this feedback helpful!

  Marked as helpful

  0

  ---

  

  bavly-el•20

  @bavly-elPosted over 1 year ago

  @visualdenniss thank you very much

  0