Design comparison
SolutionDesign
Community feedback
- @MelvinAguilarPosted almost 2 years ago
Hi @RUBBOSS ๐, good job completing this challenge, and welcome to the Frontend Mentor Community! ๐
I have some suggestions you might consider to improve your code:
- Use the
<main>
tag to wrap all the main content in your solution instead of using<div class="card">
to improve the accessibility of the website.
- Use
<footer>
instead of<div class="attribution">
. The<footer>
element contains authorship information.
- You can use a <picture> tag when you need to change an image in different viewports. Using this tag will prevent the browser from loading both images, saving bandwidth and preventing you from utilizing a media query to modify the image.
Example:
<picture> <source media="(max-width: 378px)" srcset="./images/image-product-mobile.jpg"> <img src="./images/image-product-desktop.jpg" alt="your alt text"> </picture>
- The product image is considered important content. It is therefore necessary to add an alt attribute to the image to provide additional context.
- The
<h1>
element is the main heading on a webpage, also, there should only be one<h1>
tag per page. Swap the<h1 class="newPrice">
tag with another tag.
- Inside a button it is not recommended to have a block element like a <div>
Above all, the project is done well๐. I hope those tips will help you! ๐
Good job, and happy coding! ๐
Marked as helpful1@RUBBOSSPosted almost 2 years ago@MelvinAguilar Thanks for the advice)))This is my first work))
1 - Use the
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