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 Challenge

@JoachimvdP

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


Getting the grid right was the most challenging part of this project. I tried many different solutions for the bottom three articles, including flexbox, but in the end I realized that using grid here was the easiest solution.

This was my first time creating a responsive menu, and for this one I referred to a great tutorial by Kevin Powell. Learning a little bit about aria and data attributes was extremely helpful. Being able to use these attributes to manipulate elements with relative ease using CSS and Javascript was quite an eye-opener.

Any feedback on my usage of Semantic HTML and on the accessibility of my code would be highly appreciated.

Community feedback

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