Skip to content
Submitted over 3 years ago

Chat app illustration using SCSS (Grid and Flexbox) with BEM

Mijail Hernandez•950
@MishaHernandez
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Chat app CSS illustration
  • HTML
  • CSS
3intermediate

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

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    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
    @MishaHernandezPosted over 3 years ago

    Thanks @ApplePieGiraffe 😃

    0

Please log in to post a comment

Log in with GitHub

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