Product Preview Card, using React and Responsive layout
Design comparison
Solution retrospective
Everything.
What challenges did you encounter, and how did you overcome them?It was good and easy.
What specific areas of your project would you like help with?not at the moment.
Community feedback
- @R3ygoskiPosted 7 months ago
Hello Nikhil, you project is very good, congrats for conclude this challenge.
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, a example where you can use it:
<div className="container">
this tag could be a<main>
tag, because it's the main content of your page.<div className="card">
this tag could be an<article>
because it's a self explanatory content of your page.
And this Alert was a very good ideia to increase the creativity and singularity of your project.
And again, congrats, your project is very responsive and similar to the proposed design, keep doing this great job. If something I said was unclear, please, comment below and I will try to help in the best possible way.
Marked as helpful0@nikbhaladhare2104Posted 7 months ago@R3ygoski Hi, Thank you for pointing it out. My first thought was to do the same as you have mentioned. But was trying different things. Article tag is a good choice for self explanatory content.
1 - @sivaprasath2004Posted 7 months ago
Hello i`ll wishing for your completion project solution.
- I will give some suggestion i believe its used for improve your skill.
- In CSS You will use
.card-content { padding: 30px; }
- I will recomand for Using rem values for padding provides a scalable and flexible approach, especially when considering accessibility and responsive design.
.card-content { padding: 3rem; }
0@nikbhaladhare2104Posted 7 months ago@sivaprasath2004 Thank you for pointing it out. I am still new to rem, em concepts but will try to apply them whenever I can
0@sivaprasath2004Posted 7 months agoem
andrem
also good practise.@nikbhaladhare21041
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