Skip to content
Submitted over 3 years ago

fylo data storage component - flexbox | mobile-first | responsive

Anosha Ahmed•9,300
@anoshaahmed
A solution to the Fylo data storage component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I actually put quite a few new properties into practice for this solution, so I really enjoyed this challenge! Please leave some suggestions to help me improve, thank you.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

  • Elroy Toscano•630
    @elroytoscano

    Hi Anosha, great job with the pixel perfect design and clearing Accessibility and HTML tests.

    Here are some areas you may improve:

    1. As Aakash mentioned, your icons class and sub-class icon could use visual feedback, like change in backgroundColor and cursor:pointer.
    2. You may consider improving semantics by using an unordered list ul for icons instead of div and li for the icon div. Again good job with providing alt for the img tags.
    3. The progress bar from 0GB to 1000GB indicates a range and you can use <input type="range"/> followed by labels. This will make your progress bar code semantically correct. Here's an example: https://jsfiddle.net/okyf0omz/3/

    Hope this helps.

    Marked as helpful
  • Hamza-Noah•310
    @Hamza-Noah

    this is absolutely amazing you made it identical 100% with the design keep going your amazing work

    Marked as helpful
  • Matt Studdert•13,611
    @mattstuddert

    Excellent work on this challenge, Anosha! The solutions you've been submitting are really high quality! 🙌

    You've received some great feedback so far. One thing I'll add is that you're quite right about the brand name being a good h1 in this design, but I'd recommend wrapping the h1 around the logo and changing the image alt text to "Fylo". The alt text of "Logo" isn't very descriptive, as it should say who the logo is for. Wrapping the img in a h1 will mean the "Fylo" text is defined as a h1, which will have the desired effect.

    I hope that helps. Keep up the great work! 👍

    Marked as helpful
  • I•300
    @igor-ostojic

    How do you always make the design pixel perfect ?

    Do you use Figma and copy all the widths and heights pixels or do you eyeball it ?

    Amazing job !

    Marked as helpful
  • cacosted•570
    @cacosted

    Hello your solution link is broken, you should check it out

    Marked as helpful
  • Danilo Blas•6,300
    @Sdann26

    It looks beautiful ^^,

    Marked as helpful
  • MUHAMMED ARSHAK K V•50
    @arshaqkv

    ❤️

    Marked as helpful
  • oussama ayadi•470
    @ayadi1

    great job

    Marked as helpful
  • Dusvy_M•510
    @dovelm

    beautiful... 40 hearts!!!

    Marked as helpful
  • GamuchiraiS•130
    @GamuchiraiS

    Oh my goodness, this looks fantastic!

    Marked as helpful
  • Kehinde•680
    @jonathan401

    this is amazing, how did you design your solution to the be 100% identical to the challenge? so beautiful

    Marked as helpful
  • Aakash Verma•9,500
    @skyv26

    Awesome, Really Good work, But I think your active states are missing.

    Marked as helpful
  • Alan Mendoza•100
    @llalanmendozall

    Amazing!

    Marked as helpful

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