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 data storage component

@kzaleskaa

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


Please provide your feedback...any suggestions are most welcome (especially about progress bar 😬😬).

Community feedback

Anar 700

@anar-sol

Posted

Hi!

I haven't done this challenge yet, but I'll try to give you my opinion

According to MDN <progress> page, this element is intended to represent the completion progress of a task. Do you think this is the most suitable element to represent the amount of storage space used? I could be wrong, but I think <meter> is more appropriate in this context.

Concerning the style, both <pregress> and <meter> seem to be difficult to customize consistently across different browsers...I haven't looked into this subject yet.

You can add overflow='hidden' to the <progress> element to prevent the blue bar from overflowing

MDN progress page: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress MDN meter page: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter

Marked as helpful

0

@kzaleskaa

Posted

@anar-sol I didn't know about <meter> but it seems to be a better option than <progress>. I had many problems with applying it ot various browser so now I changed it to <div>. I also added some animation to make it more interesting.

0
Anar 700

@anar-sol

Posted

@kzaleskaa Good job, it's much better now =)

1

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