product card preview with basic css - first submission

Community feedback

• 

  RabbitMaid•1,020

  @AgbortokoPosted over 1 year ago

  • 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.

  • All Images in your design should always have the alt attribute. This helps search engines easily understand what the image is all about.

  Wrong <img src="images/image-product-mobile.jpg">

  Correct <img src="images/image-product-mobile.jpg" alt="Short Description of Image">

  • The heading tags are very important in Web design. They help make it easy for search engines to identify the context of the page. The range from h1 to h6 (heading 1 to 6) with the most important aspect of the page being the heading 1 (h1).

  For the product title, you could use the <h3> tag. Keeping the most important headings for <h1> and <h2>

  You did great! Just some few amelioration needed for it to be perfect.

  Marked as helpful

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  wrap <div class="attribution"> in a footer tag to fix the accessibility issue

  Add the alt attribute alt=" " to the img tag and give it a value to fix the error issue. 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.

  To center .product on the page using grid, add min-height: 100vh to the body.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0