Frontend Mentor - Chat app CSS illustration solution

This is a solution to the Chat app CSS illustration challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
  • Built with
  • What I learned
  • Continued Development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the component depending on their device's screen size
• Bonus: See the chat interface animate on the initial load

Screenshot

Links

• Solution URL: See Solution
• Live Site URL: Live Site

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

I learned a lot about positioning elements and pseudo classes/elements.

Continued development

In the future I will try to learn much more in CSS so I can work on more complexive projects on Frontend Mentor.

Useful resources

• Top Tal - This site helped me a lot with CSS codes for elements like arrow and three dots.

Author

• Frontend Mentor - @dusanlukic404
• LinkedIn - @dusan-lukic