Design comparison
Solution retrospective
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
- @R3ygoskiPosted 7 months ago
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 helpful1@stautuanPosted 7 months ago@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 GitHubJoin 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