Not Found
Not Found
Not Found
Not Found
Not Found
Your session has expired please log in again.
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 CSS illustration with animation

#animation
Satyapriya Mahatoโ€ข 360

@SatyapriyaMahato

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


It was quite an easy and fun project, Found little difficult to make it mobile responsive and work with the positions and z - index. I am unsure about the animation part, if can be done in a better way, it would be very helpful.

Community feedback

Tushar Biswasโ€ข 4,100

@itush

Posted

Congratulations on completing the challenge! ๐ŸŽ‰

It is important to correctly understand CSS Position property to render HTML elements as per the requirement. I also faced difficulties with position property in my initial projects. Please note:

  • By default, all HTML elements are static (non-positioned elements).

  • By using top, right, bottom, left we can control the final location of an HTML element.

  • Top, right, bottom, left, z-index donโ€™t have any effect on Statically positioned / non-positioned elements.

  • So, basically, we first need to convert a non-positioned element to a positioned element using (relative/fixed/absolute/sticky) then only (top/right/bottom/left/z-index) etc. will work for the targeted element.

You may checkout the following๐Ÿ‘‡ where I discuss about css position, z-index, box-model, Media Queries, Mobile-First Workflow etc. in a simple way.

12 important CSS topics

CSS Position Property in Hindi

Hope this helps.

Once again you have done a wonderful job.๐Ÿš€The animation looks nice to me...

Keep at it...๐Ÿ’ป Happy hacking!

Marked as helpful

1

Satyapriya Mahatoโ€ข 360

@SatyapriyaMahato

Posted

@itush Thanks, Just checked the video. It was a great help.

1
Tushar Biswasโ€ข 4,100

@itush

Posted

@SatyapriyaMahato You're welcome!

I'm glad to hear that you found the video helpful. ๐ŸŽฅ๐Ÿ”ฅ

If you have any more questions or need further assistance, feel free to reach out. Keep up the great work and happy coding! ๐Ÿ’ป๐ŸŒŸ

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