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
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for the component depending on their device's screen size

Screenshot

Links

• Solution URL: My Frontend Mentor Profile Solutions
• Live Site URL: My live site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Sass

What I learned

I learnt a lot of things while building this or making this project. When doing responsiveness, write your code from desktop to mobile or mobile to desktop(not my thing).

Use your ::after or ::before pseudo-elemnts when you get to where it is of neccessity because at the latter there might be diffulculties.

Continued development

In future projects, I will like to do more JavaScript.

Useful resources

• CodeSTACKr - This helped me for Flexbox and Sass.

Author

• Website - Efosa Evbowe
• Frontend Mentor - @efecollins
• Twitter - @EfeCollins7

Acknowledgments

I thank Arty Simon for using his chat app css illustration as a guide including his JavaScript code. Thanks.