Attempt at resolution Product preview card component
Solution retrospective
In fact, I had a lot of difficulty with this challenge. However, what I'm most proud of was the text part and since I've been using flexbox, I believe I'm doing well.
What challenges did you encounter, and how did you overcome them?The biggest challenge I encountered was how to place the image next to the text. I managed to leave it without the white margins, however, I would have to remove all the padding I defined (I don't know if I solved it in the best way, but it was the way I found).
What specific areas of your project would you like help with?I would like you to evaluate my solution, tell me if this was one of the ways to solve the challenge and if so, where I could improve or do something different. I also had some difficulty in changing the desktop image to the mobile image, I used chatGPT to help me clear up doubts, but I still don't understand very well.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @art0fmind
Your code is clean, well-structured, and follows good HTML and CSS practices. 👍 Positive points:
Semantic elements are used properly (main, picture, h1, etc.)
Responsive design handled well with @media
Clean separation of HTML and CSS
Fonts and colors ensure good readability
🛠️ Minor improvements:
The href="*" should be replaced with "#" or a real URL to avoid errors
Use a <button> instead of <a> for the "Add to Cart" (better for accessibility and semantics)
In the CSS: html, body { height: 100%; } — make sure the body doesn’t overflow if the content gets taller than the viewport
Marked as helpful
Join 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