Submitted about 1 month ago

Responsive Design with Mobile Menu using CSS Grid and Flexbox

Austin•430

@astnio

Preview site View code

This is a solution for...News homepage

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

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

Skyler Ang•330
@skyleranglhPosted about 1 month 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 helpful
1

Please log in to post a comment

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