Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Fylo storage challenge solution with CSS Flex, Grid, RWD & animations

@JanWu100

Desktop design screenshot for the Fylo data storage component coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my take on Fylo storage challenge. I added custom animations to the bar and values. I also added some simple logic to make adjusting storage taken/storage left way easier. I also added some custom logic that makes background stretch on very wide screens but keep aspect when possible. I am always open for criticism, there is a lot I can probably improve in terms of semantic html, and accessibility.

Community feedback

Ahmed Bayoumi 6,740

@Bayoumi-dev

Posted

It looks good Jan!... You have accessibility issues that need to fix.

  • Document should have one main landmark, Contain the component with <main>.
<main>
   <section class="fylo">
      //...
   </section>
</main>
  • Buttons must have discernible text, Set the attribute aria-label to describe the button... Example:
<button class="btn" aria-label="File Upload">
   //...
</button>

Hope this is helpful to you... Keep coding👍

Marked as helpful

1

@JanWu100

Posted

@Bayoumi-dev Thank You :), helpful as always!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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