Responsive solution with React. Mainly Flexbox for styling.
Design comparison
Solution retrospective
I think i did a good job coding the ProductCard component. This was the most challenging component and the one I spent the most time on. As many times, when I finished the project I realized that I could have made things much simpler than I thought. I would do different the media aspect and I would start working in the project with a Mobile-First aproach. The way I did it, it made more difficult to stylize the code to reach a Responsive Design. Other detail may be the color (I didnt use variables, so i spent many time copying the hsl values manually).
What challenges did you encounter, and how did you overcome them?I had small setbacks with the CSS of some components. For example, with the position of the "Add to Cart" button and, like I said before, the Media aspect. Fortunely after some "test and error" I reached the solution for all the problems.
What specific areas of your project would you like help with?With the React logic maybe, that is the area that I am learning and practicing now.
Community feedback
- @IzykGitPosted 4 months ago
Good work!
However remember that semantic HTML still applies in React! So instead of using divs try to use semantic HTML tags in pages and components such as <main> and <section>. This will help improve SEO and accessibility in your React project.
Keep up the good work!
1@nanopivaPosted 4 months agoThank you very much for the feedback! Of course you are right and tomorrow I will apply the corresponding semantic HTML tags.
0
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