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

Kushal Raiβ€’ 30

@kushal-rai

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


sure there must be a better way to do it, any feedback is highly appreciated!

Community feedback

Ferβ€’ 3,970

@fernandolapaz

Posted

Hi πŸ‘‹πŸ», some of this may interest you for future projects:

  • Headings shouldn't be used to make text big or bold, that's what CSS is for. Also, using more than one <h1> is allowed but is not considered a best practice, so if you are going to use more headings maybe it would be better to use an h2 and so on.
  • It could be better to use the <del> element for the old price because the way you did it, a screen reader user won't know it has a strikethrough.
  • Consider using some CSS reset as a good practice to have a clean starting point and reduce differences between browsers. An example of CSS reset here πŸ”Ž

These are some very basic and useful ones to start:

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
  • Think about using relative units since they are better for scalable layouts. Something simple to start with would be to convert to rem (1 rem equals 16px by default), consider this suggestion especially for the font-size.

I hope it’s useful : )

Regards,

Marked as helpful

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