Intro section with dropdown navigation

Solution retrospective
I'm proud of how responsive the layout is, adapting seamlessly from 320px to large screens, and the interactive dropdown navigation in the header that works on both desktop and mobile. I also enjoyed using SCSS with @use to keep the styles organized. Next time, I’d focus more on accessibility (like keyboard support) and add smooth animations to the dropdowns to enhance the user experience.
What challenges did you encounter, and how did you overcome them?I ran into some issues importing SCSS variables in Angular, getting "Undefined variable" errors. I fixed it by creating a _variables.scss file and using @use with a namespace, along with setting up the angular.json file. Another challenge was the hero section's responsiveness: I used the <picture> element to swap out images on mobile and added intermediate breakpoints (like 768px) to smooth out the transition between desktop and mobile.
What specific areas of your project would you like help with?Now, I want to focus on accessibility, making the menu keyboard- and screen reader-friendly with ARIA. I’d also like to optimize performance by implementing lazy loading for images and learn how to add smooth animations to dropdowns and the mobile menu. Lastly, I want to dive into unit testing for Angular components.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Neto's solution.
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