Responsive Product preview page using HTML CSS(Flex)
Design comparison
Community feedback
- @romila2003Posted over 2 years ago
Hi Rohit,
Congratulations 🎉 on completing your second challenge, it was a great attempt but there are a number of issues I want to address:
- When looking at your code and design, I noticed you took a desktop-first approach instead of the mobile-first approach. As a result, when adjusting the screen size to mobile and tablet, the card looks kind of awkward. To solve this, it is ideal to take the mobile-first approach so that it would be easier to change the elements and texts as you increase the screen size. There are many articles that explain the benefits in more detail. If you are unsure about this concept, you should research more about media queries and mobile-first approach.
- It is best practice to wrap your main content within the
main
tag as it is semantically correct. - You should give your button a type e.g.
<button type="submit"></button>
Regarding some minor issues about the design: 4. The word 'perfume' should have a wider space for the
letter-spacing
property e.g.letter-spacing: 5px;
5. The padding around the big title, seems very large in comparison to the design. 6. The space between the price and the button is also very large.Overall, great attempt and wish you success with your future projects so keep coding 👍.
Marked as helpful0@rohitd99Posted over 2 years ago@romila2003 Thank you for your feedback , I will look into the mobile-first approach and also the other minor issues . Really appreciate you taking the time to go through the code.
1@rohitd99Posted over 2 years ago@romila2003 Hi there I've added some media queries to make it look better.
Also instead of the main tag I added the
role="main"
since adding the main tag broke it for some reason also cleared some other accessibility issues with ARIA. Looking forward for your suggestions, thank you.1
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