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 illustration using SCSS (Grid and Flexbox) with BEM

Mijail Hernandezβ€’ 950

@MishaHernandez

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


Hi! πŸ‘‹

This challenge has allowed me to review some UX details especially when deciding which elements I should animate. I leaned on some effects from the Animate.css library but didn't risk overloading the page for a few animations, so I decided to write only what was necessary. I hope it turned out well.

Any feedback is welcome πŸ™‚

Community feedback

P
ApplePieGiraffeβ€’ 30,565

@ApplePieGiraffe

Posted

Hi, Mijail Hernandez! πŸ‘‹

I wanted to say, nice work on this challenge! πŸ‘ Your CSS illustration looks great and those messaging animations are a nice addition to your solution! πŸ™Œ

I suggest,

  • Only adding overflow-x: hidden (not overflow: hidden) to the body so that users can still scroll and reach all of the content of the page in case their viewport isn't high enough.
  • Adding a heading to identify each <section> tag that you use to improve the semantics of your HTML and clear up those errors on your solution report. You could just use a <div> for the phone illustration and the attribution instead. πŸ˜‰

Keep coding (and happy coding, too)! 😁

0

Mijail Hernandezβ€’ 950

@MishaHernandez

Posted

Thanks @ApplePieGiraffe πŸ˜ƒ

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