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

card component using flex

Mohammad 160

@swkarimi

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@VCarames

Posted

Hey there! 👋 Here are some suggestions to help improve your code:

  • To not only improve your HTML code but to also identify the main content of you page, you will want to wrap your entire component inside the main element.

More Info:📚

MDN Main Element

  • The only heading in this component, is the name of the perfume; “Gabrielle Essence Eau De Parfum” . The rest of the text should be wrapped in a paragraph element.
  • Currently, the old price (169.99) 🏷 is not being properly announced to screen readers. To fix this, you are going to wrap the the price in a del element and inside it you will add a span element with an sr-only class that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.

More Info:📚

Del Element

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding!🎄🎁

Marked as helpful

0

Mohammad 160

@swkarimi

Posted

@vcarames Great offers, thank you very much.

1

@catherineisonline

Posted

Looks cool! I would also make the button change color on hover, looks more interactive 😊

Marked as helpful

0

Mohammad 160

@swkarimi

Posted

@catherineisonline Good point, I forgot it.

0

@Mostafa-ninoo

Posted

you have to have one main heading for your page so try to use an h1 for your page. و البتوفيق

0

Mohammad 160

@swkarimi

Posted

@Mostafa-ninoo Thank you for offer.

0

@jbingham223

Posted

Looks great on desktop, almost pixel perfect! Make it responsive on mobile and it'll be 100%

0

Mohammad 160

@swkarimi

Posted

@jbingham223 thank you.

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