Skip to content
Submitted almost 3 years ago

Responsive News Homepage for Mobile and Desktop

NicholasChristopherBlake•130
@NicholasChristopherBlake
A solution to the News homepage challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Here's my solution for the New's Homepage. The mobile and desktop versions. Would like to hear any suggestions :) I would be very grateful to hear how to add transition on the menu toggle, so it would appear more smoothly.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Cats-n-coffee•670
    @Cats-n-coffee

    Hi NicholasChristopherBlake!

    I think your solution looks great! I like the fixed navbar on the mobile version, I find it very helpful. One suggestion I would have is too look into transitions in general (to start answering your question). One easy transition to add is for :hover effects which you can easily deal with using this https://developer.mozilla.org/en-US/docs/Web/CSS/transition. About your mobile menu, it seems that you're using the display property to hide/show the menu, but this isn't a property that you can create transitions with easily. You could look into using transform or width, or even left or right if you're using absolute positioning (if I remember correctly). You can look into @keyframes to do more complex animations (probably unnecessary for this drawer menu), it's very fun to use!

    There are many ways to create transitions, and regarding the display property with value of none, it won't be accessible by screen readers last time I read about this. Many people will suggest many things, so I find this SO post helpful with that https://stackoverflow.com/questions/3331353/transitions-on-the-css-display-property .

    Hope this helps!

    Marked as helpful

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