Skip to content
Submitted 10 days ago

News homepage

percydocomo•520
@percydocomo
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

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

To have the navigation menu in mobile design displayed like the project's design. I couldn't display it as desired and later realized CSS transition does not apply to the display property. Therefore, instead of hiding the navigation in the first place, I display it 'block' somewhere out of the screen and reposition it when the open/close button is clicked.

What challenges did you encounter, and how did you overcome them?

Getting the navigation menu displayed properly in mobile design. I use JavaScript to open and close the menu by changing the HTML style of the navigation menu.

What specific areas of your project would you like help with?

All feedback is welcome.

Community feedback

  • Andrey•2,570
    @dar-juPosted 10 days ago

    Hi, percydocomo!

    Great job!

    A few comments on the work:

    • look at the screen resolution of 1000px, some blocks are too narrow, it is considered that if there are 1-2 words in a line, then it is not very comfortable to read. This problem can be partially solved by reducing the side paddings
    • to understand that the button can be clicked, it is better to add a hand cursor to it - cursor: pointer;
    • the main image is shrinks and loses its proportions when the screen width changes, use object-fit: cover for it;
    • when opening the mobile menu, the gray background also moves out. For the background, it is better to make a display delay or darken the body
    • try not to use a fixed height for blocks, for example for .top__story, if you want to increase the amount of text in <p>, then in the mobile version the text will run into another block and the layout will break
    • before publishing, check your code in the validator, there are several errors - "Element button not allowed as child of element ul", "Element aticle not allowed as child of element section"

    Otherwise, everything is great, good luck with the development!

    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