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

Responsive Chat app Illustration, animated with animate.css

@iadefidipe

Desktop design screenshot for the Chat app CSS illustration coding challenge

This is a solution for...

  • HTML
  • CSS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


I thought I wasn't going to be able to do this challenge, but once I started it wasn't as hard as it looked🦸‍♂️, it was actually challenging though. I learnt how to apply animate.css to help with some of my animations, pretty cool library.

I would really appreciate comments on my coding style, how to improve this particular challenge, what I need to improve on🙏

I couldn't animate the last two chat messages with animate.css library and i really want to know what was wrong, I actually applied the animation classes correctly but it isn't working. Anything I can do to solve that?

Community feedback

P
Patrick 14,325

@palgramming

Posted

overall it looks good. Have you uses https://cssbattle.dev/ if you liked creating this project trying to make some of their shapes you should enjoy and learn from also

in terms of the animation I cannot help but it would look better if the message/elements started at the bottom of the phone screen and then move to the top like a real phone. I think that will make for a much better effect

1

@iadefidipe

Posted

@palgramming Thanks, I will try that out. I will work on your animation Idea when I come back to improve the code. Thanks for the comment, i really appreciate.

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