Product preview card (SCSS, BEM)
Design comparison
Solution retrospective
I find my solution close to the design, so I'm quite happy about it. I learned more about the use of pixel vs rems and tried to apply this at the maximum in this solution.
What challenges did you encounter, and how did you overcome them?It took me some time to figure out how to handle properly the different spacing and sizes. At first the challenge seems easy but there are many small details. With proper line-height and letter-spacing it helped get as close as possible to the design. I wrapped the card content in a form with a submit button, I will search more if there are specific markup to add to improve accessibility.
What specific areas of your project would you like help with?I'd like suggestion on how to use more mixins to reduce the main.scss. If you can give me recommendation on accessibility markup I could add?
Community feedback
- @0xabdulkhaliqPosted 7 months ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have a suggestion regarding your code that I believe will be of great interest to you.
HTML 🏷️:
- I need to address a minor semantic improvement which may help accessibility devices to properly announce the old price of the perfume.
- Currently the old price is not being properly announced, you have used
span
element for that withtext-decoration: line-through
css property.
- Instead of customizing
span
there's actually a native semantic html element which comes handy in these situations. it isdel
element
- So you can use like this
<del>$169.99</del>
- These are the tips which improves the accessibility in real world situations.
- If you have any questions or need further clarification, you can always check out
my submission
and/or feel free to reach out to me.
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful3@gmagnenatPosted 7 months agoHi @0xabdulkhalid thanks a lot for checking out my solution and thank you for the tip !
0@gmagnenatPosted 7 months ago@0xabdulkhalid I updated my solution with your suggestion. Thanks again for the tip 👍 !
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