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

Submitted

Fylo data storage using flex

sleeepyskiesโ€ข 150

@sleeepyskies

Desktop design screenshot for the Fylo data storage component coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


This challenge was a nice step up in difficulty. I had two major struggles:

  1. Speech bubble
  • I styled the bubble itself and the triangle as absolute elements inside of the second component, this however leads to the triangle sometimes disconnecting from the bubble at certain screen sizes. Is there a better way to do this?
  1. Progress bar
  • The main issue here was the white circle. I struggled to get it positioned correctly, as well as maintain it's position when resizing. I ended up absolutely positioning it in relation to the parent of the inner colored progress bar. Is there a better way to do this?

Thank you for any advice!

Community feedback

Finneyโ€ข 3,030

@Finney06

Posted

Hello there ๐Ÿ‘‹. Good job on completing the challenge !

Here are some suggestions regarding your code that may be of interest to you.

HTML ๐Ÿท๏ธ:

To clear the Accessibility report:

  • Always avoid skipping heading levels; Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy.

I hope you find it helpful!๐Ÿ˜ Above all, the solution you submitted is ๐Ÿ‘Œ. ๐ŸŽ‰Happy coding!

0

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