Submitted 7 months ago
Responsive Product Preview Card using flexbox, css and html
@JCrotzer
Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
Using rem and em for sizes for better responsiveness.
What challenges did you encounter, and how did you overcome them?n/a
What specific areas of your project would you like help with?n/a
Community feedback
- @akmalov11cPosted 7 months ago
Great job on the layout of your main section! Now, let's provide some feedback:
- Your HTML structure is simple and effective, using appropriate tags for different elements.
- The CSS styling is well-organized and easy to follow, with clear comments.
- The use of CSS variables for colors enhances maintainability and consistency.
- The design is responsive, adjusting smoothly between mobile and desktop views thanks to the media queries.
- To improve consistency and visual appeal, consider increasing the border-radius for the ".mobile-img" and ".desktop-img" elements to match the rounded corners of the container.
- Paying attention to padding throughout the design, especially within ".card-content", can help create better spacing and alignment for your content.
- Consider using the <picture> element to provide different image sources based on the device's viewport size. This can improve performance and optimize image loading for users on various devices, ensuring they receive the most appropriate image resolution.
Overall, your code shows a good understanding of HTML and CSS. Keep refining your skills, and don't hesitate to reach out if you need further assistance. Keep up the good work!
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