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

Community feedback

• 

  Elroy Toscano•630

  @elroytoscanoPosted almost 3 years ago

  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

  3

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @elroytoscano Wow, those are some things I didn't know!!! Thank you!!

  1

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @elroytoscano Just added some active-states! (My git page takes an hour to update after changes though.)

  I didn't change .icons div to ul but i'll remember to do that in the future!

  I can't give that input-type to the progress bar since it's not supposed to take INPUT from the USER directly, however I did watch a YouTube just now to learn how to design a progress bar better.

  Thank you for the suggestions!

  1

  

  Elroy Toscano•630

  @elroytoscanoPosted almost 3 years ago

  @anoshaahmed Oh yeah, you're not taking an input. With respect to input range, I'll check it out later and get back to you as I have some work right now.

  You're welcome. Glad I could help :)

  Marked as helpful

  1

  

  Elroy Toscano•630

  @elroytoscanoPosted almost 3 years ago

  @anoshaahmed There are two html elements you can use for displaying a progress, progress and meter, progress is used when completing a task while meter is used when considering a known range, as in your use case. Don't forget to wrap it in a form element.

  Here's a simple example: https://codepen.io/elroytoscano/pen/ExwpjgE

  Marked as helpful

  1

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @elroytoscano thank u so much!!!!!! ^_^

  1
• 

  Hamza-Noah•300

  @Hamza-NoahPosted almost 3 years ago

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

  Marked as helpful

  3

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @Hamza-Noah thanks Hamza!

  1
• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 3 years ago

  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

  2

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @mattstuddert Thank you for commenting on my solution Matt and for the generous compliment !!!!! And THANK YOU for telling me that, because I did not know I could use an image as a heading!

  1

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 3 years ago

  @anoshaahmed, you're welcome!

  Marked as helpful

  1

  

  Elroy Toscano•630

  @elroytoscanoPosted almost 3 years ago

  @mattstuddert That's a brilliant way of using a h1 with a logo. Thanks for the feedback Matt, it can be used extensively across several designs 👍

  Marked as helpful

  1

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 3 years ago

  @elroytoscano, no problem! For a lot of designs, for example, whole pages, using a h1 to wrap the logo isn't the best solution. But in this particular instance, it is.

  Your h1 should be reserved for the most important content on the page. So for larger pages and multi-page websites, this typically wouldn't be the logo.

  I hope that helps 👍

  Marked as helpful

  2
• 

  Igor Ostojic•300

  @igor-ostojicPosted almost 3 years ago

  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

  2

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @igor-ostojic Eyeball it systematically

  1

  

  xZAYEDx•250

  @xZAYEDxPosted almost 3 years ago

  @anoshaahmed how exactly?? could you share some tips please. I really love your work and I want to be as good as you 💯

  0
• 

  cacosted•570

  @cacostedPosted almost 3 years ago

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

  Marked as helpful

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @caastech thank u for letting me know. fixed it

  0
• 

  Danilo Blas•6,300

  @Sdann26Posted almost 3 years ago

  It looks beautiful ^^,

  Marked as helpful

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @Sdann26 thank u Danilo !! c:

  1
• 

  MUHAMMED ARSHAK K V•50

  @arshaqkvPosted almost 3 years ago

  ❤️

  Marked as helpful

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @arshaqkv (^_^)

  1
• 

  oussama ayadi•470

  @ayadi1Posted almost 3 years ago

  great job

  Marked as helpful

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @ayadi1 thanks Oussama

  1
• 

  Dusvy_M•390

  @dovelmPosted almost 3 years ago

  beautiful... 40 hearts!!!

  Marked as helpful

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @dusvimarin thank u Dusviry !!! ^_^

  0
• 

  GamuchiraiS•130

  @GamuchiraiSPosted almost 3 years ago

  Oh my goodness, this looks fantastic!

  Marked as helpful

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @GamuchiraiS thank you!

  0
• 

  Kehinde•660

  @jonathan401Posted almost 3 years ago

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

  Marked as helpful

  1
• 

  Aakash Verma•6,710

  @skyv26Posted almost 3 years ago

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

  Marked as helpful

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @skyv26 thank Aakash! i don't think there were any active-states in the design folder, but i suppose i should've added some myself

  1

  

  Aakash Verma•6,710

  @skyv26Posted almost 3 years ago

  @anoshaahmed i think those icons have states ! But as you said, might be true

  Marked as helpful

  1

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @skyv26 Just added some active-states! My git page takes an hour to deploy after changes though

  1
• 

  Alan Mendoza•100

  @llalanmendozallPosted almost 3 years ago

  Amazing!

  Marked as helpful

  1