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
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.