Product preview card component using HTML&CSS
Design comparison
Solution retrospective
Feedback is always welcome ^^
Community feedback
- @afrusselPosted 12 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:
-
Missing Alt Attributes: Images are missing
alt
attributes (alt="..."
). These attributes provide alternative text for screen readers and are essential for accessibility purposes. -
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. -
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. -
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. -
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 helpful3@ahmedafsaPosted 12 months ago@afrussel
Thank you very much for reviewing my code! I've made some adjustments based on this great feedback <3
0 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord