Fylo Data Storage Component

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 3 years ago

  Great to hear you enjoyed this challenge and found it useful to understand pseudo-elements, Adam! You've done an excellent job.

  For the accessibility warnings, you can get rid of them by wrapping your content in a main element. It's good to get into the habit of using semantic HTML5 elements to add structure to the page.

  I'd recommend reviewing how you're writing your alt text. Alternative text should add context to the content for people using screen readers. Therefore, the background pattern doesn't need alt text. I'd actually recommend you add that as a background-image in your CSS instead, as it is technically a background image. For the three icons, you could also wrap them in button elements and give the icons more meaningful alt text. You could imagine if this were a fully functional project that those would be buttons or links, so it's a good idea to structure your HTML as if it were a real project to get more practice.

  Have you ever tried using min-width media queries instead of max-width? It's quite a common workflow with front-end developers to use them and work mobile-first. It can often lead to less CSS code and has the benefit of loading in fewer styles for mobile users, which can be a nice performance gain. It might be worth giving it a go on a future challenge!

  I hope those points help. Keep up the great work! 👍

  Marked as helpful

  1

  ---

  

  Adam.Codes•180

  @AdamCodes42Posted over 3 years ago

  @mattstuddert Thank You 😄 I was really confused about how resolve my accessibility warning but after your suggestion I am quite clear about that. Using button element is a great idea 💡 which I will make the changes. And also will see forward that all the issues should get resolved and get a clear report!!
  Thanks Again 😊

  0
• Account deleted

  Nice job completing the challenge.

  I have a suggestion, if the fylo container was as responsive as the storage container and behaved the same way, the solution would have been a lot better rather than having one responsive container, and the other is not.

  Keep coding.

  Marked as helpful

  1

  ---

  

  Adam.Codes•180

  @AdamCodes42Posted over 3 years ago

  @thulanigamtee Thank you😄 will fix that fylo container!!😀

  0