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 component

@catherineisonline

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


Hello, Frontend Mentor community! This is my solution to the Fylo data storage component.

I am thankful for all the comments you have left and I always try to improve or refactor the code. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.

You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.

Thank you

Community feedback

@jemeneradev

Posted

Try to stay away from the "position: absolute".

For one thing, it pulls out the elements from flow dictated in the markup, which messes with the nearby elements.

My advise: stay with "position: static". For complicated layouts, use display flex or grid. Get the layout as close as you can, then you can use "position:relative" for the micro adjustments.

For the bubble, you could have added the triangle as a pseudo element, then use position:relative to place it in its place.

This project was a fun one!

Marked as helpful

2

Edem 50

@CarlEdem97

Posted

looks awesome, going to jump on this one myself

1

TsuneWeb 260

@TSune-web

Posted

Hi Catherine, you did a fantastic job!

0

@JyteCeo

Posted

Hi Catherine .. your work is nice .. [email protected] is my email we can get to talk and code along ,,, I'm learning Js too and would be in react pretty soon ..

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