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

Made with HTML, CSS - Fylo data storage component (Mobile first)

@shibuwd

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


I really appreciate it if you left feedback.

Community feedback

P
Grace 27,950

@grace-snow

Posted

Hello

I'm trying to figure out the right html semantics and it's hard on this . Should those icons be buttons perhaps? Even if they are just images, you would need to empty or rewrite the alt values on those. Alt are meant to be human-readable descriptions, not hyphen joined words as you have here. Best to read up more about how to write good alt text anyway.

The other things I wonder about are

  • whether you could style the progress bar element to look like this. I think you can and that is the element perfect for this challenge. Here is how to style that https://css-tricks.com/html5-progress-element/
  • capitalisation should be done in css not in Html or assistive technology will not read "left". They would say "L-E-F-T".

Other than these all looks good at a glance

Marked as helpful

2

@shibuwd

Posted

@grace-snow Thank you so much for your advice. Your advice is really helpful to improve my coding skill.

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