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

Chat app with animations

@islamahmadayoub

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 found it a little bit challenging to position the arches top left and bottom right I wasn't sure if the challenge required me to position them absolute to the app itself or to the window.

I also wanted to do a type in a fax on the messages but it seems that hey to requires more than vanilla CSS unless I'm mistaken I would look more into this.

I think you also need to consider accessibility by using HTML semantic tags.

What areas of improvement do you see? appreciate the feedback

Community feedback

@johnphillipsdev

Posted

Hey there,

I just wanted to say that your solution is awesome! I really love the animation you added—it's a nice touch!

I wanted to quickly suggest that you set a max-width on your text to ensure it doesn't expand too far (it's currently touching the edge of the container). It might also be worth having a look at your line-height.

I hope those small adjustments can help align your solution more closely with the design. :)

Marked as helpful

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