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 Home Page using Astro and Sass

P
Kamran Kianiā€¢ 630

@kaamiik

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


What are you most proud of, and what would you do differently next time?

Iā€™m most proud of how I focused on accessibility this time around. I ensured that my components and the hamburger menu in the mobile view were accessible, which is something I put a lot of effort into. If I were to do this project again, I would use a more robust framework like React to handle the state management and interactivity in a more scalable way.

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

The main challenge was implementing the CSS layout for the desktop version, especially using CSS Grid and subgrid to achieve the desired design. To tackle this, I broke down the layout into smaller, manageable components and used a combination of Astro's component structure and SASS for styling. I also faced difficulties in making the hamburger menu accessible, so I researched best practices and ensured it worked seamlessly with keyboard navigation and screen readers.

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

Iā€™d like feedback on the accessibility aspects of my project, particularly regarding the implementation of the hamburger menu. I want to make sure it meets all accessibility standards and provides a smooth experience for users with assistive technologies.

Community feedback

P
Marc Francisā€¢ 600

@marcfranciss

Posted

Impressive solution to this challenge! šŸ’Æ

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