Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

News Homepage solution

@ClaireLise-dev

Desktop design screenshot for the News homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Here is my solution for the News homepage challenge!

I still need help for the mobile menu, I don't know how to make an hamburger menu with HTML/CSS so for now I just put the logo and hamburger icon menu!

Also I have difficulties to put everything in a 1440px screen without scrolling.

Any help is very welcome!

Community feedback

P
Yasmine 700

@Yasmine10

Posted

Hi @ClaireLise-dev 👋

Congratulations on finishing the challenge! It looks really good!

I don't see any problems with scrolling in a 1440px screen. To me it looks good.

For the mobile menu you actually don't need to write a second <nav> like you have done. You can just use a media query and change the styling when it's below or above a certain breakpoint.

And to make the mobile menu with only HTML and CSS, you can use a hidden checkbox with a label. In the label you place the hamburger icon and depending on when the checkbox is checked or not, you can show or hide the mobile menu. I've got a codepen that shows you how to do this 😊

Hope this helps!

Marked as helpful

0

@ClaireLise-dev

Posted

@Yasmine10 Thanks for your comment! I thought of the checkbox solution for the menu, but I couldn't find the way to do it, thanks for your codepen!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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