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 using css grid and flexbox.

@ilyass-oulhaj

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


Any feedback is welcome . Any tips to improve my code ??

Community feedback

P. Ricardo 2,370

@pRicard0

Posted

Some HTML tips

  • You should use the tag <em> instead of a span with the text "$149.99". The <em> tag is used to define emphasized text. The content inside is typically displayed in italic. A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.
  • You should use the tag <s> instead of a span with the text "$169.99". The <s> tag specifies text that is no longer correct, accurate or relevant. The text will be displayed with a line through it by default.
  • You must describe the product in the alt attribute.

CSS tip

  • You should use rem instead of pixel. Using the "rem" unit allows for a more scalable and flexible way to size elements on a page because if you change the font-size of the root element, all elements sized with the "rem" unit will be updated automatically to maintain their relative size.

Marked as helpful

0

@ilyass-oulhaj

Posted

@pRicard0 Thank you very much , I really apreciate your feedback and adivice. Thank You again .

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