Skip to content
Submitted about 2 years ago

product-preview-card-component-main

Dean Russell Rivers•40
@deanrivers
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

  1. Getting it responsive nicely.
  2. The media query. Maybe there is a better way.
  3. Would like some tips on setting up classes to keep css industry standard for something like this.

Community feedback

  • Muhammad Bilal•160
    @mbilal-xPosted about 2 years ago

    Hi Dean!

    Congratulations on completing you first challenege here.

    here is some feedback and answer to you question:

    • media queries are the most fundamental way to make you code responsive, getting a hang of it is always good before moving on to using CSS frameworks like bootstrap and tailwind.

    • A well know and accepted method for naming your CSS classes is the BEM naming system. you can look that up.

    • and yes I see you have added your styles in the same html file. Try using a separate styles.css file and link it to you html. This is more useful and scalable approach .

    Hope this helps, goodluck

    Marked as helpful
    1
    Dean Russell Rivers•40
    @deanriversPosted about 2 years ago

    @mbilal-x Thank you for the feedback Muhammad! Will research "BEM".

    1

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