Skip to content
Submitted about 3 years ago

HTML, CSS

Maciekexe•60
@maciekexe
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Improve something?

Code

Please log in to post a comment

Log in

Community feedback

  • Tiago José•300
    @tiago-jv0

    There are a few things i would recommend you to learn, for exaple :

    1. BEM methodology - is used to improve your css selectors and make your html structure more descriptive

    2. Usage of new layout techniques like Grid or Flexbox as mentioned above

    3. Css variables - so you can put all your repeatable css values inside a central place

    Marked as helpful
  • Account deleted

    Hello 😊

    Your current solution is a good start, however there are a couple things that could be improved:

    1. I would recommend always making it obvious when something can be interacted with - In this case, the button. Changing the cursor to a pointer and adding a hover effect would be a great addition.

    2. It looks like you used a table for the layout - I would recommend looking into Flexbox and CSS Grid for responsive designs - Tables should be used for data that is presented as a table, not as a layout tool. Kevin Powell has amazing courses for both of these (Flexbox Simplified, and Responsive Design Bootcamp specifically - The Bootcamp one has a section for Grid).

    3. Your alt tag on the image should be a little bit more descriptive, generally speaking - These are meant to give an idea of what the image is, in this case it doesn't really explain what the image is.

    4. You are missing the <main> tag after <body> - This should always be included for accessibility.

    Marked as helpful

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