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

Responsive news homepage using HTML and CSS

babsel4 30

@babsel4

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


How to do the hamburger menu

Community feedback

@aamirmasood0102

Posted

Hey!Your design is great except for the last section of 3 parts in mobile-screen view,margin padding issues.And to open and close the menu you have to add eventlistner to hamburger icon by javascript like below:

javascript

const nav = document.getElementById("nav"); const openMenuButton = document.getElementById("openMenuButton"); const closeMenuButton = document.getElementById("closeMenuButton"); closeMenuButton.addEventListener("click",()=>{ nav.classList.add("hidden"); closeMenuButton.classList.add("hidden"); openMenuButton.classList.remove("hidden"); }); openMenuButton.addEventListener("click",()=>{ nav.classList.remove("hidden"); openMenuButton.classList.add("hidden"); closeMenuButton.classList.remove("hidden"); });

Marked as helpful

0

babsel4 30

@babsel4

Posted

@aamirmasood0102 Thanks for the guidance I couldn't do the hamburger menu because I'm still at beginner stage Javascript. Thank you, I really appreciate it.

1

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