Submitted 3 months ago

Responsive Product preview card component using ReactJS

Achi Gyuse Achi• 130

@Achigyus

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

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

@Jolijn0101

Posted 3 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

Achi Gyuse Achi• 130

@Achigyus

Posted 3 months ago

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

Please log in to post a comment

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