Animated fylo data storage component

Community feedback

• 

  Gift Richard•520

  @fibonacci001Posted about 1 year ago

  Hey there! 👋

  You did an awesome job on this data storage component challenge. The overall layout and styling look great! I just have a few friendly suggestions that could help take it to the next level:

  🌟 For accessibility, the <div> with id="cart" should be a <button> element instead. That way screen readers can identify it as a clickable button. Don't forget to add cursor: pointer to show the hand icon on hover.

  🌟 I noticed the <main> tag only wraps part of the content. Try wrapping the entire component in <main> so assistive technologies can identify the main content correctly.

  🌟 Box-sizing: border-box is your best friend! It makes width/height include padding and borders. No more math headaches 😅. Check it out here.

  🌟 Classes over IDs can help avoid specificity issues down the road. IDs are best for JS hooks.

  🌟 Avoid fixed heights, let the content determine the height for responsiveness.

  🌟 Rem/em units > vw units for font-size. More consistent across devices.

  🌟 For two equal Flex columns, width: 50% on both works like a charm!

  I hope these tips help take your skills to the next level! Your solution is looking awesome, and most importantly, keep enjoying the process. Coding is fun, creative, and empowering. Wishing you the best on your next project! 🚀

  Marked as helpful

  1