Mobile First approach HTML, CSS, JavaScript

Solution retrospective
Hello 👋🏽,
I have just concluded yet another project, making it the last project for the Newbie challenge section for JavaScript. I did not find much of an issue on the one, to be honest, but as always, I would like to hear some suggestions from the community on how my code could be improved.
I got to learn about two HTML attributes to improve accessibility as well, and these are:
aria-invalid
aria-errormessage
Thank you!!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @0xabdulkhaliq
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
ANIMATION 🟡:
- Wow, the outcome of solution is amazing and the code is structured well also. But the part needs to be improved is to remove the animation of the illustration oscillation on devices where the users set their animations preferences to none
- The
prefers-reduced-motion
media query in CSS allows you to target users who have expressed a preference for reduced motion on their devices or browsers.
- This is particularly useful for accommodating individuals with motion sensitivity or vestibular disorders. You can use this media query to adjust your CSS styles and provide a more comfortable experience for such users.
- Example:
/* Default styles */ .element { /* your default styles here */ } /* Reduced motion styles */ @media (prefers-reduced-motion: reduce) { .element { /* styles for reduced motion here */ } }
- When a user's device or browser indicates a preference for reduced motion, the styles inside the
@media (prefers-reduced-motion: reduce)
block will be applied, overriding the default styles. You can customize the styles within the media query to suit your specific requirements, such as reducing or removing animations, transitions, or any other motion-related effects.
- It's important to note that the
prefers-reduced-motion
media query is supported in modern browsers, So we don't wanna worry to implement this method on our solution
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
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