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

CSS Chat App. Built with: Tailwind | SASS | CSS @keyframes.

Bonrey 1,130

@Bonrey

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


Hello there, everyone! 👋 Here's another CSS challenge I decided to tackle.

At first, I wanted to practice another CSS framework — Tailwind. However, I didn't find it very entertaining: looking up specific tailwind classes when I can just write my own styles, ugh. 😒

Don't get me wrong, I still learned a lot about Tailwind! In fact, it's the best CSS framework I tried. (As some of you know, I also tried Bootstrap and Bulma in the last couple of challenges.) It is very comprehensive: you get way more classes than in Bulma and can style your page with virtually no CSS! However, sometimes, there's still a need to apply a very specific value to width or use pseudo-classes (or -elements), for instance. Well, you see, no matter how extensive a certain framework is, plain CSS will always be more flexible. 😏

So, I believe that from now onwards, I'll write my own styles, using SASS, and use CSS frameworks only for super-small projects.

Well, thanks for reading this long text till the end. 😅 And happy coding to all of you! 💻

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hello there, Bonrey! 👋

Just came to say great job on this challenge! 👏 Your solution looks really good and the animations that you added are very fun! 😀

And thank you for trying out all of those CSS frameworks and coming to a conclusion for me! 😂 Seeing your small CSS framework journey and hearing your thoughts has been interesting. I think I'll follow your lead and keep at it with good ol' CSS for now! 👍

Keep coding (and happy coding, too)! 😁

1

Bonrey 1,130

@Bonrey

Posted

@ApplePieGiraffe, haha, no problem! 😄 That was quite an interesting journey, anyway. Now, it's high time I got back to React, I guess.

And as always, thank you for your comment, and happy coding to you as well! 😊

P.S. Looking forward to seeing a new project of yours. 😉

1
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

@Bonrey

Thanks (LOL, me too)! 😀 I'll have to stop procrastinating and get to working on challenges more! 😅

1
P
tediko 6,560

@tediko

Posted

Hello, Bonrey! 👋

It's very good that you trying different things. Good job on this challenge. I've nothing much to say this time. The one thing you can add is to push your own messages when you use input for messages.

Good luck with that, have fun coding! 💪

1

Bonrey 1,130

@Bonrey

Posted

@tediko thank you! Pushing new messages would require JS, though. And I wanted to do this challenge, using nothing but HTML & CSS. 😄

0

@Muhammad-samir

Posted

Clean work

0

Bonrey 1,130

@Bonrey

Posted

@Muhammad-samir, thank you! 😊

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