Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product preview card component | BEM and SASS

#bem#sass/scss

@JairoAtoche

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


First time using Sass. I´d like to know your feedback ^^

Community feedback

P
ApplePieGiraffe 30,565

@ApplePieGiraffe

Posted

Greetings, Jairo Atoche! 👋

Great job on this challenge! 👏 It's great that you're using Sass to add superpowers to your CSS! 😆 I hope you enjoyed using it!

Here are one or two things I'd like to suggest,

  • Getting rid of the header tag in your HTML (since it is empty and therefore unnecessary in this challenge).
  • Using a tag such as the span or p for the price in the card component (not a heading tag, since it is not a heading for anything).
  • Setting the alt text for the icon inside the button to an empty string so that it will be ignored by screen readers (since it is not nearly as important as the text in the button and does not need to be read out loud). 😉

Hope you find this helpful. 😊

Keep coding (and happy coding, too)! 😁

Marked as helpful

1
nerometa 250

@nerometa

Posted

Dude, this is so well done! Congratulations🎉 I legit have nothing to say since it's so good, even HTML and accessibility issues aren't present.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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