
Submitted almost 4 years ago
Loopstudios - Sass, intersection observer API, mobile first
@tediko
Design comparison
SolutionDesign
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! π
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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