@mattstuddert
Posted
Nice work on this challenge, Soumya! Your solution looks great. Did you learn anything new while working through this project?
My main piece of feedback would be to not use ranges in your media queries. For example, you've got queries like these:
@media only screen and (min-width: 421px) and (max-width: 767px) {
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
}
When you write queries like this it often leads to a lot of repetition and duplicate code. Instead, I typically use only min-width
media queries and also use values like the minmax()
function in CSS Grid to reduce the times I'm using media queries for layout shifts.
You've done a really good job on this challenge. I hope you enjoyed working through it! 🙂
@csoumya14
Posted
@mattstuddert
Hi Matt, Thanks for the feedback. I was uncertain about using media queries and this helps me a lot. I learned few things while working on this project.
- I tried to make the navigation bar accessible using React hooks.
- I also learned how to scroll to the top while navigating to different pages using React Router and hooks.
@mattstuddert
Posted
@csoumya14 nice! That's great to hear you picked up some new tricks!