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 using CSS grid and flexbox

P
Cassidy 555

@Darknessflowers

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


Would love any feedback!

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Hey Cassidy, awesome work on this challenge! I saw your tweet about it. Definitely nice to get away from tutorials sometimes and just build a project!

Your solution looks great. The only small thing I'd recommend would be to speed up the animation to make it more snappy. But that's a tiny detail. You've done a great job!

1

P
Cassidy 555

@Darknessflowers

Posted

@mattstuddert Thank you! I did consider speeding it up but I was torn between 'realism' and what was appropriate for a website. I really enjoyed working off the Sketch file for this one. I did cheat a little by exporting the back arrow/options dots as SVGs, but it was really nice seeing how things were done that I might not have realised in the past (such as those pesky box shadows) or how the backgrounds were designed slightly off screen rather than starting at the edge.

0
P
Matt Studdert 13,611

@mattstuddert

Posted

@Darknessflowers haha, that’s fair enough about exporting the arrow and dots!

Working to the Sketch file definitely makes a massive difference. The level of detail you can go to is much greater!

I’m really happy you enjoyed it!

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