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 with CSS Animations, SCSS, and BEM

#sass/scss#bem
P
Ken 4,915

@kens-visuals

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


Always loved this fun little components that are just there to practice all the skills you've got before (of course if this is not your first project, and you've been nailing some challenges for a while). For me, the main challenge with this small projects is to get them as close to the design as possible. And every time I get thrilled like the first time when my project looks really close to the design.

Feel free to leave some feedback 👨🏻‍💻 Cheers 👾

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Excellent work on this, Ken! As you say, these small projects are perfect opportunities to practice specific skills and try getting even closer to the design. It's great to see you playing around with content transitions as well. Your solution looks fantastic! 🙌

1

P
Ken 4,915

@kens-visuals

Posted

Hey @mattstuddert 👋🏻 thanks for the compliments. Yes, for the past couple of projects I've been trying to start implementing some sort of transitions or animations. Nothing fancy, but sometimes less is more, eh? 😅

0
P
Matt Studdert 13,611

@mattstuddert

Posted

@kens-visuals, haha, yeah, it's easy to overdo transitions! Nice work including the prefers-reduced-motion media query as well. That's a crucial block to add if you're using a lot of content transitions/animations!

0
P
Ken 4,915

@kens-visuals

Posted

@mattstuddert ever since I've started completing challenges here, I've also started to pay more attention to the overall accessibility of the website. Even though this project may not have millions of views in my GitHub repos, I still find it important to implement such things. For the sake of others' presences and for the sake of learning 🙃

1

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