Loopstudios - Sass, intersection observer API, mobile first

Solution retrospective
Hello👋!
That was a simple and fun challenge, although there was room to try new things and learn something new.
- Implement
prefers-reduced-motion
CSS media feature which is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses. Prevent animations in brief. Spotted at @brasspetals solution 😅 - Added lazy load animations for cards. I did it with Intersection Observer API.
- Added sticky nav menu also using Intersection Observer API.
- Tried to create more accessible mobile navigation. Used the
aria-expanded
andaria-controls
attributes. - As for the Sass part. In the project i used @use since it's recommended to using this instead of @import Kevin Powell video about it. Thanks to @RayaneBengaoui i saw his comment about this.
Thanks for @grace-snow for helping me with keyboard navigation. Since i change visible order of .creations I had to create other button to prevent firstly tab on last element and only then on first. No specific questions here but any additional feedback will be appreciated!
Thanks! 😁
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on tediko'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