
Design comparison
Solution retrospective
I am quite happy with the final result, but hopefully I will get faster.
What challenges did you encounter, and how did you overcome them?I struggled with the positioning of the elements, and I had to ask for help changing the img in the different previews.
What specific areas of your project would you like help with?I appreciate any feedback! I really want to know what I can improve in my code :)
Community feedback
- @T23harmsPosted 6 days ago
Strengths:
Good semantic HTML structure, with proper use of <main>, <h1>, and <p>. Accessibility: alt attributes are correctly used, but the "Add to Cart" button should be a <button> instead of an <a> for better accessibility. Responsive Design: The picture element is well-implemented for different screen sizes.
Improvements:
Mobile Responsiveness: The layout does not seem to be fully optimized for mobile. The content collapses too much on smaller screens, likely because there is no media query adjusting the layout for smaller devices. Suggestion: Add specific media queries to adjust padding, font size, and layout for mobile devices (e.g., making the product image more responsive, and adjusting the container widths). Pricing structure: The old price ($169.99) should be wrapped in <del> for better semantics. SEO: Update the <title> to something more descriptive, e.g., "Gabrielle Essence Perfume - Elegant Scent".
Conclusion: A very solid solution (9/10), but the layout needs adjustments for mobile responsiveness. Consider adding more mobile-specific styles to improve the experience for smaller screens! 🚀
Marked as helpful0@MarinaPerezRPosted 6 days ago@T23harms thank you so much for your time and this amazing feedback! I really appreciate it! I will definetly take in count all 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