Design comparison
SolutionDesign
Community feedback
- @dquinn089Posted 4 months ago
Great job on the project! Your code is well-structured, and the design looks clean and responsive. Here are a couple of tips that might help you enhance it further:
Accessibility Improvement: Adding descriptive alt text to your images improves accessibility. For example:
<img src="./images/image-product-desktop.jpg" alt="Gabrielle Essence Eau De Parfum product image for desktop" class="img-desk" /> <img src="./images/image-product-mobile.jpg" alt="Gabrielle Essence Eau De Parfum product image for mobile" class="img-mob" />
CSS Efficiency: You can combine similar selectors to make your CSS more efficient. For example, both .heading-txt, .org-price, and .desc-txt have the same color property:
.heading-txt, .org-price, .desc-txt { color: var(--Dark-grayish-blue); }
These are minor improvements, but they can make your code even better. Keep up the excellent work! Happy coding!
Marked as helpful0
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