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

Responsive Product Preview Card with React

stautuan 140

@stautuan

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


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

This challenge only serves as an exercise to use and explore React. Along the way, I learned the use of picture element to group different source versions of the same image. A method that is used to display responsive images. You put the default image in the source tag and the mobile version in the img tag. Though React has nothing to "react", I'm proud to complete this challenge in React.

Feedback is always welcome 😊

Community feedback

@R3ygoski

Posted

Hello @stautuan, congrats for finish this challenge, your project is extremely perfect and similar to the proposed design, congrats!

A tip about your JSX/HTML, I highly recommend to use semantic HTML, because it's increase the accessibility of your page, and even improve the SEO, React have some problems with SEO, but well, in Vanilla projects, is always important to use Semantic HTML, some examples where you can use it:

  • <div className="product-img"> this tag could be changed for a <figure>, because it's the main image of the site, and because it's intrinsically linked to the main content of the page.
  • <div className="product-summary"> this tag coul be change for an <article> or <section>.

Another thing, is that you project is broking in 650px screens, but to be honest this is not a problem, because it's happening exaclty only in 650px.

And again, congrats, your project is good in many ways, keep doing this great job, if something that I said was unclear, please, comment below and I will try to help in the best possible way.

Marked as helpful

1

stautuan 140

@stautuan

Posted

@R3ygoski Hello Bernardo! 😄 Thank you so much for the feedback, I have implemented all of your suggestions! Thank you for suggesting the figure tag. I didn't quite know how to use it and now I know that I can use it in these situations. I also noticed the layout issue at 650px, and I think I have fixed it now haha (fingers crossed!). Thank you again, your feedback has been incredibly valuable! 🙏

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