Skip to content
Submitted over 2 years ago

Full Responsive preview card

Atharva Hinge•80
@36atharva
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

Community feedback

  • Radek•490
    @RadexmanPosted over 2 years ago

    Hey there! I’ve checked your code and if you don’t mind I will give you some feedback :)

    First of all the class naming convention, we typically want to name our id’s and classes in a semantic way. Don’t get me wrong, “right” and “left” are fine but when other dev will be reading our code he might have a little headache, it is good practice to name our classes in short self-explanatory way eg. left - “img-box”, right - “product-description”. There is no need to add a class to our button if we have only one button on our page, just use the button selector.

    In your code h2 appears before h1, when using headings we follow a so called hierarchy, we want to start from h1and move our way to h6 and if the styling is not how we imagined it, just change it in css. Here is some good resource on that:

    https://www.contentkingapp.com/academy/headings/

    Hope you find it somewhat useful, good luck on next projects!

    Happy Coding!

    Marked as helpful
    0
    Atharva Hinge•80
    @36atharvaPosted over 2 years ago

    @Radexman Thankyou for your suggestions! Will remember these in future :)

    0
  • MURRAY122•280
    @MURRAY122Posted over 2 years ago

    Hi Atharva Hinge,

    Congrats on your first solution! I had a quick look at the code and think this might help.

    • Use main tag to indicate a landmark. This helps with the overall structure of the HTML and improves accessibility.
    <body>
<main></main>
<footer></footer>
</body>
    • You should also think about your heading levels, these should go in order from h1 to h6.
    • Your alt text for the image shouldn't contain the words 'picture', 'photo' or 'image'. Perhaps just the name of the parfum and the word bottle would do.

    Hope these might help for you.

    Marked as helpful
    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