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-main

@deanrivers

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


  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

@mbilal-x

Posted

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

@deanrivers

Posted

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

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