Skip to content
Submitted over 1 year ago

News-Homepage with css and grid

Nayan Bhatt•980
@freaky4wrld
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...News homepage
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

This one took me more time, than the previous two solutions, open to all the optimized approach. Also I found a issue with my code that when I make the screen size to mobile screen in my Desktop, the sidebar pops up, but it works great on the real mobile phone. Thanks for the help and appreciation, if I qualified with that :)

Community feedback

  • Boots 😺•1,590
    @adityaphasuPosted over 1 year ago

    Hi!

    Don't worry about the sidebar popping up because it happens as soon the media query hits for the navbar at the mobile screen the ul goes from flex to absolute and since you have a transition on the ul you get that slight pop up as it transitions. If you remove the transition it won't happen but this is not necessary as transitions add to user experience. This only happens if you use devtools to stimulate the screens that's why it seems normal when you open the page on mobile.

    Some few suggestions regarding semantics:

    • Instead of using div for .article you should use the actual <article> tag.
    • For .aside-info div you can use the <aside> tag instead.

    You have done quite well actually! Good job!🙌🏻

    Keep up the hard work and happy coding!🕺🏻

    Marked as helpful
    0

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