Inline svg modifications and Javascript animations

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted over 2 years ago

  Hey @pauladeville, great job on this project!

  Some suggestions to improve you code:

  • For accessibility purposes, it is a must to use rem/em instead of px for your CSS property values.

  For media queries, I definitely suggest using em for them. By using px your assuming that every users browser (mobile, tablet, laptop/desktop) is using a font size of 16px (this is the default size on browser). Em's will help with users whose default isn't 16px, which can sometimes cause the your content to overflow and negatively affect your layout.

  • When using buttons/links alongside the “hover” effect, you’ll run into the problem where the hover effect gets “stuck”. To prevent this, you’ll want to add the @media (hover: hover) to your CSS code and include within the query all the classes that are using the hover effect. Since not all devices support hover effects this query will then check to see if it is or not.

  Happy Coding!

  Marked as helpful

  0
• 

  Lucas 👾•104,260

  @correlucasPosted over 2 years ago

  👾Hello @pauladeville, Congratulations on completing this challenge!

  Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

  Its amazing that you’ve customized some interaction, you’ve to pay attention because when you add some hover effects you've to think that for the mobile version there's an issue that the elements with hover get stuck on the active state of the hover until you click on something else. Something you can do to avoid this problem on mobile, the stick hover, is to add a media query saying that you want hover effects only on devices that are not touch. So you can use:

  @media (hover: hover) {
  {ADD HERE ALL THE CLASSES WITH HOVER EFFECTS TO DISABLE IT ON MOBILE}
  }
  

  Use units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices.

  To save your time you can code your whole page using px and then in the end use a VsCode plugin called px to rem here's the link → https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem

  ✌️ I hope this helps you and happy coding!

  1