Skip to content
Submitted over 2 years ago

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

Jan Wągrowski•190
@JanWu100
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Fylo data storage component
  • HTML
  • CSS
2junior

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-devPosted over 2 years ago

    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
    Jan Wągrowski•190
    @JanWu100Posted over 2 years ago

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

    0

Please log in to post a comment

Log in with GitHub

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