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

@Rchanis

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 type of feedback is welcome. I feel I am improving this is my second challenge.

Should I use percentages instead of px for the grid?

Community feedback

rui-rmv 20

@rui-rmv

Posted

So, good job on completing this challenge :) I have a few suggestions to you.

  1. You did well to always use classes for stilling, but when choosing the class name, it should be meaningful and not related to styling (e.g. background_color is not a good name). Also please don't use capitalization on class names or underscores. Always write the class-names-like-this.

  2. Remove the background_color div and add the corresponding style to the body tag.

  3. Use a code formatter like Prettier (easy to use on VSCode)

  4. Use a CSS reset sheet like this one: https://meyerweb.com/eric/tools/css/reset/. Your HTML shouldn't be used because of styling.

  5. You did good to have the item-title as an h1 element and the item-description as a paragraph. For the price you could use a div since there really isn't any html tag with that meaning. You should strive to write semantic HTML

Marked as helpful

1

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