Design comparison
Solution retrospective
This challenge was fun because I got to play with grid a lot more. It is still something I have a difficult time grasping, but I feel much more comfortable with it in general the more I work with it.
One of the challenges I faced was with the mobile menu. As with most of my projects, everything is quite easy until I decide I want to add some animations or transitions.
What challenges did you encounter, and how did you overcome them?I ought to learn a more effective way to create mobile menus. I feel as though my solution for this was not very optimal, yet it isn't very clear to me what an optimal yet simple mobile menu would be.
Community feedback
- @Steven-AngPosted 22 days ago
Good job, it's quite close to the design. I like the animation on the menu. It's a nice touch. The transition between the icons was also smooth.
I noticed that the nav bar doesn't have spacing above when the viewport is on the desktop, and the navigation content's animation would flicker when adjusting the viewport too. I recommend using relative units for styling font size as absolute units are not quite accessible for those required to zoom in or out of the page. The picture element didn't have a source tag associated with it and the img of it doesn't have an alt tag. The hero title and body lack spacing between them on mobile. Perhaps the articles at the bottom could be broken into two columns on the tablet screen since there are empty spaces. When the menu is active, you could scroll on the body and you could tab to the elements outside the menu. From a user experience perspective, we should take disabling both of these actions into consideration. On the JavaScript side, you could use media queries and do conditional when it's matched. Also, a small note, remember to remove console.log after debugging is finished.
I hope these comments would be helpful. Happy coding.
Marked as helpful1
Please log in to post a comment
Log in with GitHub
Join 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