Responsive Fylo Data Storage Component using Flexbox and pseudo-elemen

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

I'm proud of achieving pixel-perfect layout using only HTML and CSS, especially the custom shape created with ::after. I also implemented accessibility improvements like adding a visually hidden h1. Next time, I might explore using CSS Grid or utility-first classes for a more scalable approach.

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

One of the main challenges was replicating the shape of the white card with the arrow-like point. I solved it using pseudo-elements with specific borders and positioning. Another tricky part was aligning the white dot accurately within the progress bar – I experimented with multiple approaches before settling on a manual adjustment with transform.

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

I'd appreciate feedback on:

• Whether there's a more efficient or scalable way to create the custom-shaped box-white.
• Best practices for progress bar alignment and responsiveness.
• Any improvements for accessibility beyond the visually hidden heading.