Product preview card component using HTML&CSS

Community feedback

• 

  Ahmed Faisal•5,095

  @afrusselPosted 11 months ago

  Hello @ahmedafsa, good job for a novice. Here are some comments I've made to aid you in the future.

  The specific issues in your code lie mainly in accessibility and the lack of semantic structure:

  1. Missing Alt Attributes: Images are missing alt attributes (alt="..."). These attributes provide alternative text for screen readers and are essential for accessibility purposes.

  2. Semantic HTML Elements: The structure could benefit from more semantic HTML elements like <header>, <main>, <section>, or <article>. They help screen readers and search engines understand the content and improve accessibility.

  3. Responsive Images Handling: Although you're using different images for desktop and mobile, directly inserting both images may not ensure the best performance or adaptability across devices. Employing the <picture> element with <source> tags and media queries allows for more precise control over image loading based on device size or resolution.

  4. CSS File Linking: Ensure that the path to your CSS file (style.css) is correct and that the CSS rules defined in that file are appropriately applied to the HTML elements.

  5. Form Accessibility: If the button is part of a form, incorporating proper form elements (<form>, <input>, <label>) with the appropriate semantics and ARIA attributes would improve accessibility and user experience.

  Addressing these concerns will enhance the accessibility, semantics, and overall structure of your HTML, making it more compliant with best practices and standards.

  Marked as helpful

  3

  ---

  

  Ahmed Mohamed 🇵🇸•310

  @ahmedafsaPosted 11 months ago

  @afrussel

  Thank you very much for reviewing my code! I've made some adjustments based on this great feedback <3

  0