Submitted 4 months ago

Product preview card (SCSS, BEM)

Gwenaël Magnenat• 1,210

@gmagnenat

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

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

Abdul Khaliq 🚀• 72,660

@0xabdulkhaliq

Posted 4 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 with text-decoration: line-through css property.

Instead of customizing span there's actually a native semantic html element which comes handy in these situations. it is del 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 helpful

Gwenaël Magnenat• 1,210

@gmagnenat

Posted 4 months ago

Hi @0xabdulkhalid thanks a lot for checking out my solution and thank you for the tip !

Gwenaël Magnenat• 1,210

@gmagnenat

Posted 4 months ago

@0xabdulkhalid I updated my solution with your suggestion. Thanks again for the tip 👍 !

Abdul Khaliq 🚀• 72,660

@0xabdulkhaliq

Posted 4 months ago

You're welcome @gmagnenat !

Please log in to post a comment

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