Skip to content
Submitted over 2 years ago

HTML, CSS

Maciekexe•60
@maciekexe
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Improve something?

Community feedback

  • Tiago José•300
    @tiago-jv0Posted over 2 years ago

    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
    0
  • 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
    0
    Maciekexe•60
    @maciekexePosted over 2 years ago

    @LazyDuckling Thank you I will try not to forget about it in future projects and I will try to improve this one.

    0

Please log in to post a comment

Log in with GitHub

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