Skip to content
Submitted 8 months ago

Responsive News homepage

Darek•140
@DarekRepos
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?

I'm proud that my solution is responsive and scores well using Lighthouse. if I had to work on this project again, I'd like to try creating a static template for a generator like Hugo, Eleventy, or Astro. This would allow me to reuse some components or elements. I'm not sure if my SCSS files are well-organized.

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

The main problem was figuring out how to start and plan the order in which I should create each element. The hardest part was choosing a solution to the problem. For each element, there are different techniques that can be used. I hope I selected the best one.

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

I'm still learning CSS/SCSS and HTML. I'm not sure if my favicons are great, or if my code is well-structured and readable. Are there any improvements I could make?

Community feedback

  • Bartosz Dudziak•720
    @bartoszdudziak-devPosted 6 months ago

    Overall it looks good! 🫡 I have found that the mobile navbar appears during changing the screen width. It's something wrong with position and transform.

    Marked as helpful
    1
    Darek•140
    @DarekReposPosted 6 months ago

    @bartoszdudziak-dev Thanks for the valuable feedback! I’ve fixed the issue after investigating it further. The problem was with the transition of the element. Because the default transition duration was set to 500ms, sometimes during screen size changes, the transition would take place, causing the navbar to appear incorrectly.

    css

    translate: 100vw 0;
transition: translate 500ms ease-in-out;

    I fixed this issue by adding an inline style that sets the transition to 0 when the screen size changes. When the user opens the mobile navbar, the transition duration is 500ms, allowing them to see the ease-in-out animation.

    Thank you very much!

    1

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