Responsive Fylo Data Storage Component using CSS Grid and Flex layouts

What are you most proud of, and what would you do differently next time?

This is my 10th Junior Project!

I had a lot of fun building this one as it has some elements that I'm building for the first time. I built it using Vite but didn't bundle it as a production build so that you can check my repository and see a better and cleaner code.

What challenges did you encounter, and how did you overcome them?

The progress bar was a little confusing to build but with the help of ::before and ::after, I built it pretty easily.

The next one was the white popup indicating the remaining storage. This element was a little confusing to position on the card because of how it is placed in the design. I have made it using some position: absolute and some other properties to support it.

But, I'm not sure about how it looks on different screens because I think position: absolute does mess it up sometimes.

What specific areas of your project would you like help with?

Any feedback is welcome!