Mobile First approach HTML, CSS, JavaScript

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  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!

  1

  ---

  

  Stephen Ikuomola•570

  @stephenikuomolaPosted over 1 year ago

  @0xAbdulKhalid

  Thank you so much for your review of my code. I am happy you like my code structure, which I work on while I work on challenges.

  I will study the prefer-reduced-motion query for the animation and implement it in my code, just as you have described. From your explanation, including it makes much sense as it makes it more accessible to users who interact with heavily animated websites.

  0

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  @TraversetheDOM Glad you found it helpful ! 🤠

  0