Fylo Data Storage Using Grid, Flex, and More
Design comparison
Solution retrospective
This is harder for me, but i am glad I can make it. In this challenge I learn how to use ::before and ::after selector to make right-triangle. The hardest part is to make the progress bar, I try to use <meter> element in the first attempt, but I have trouble changing the style. So, i decided to use <div> instead. I learn so many technique in this challenge, so I really excited when I get some feedback.
Community feedback
- @AgataLiberskaPosted over 3 years ago
Hi @lutfihakim2, well done on this challenge! it looks good :) I have a few suggestions:
-
375px is too early to switch to horizontal layout here - the component fits the screen but it's so small that it's very hard to read.
-
It would be great if the icons were buttons, with some custom hover and focus styles
-
Design-wise, it's good to always have margin around the component, so that it never stretch from one edge of the screen to the other
And lastly, I think using a pseudoelement for the progress bar is quite a clever solution, but as far as I'm aware, pseudoelements are quite tricky to manipulate with JavaScript (although not impossible, I don't think) because they're not a part of the DOM - so making this dynamic would be more difficult (I mean if you wanted the progress bar to grow shorter/longer depending on how much storage is used).
Hope this helps :)
0@lutfihakim28Posted over 3 years ago@AgataLiberska Thanks for your feedback, that's mean a lot to me. I will keep coding to improve my skill. Your suggestion is so helpful.
0 -
Please log in to post a comment
Log in with GitHub
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