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 w/ flex and grid, button interactions, js for mobile menu

@maximusDecimalusMeridius

Desktop design screenshot for the News homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

Dytoma 570

@Dytoma

Posted

Hey👋

Good job on completing this challenge👏you've done a great job

However I have some suggestions that you can use to improve your code:

  • Firstly when you submit a solution, you can have a look at the Accessibility Report and the HTML Validation Report that gives you useful information and some mistakes that you would want to solve. You can see in the reports that you use multiple IDs twice and as you know IDs have to be unique so you can change one of the duplicated ones.

  • Secondly I'll suggest you use classes instead of IDs. It helps you avoid multiple debugging problems and classes allows you to style multiple elements at a time. There's more reasons to that, you can read more about this on class vs id DEV article.

  • Lastly instead of using your <div id="banner-image"></div> empty, I suggest you append an img element to that div and then use object-fit property in CSS to style as you want.(<div class="banner-image"><img src="./assets/images/image-web-3-desktop.jpg" alt="Desktop image"/></div>).

That's all for me, Happy coding🙌

1

@maximusDecimalusMeridius

Posted

@Dytoma whoops! Thats what I get for doing a hasty copy paste for the mobile menu! I'll go back through to fix, thanks for your feedback!

1
Dytoma 570

@Dytoma

Posted

@maximusDecimalusMeridius you're welcome🙌

0

@AhmedMahrouss

Posted

good jop my bro Congrats on completing your challenge!🎊🍻If you have any questions or need further clarification, feel free to reach out to me. Happy Coding! 🎆🎊

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