Skip to content
Submitted almost 4 years ago

Chat App CSS Illustration | HTML CSS Sass

accessibility, bem, sass/scss, lighthouse
Vanza Setia•27,715
@vanzasetia
A solution to the Chat app CSS illustration challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello Everyone! 👋

I finally finished the first intermediate challenge. 🎉

This challenge is really testing my CSS skill, especially when making it responsive. 😆

Now for the questions:

  • I added aria-hidden="true" for the phone, since it's just an illustration. Also because of that, I didn't use any interactive elements such as button and input. But, what do you think about this?
  • I am struggling with making the two background that is on the top left and bottom right corner have a fluid layout. I had tried using calc(), clamp(), but I wasn't able to find the calculation for it. Do you have any solutions for this?
  • I'm not sure what kind of animation should I make, so any idea about it would be appreciated.

Of course, other comments or any issue that you may find, feel free to write it down.

Also if you want me to give my feedback on your solution, feel free to give me the link on the community feedback! I will be glad to help you too!

Thanks!

Code

Please log in to post a comment

Log in

Community feedback

  • Raymart Pamplona•16,040
    @pikapikamart

    Hi, great work on this one. Both desktop and mobile layout is good.

    Regarding your question:

    • You can make the background fluid, like what you said, using clamp. I primarily use clamp to make media query-less layout in some projects. Try applying this one width: clamp(25rem, 46vw, 36.875rem); on your body::before selector, this will be your base property that is inside the mobile workflow. Then you could just remove all width declaration on your media queries related to the width of the selector. For the height you can just use the clamp function on it as well. Make sure that you know the properties on the clamp. First argument is minimum second is preferred last is maximum. What will really help you to grasped clamp is that, first, add the min and max of the property that you want, any preferred size could be use as well. Example:
      width: clamp(10rem, 3vw, 37rem);

    10rem is my minimum, 37rem is my maximum. My size will only grow or shrink base on my 3vw declaration.

    Then what you should do, adjust your screen, go to your maximum size, for example, 1600px, then tinker on the preferred size, adjust it until you reached the maximum size. Example:

      width: clamp(10rem, 23vw, 37rem);

    I achieved my 37rem with my 23vw, after this, your layout will be fluid and you don't need any media queries. You can use clamp with font-sizes as well to avoid any media queries.

    If you are confused on this one, you can message me in slack and I can help with it.

    • You don't really need aria-hidden on this one since div is not really an graphic content. svgs figure img those are the ones.

    For animations, well, if you treat the phone as like a interactive element, you can maybe add like hover on the button like-ish, on the inputs, on the dots. Just micro interactions with those.

    Other than that, good job.

    Marked as helpful
  • Ehab Joe•110
    @huhu0000

    Great work Vansa I did submit my solution too for this challenge but I think you did better 👍 so keep it a hundred

    Marked as helpful
  • Zineb Boutaa•750
    @zineb-Bou

    Hi Vanza, it is a great solution I loved it, layouts are perfect, concerning animation I added some to this challenge, I appreciate it if you check my solution.

    Marked as helpful
  • P
    Patrick•14,265
    @palgramming

    Looks Great !! Nice Job!! ⭐⭐⭐⭐⭐

    Marked as helpful

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