Design comparison
Solution retrospective
LetsGO
Community feedback
- @PeshwariNaanPosted almost 2 years ago
Hello. Nice work on completing the challenge.
Here are a couple tips that might help you with your code:
-
Try not to use useEffect to control things like media queries. It tends to over complicate simple applications and you can run into trouble. The best practice is always keep things as simple as possible. You can see that you run into problems when the screen size gets between 730px and 500px and your buttons get pushed out of your cards. With css media queries its easier to adjust things like the margin/padding between the button and text in the card and you have better control of the styling.
-
As with useEffect, only have useState when necessary. I know you are learning and it's good to explore the different hooks in React, but as you start to develop more complex apps in the future try to minimize stateful components.
-
Wrap your root div in your index.html file with
<main>
for accessibility and it will clear up your landmark warnings you are seeing.
I hope this is helpful - Good luck and happy coding 😃
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