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
Log in with GitHub

Submitted

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

Anosha Ahmed• 9,340

@anoshaahmed

Preview siteView code
Desktop design screenshot for the Fylo data storage component coding challenge

This is a solution for...

Fylo data storage component
  • HTML
  • CSS
2junior
View challenge

Design comparison

SolutionDesign

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.

Community feedback

Elroy Toscano• 630

@elroytoscano

Posted

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,340

@anoshaahmed

Posted

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

1
Anosha Ahmed• 9,340

@anoshaahmed

Posted

@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

@elroytoscano

Posted

@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

@elroytoscano

Posted

@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,340

@anoshaahmed

Posted

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

1
Hamza-Noah• 280

@Hamza-Noah

Posted

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

Marked as helpful

3
Anosha Ahmed• 9,340

@anoshaahmed

Posted

@Hamza-Noah thanks Hamza!

1
P
Matt Studdert• 13,611

@mattstuddert

Posted

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,340

@anoshaahmed

Posted

@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
P
Matt Studdert• 13,611

@mattstuddert

Posted

@anoshaahmed, you're welcome!

Marked as helpful

1
Elroy Toscano• 630

@elroytoscano

Posted

@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
P
Matt Studdert• 13,611

@mattstuddert

Posted

@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-ostojic

Posted

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,340

@anoshaahmed

Posted

@igor-ostojic Eyeball it systematically

1
xZAYEDx• 250

@xZAYEDx

Posted

@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• 610

@cacosted

Posted

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

Marked as helpful

1
Anosha Ahmed• 9,340

@anoshaahmed

Posted

@caastech thank u for letting me know. fixed it

0
Danilo Blas• 6,300

@Sdann26

Posted

It looks beautiful ^^,

Marked as helpful

1
Anosha Ahmed• 9,340

@anoshaahmed

Posted

@Sdann26 thank u Danilo !! c:

1
oussama ayadi• 470

@ayadi1

Posted

great job

Marked as helpful

1
Anosha Ahmed• 9,340

@anoshaahmed

Posted

@ayadi1 thanks Oussama

1
Dusvy_M• 390

@dovelym

Posted

beautiful... 40 hearts!!!

Marked as helpful

1
Anosha Ahmed• 9,340

@anoshaahmed

Posted

@dusvimarin thank u Dusviry !!! ^_^

0
GamuchiraiS• 130

@GamuchiraiS

Posted

Oh my goodness, this looks fantastic!

Marked as helpful

1
Anosha Ahmed• 9,340

@anoshaahmed

Posted

@GamuchiraiS thank you!

0
Kehinde• 660

@jonathan401

Posted

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

Marked as helpful

1
P
AK• 6,700

@skyv26

Posted

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

Marked as helpful

1
Anosha Ahmed• 9,340

@anoshaahmed

Posted

@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
P
AK• 6,700

@skyv26

Posted

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

Marked as helpful

1
Anosha Ahmed• 9,340

@anoshaahmed

Posted

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

1
Alan Mendoza• 100

@llalanmendozall

Posted

Amazing!

Marked as helpful

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