Design comparison
SolutionDesign
Community feedback
- @Mennatallah-HishamPosted about 1 year ago
Hi Praveen,
You did great 👍
Here are some suggestions to improve your code:
Semantic HTML
- you can improve your HTML markup by using semantic HTML, they are meaningful tags that convey the meaning (semantics) of the content within them.
Headings
- each page should have one h1 tag,h1 helps the web understand the content. also skipping h1 may confuse assistive technology users.
<h1>Improving your front-end skills by building projects</h1>
IMAGE
- you can use <picture> element to change the image. the browser will choose the best match and display it.
<picture> <source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg"> <source media="(min-width:650px)" srcset="./images/image-product-desktop.jpg"> <img src="./images/image-product-desktop.jpg" alt="Gabrielle Chanel perfume" class="product__img"> </picture>
ALT
- images should have descriptive alt text, which is important for SEO and screen reader users,alt="Gabrielle Chanel perfume"
Accessibility
- add aria-hidden="true" to the cart icon, it is used to hide decorative content/images/icons from screen readers which improves their experience
- check how I made the price section more accessible here
here are some helpful articles:
Hope you find this helpful, Happy Coding
Marked as helpful0@PraveenMahraPosted about 1 year ago@Mennatallah-Hisham "Thank you for your feedback. I will implement your suggestions."
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