Design comparison
Solution retrospective
Hello!! This is my second project 🫣
This project is almost the same as previous project which the product preview card component. I'm quite happy for the result. Let me know which part I should improve, I would love to hear any suggestions from you all and it will means a lot to me!
Have a good day all. 😊💘
Community feedback
- @finkenmannPosted almost 2 years ago
I like your approach to implementing responsive behavior. I had to think about how to implement that as well, but came up with a different solution.
What I like is that you don't make the width before the breakpoint grow even more, which just makes the page fall apart. (That's why I chose my breakpoint earlier, but got other problems ;-) Also nice is the solution for the desktop, where you let the elements grow in height. In real life you could use a higher resolution photo, so that it can grow in size.
Hmm... let's see if I should rebuild my version. But I'll wait and see if there is any feedback.
Translated with www.DeepL.com/Translator (free version)
Marked as helpful0@stkhalishaPosted almost 2 years ago@finkenmann Hi Pierre! Thanks for your feedback :)
0 - @HassiaiPosted almost 2 years ago
there is no need to give the image a height of 100% , add display: block to it if there is a little space between the image and the content
Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful0@stkhalishaPosted almost 2 years ago@Hassiai Hi Hassia! ☺️ Nice to know you. Thank you for your feedback! already fixed those things as you suggested!
0 - @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
- The images serve no other purpose than to be decorative; It adds no value. The
alt tag
should left blank and have anaria-hidden=“true”
to hides it from assistive technology.
More Info:📚
https://www.w3.org/WAI/tutorials/images/
- This challenges requires the use of two images 🎑 for different breakpoints. The
picture
element will facilitate this.
Here is an example of how it works: EXAMPLE
Syntax:
<picture> <source media="(min-width: )" srcset=""> <img src="" alt=""> </picture>
More Info:📚
https://www.w3schools.com/html/html_images_picture.asp
- The statistics at the bottom are a list, so it should be built using an
unordered List
element.
More Info:📚
MDN <ul>: The Unordered List element
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
Marked as helpful0@stkhalishaPosted almost 2 years agoalready fixed those things as you suggested! As usual thank you @vcarames ☺️
0 - The images serve no other purpose than to be decorative; It adds no value. The
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