Skip to content
Submitted 5 months ago

Responsive Product preview card component using ReactJS

Achi Gyuse Achi•150
@Achigyus
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

What are you most proud of, and what would you do differently next time?

I am proud at how fast I was able to get the markup setup and style the websites. I'm also proud that I was able to use more responsive properties in my css such as inline-size, block-size, and margin-block-end.

What challenges did you encounter, and how did you overcome them?

My major challenge was trying to be semantically correct

What specific areas of your project would you like help with?

I would like help with my html semantics and accessibility. Thanks

Community feedback

  • Jolijn Rosendaal•340
    @Jolijn0101Posted 5 months ago

    Hi Achi Gyuse Achi, Your solution for Responsive Product preview card component looks amazing. If you would like to create more space between the letters of the perfume header you could use in css the property letter-spacing.

    Is it possible to use semantic HTML in ReactJS? If so you could change the div with a class of container for a <main> tag and the div with a class of product_preview_card for a <article> as an example.

    Frontendmentor has a learning path for accessibility. You can find it here: https://www.frontendmentor.io/articles/accessibility-learning-path-for-beginners-CEIN9c110q

    Google has a good article about semantic HTML. You can find it here: https://web.dev/learn/html/semantic-html?continue=https://web.dev/learn/html#article-https://web.dev/learn/html/semantic-html

    I hope this feedback was use full an I wish you lots of fun in coding your next project.

    Marked as helpful
    0
  • Achi Gyuse Achi•150
    @AchigyusPosted 5 months ago

    @Jolijn0101 I guess it would be more proper to call it semantic JSX 😂. Thanks for the feedback

    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