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 My name is Ajor Moses, i'm new on this platform and i'm open to learning and improvement, Thanks for checking out my front-end coding challenge. Frontend Mentor challenges help you improve your coding skills by building realistic projects. To do this challenge, you need a strong understanding of HTML and CSS.

• The challenge My challenge is to build up this feature illustration using HTML & CSS and get it looking as close to the design as possible. The only assets we provide in this challenge are the image of the person in the app UI and the 3 images of the dog. You need to create everything else using HTML & CSS!

• Screenshot You will find all the required assets in the /images and /design folder. The assets are already optimized.

• Links

  • Solution URL: [ https://github.com/ajormoses/chat-app-css-illustration-challenge.git ]
  • Live Site URL: [ https://ajormoses.github.io/chat-app-css-illustration-challenge/ ]

• My process

  1. I started by looking through the designs to start planning out how i will tackle the project.
  2. Before adding any styles in my css file, i made sure i structure the content in my HTML file. Writing my HTML first helped me to focus my attention on creating well-structured content.
  3. I started adding styles to the top of the page and work down and also i moved on to the next section once i'm satisfied with the area i finished working on.
  4. After working on the structure and design, my last work was to make my design responsive and also to have different design for different screen size using media query.

• Built with I use HTML and CSS to build this design

• What I learned I had to learn more about the "position" property in CSS because this property is a major fundamental factor neccessary for the birth of my design.

• Continued development i'm open to learning and improvement and also to work on future projects in [FrontendMentor]

• Useful resources [ www.fontawesome.com ] - This website helped me to add icons that were crucial for my design [ www.fonts.google.com ] - This site helped me to import the font-family Rubik to my design [ www.w3schools.com ] - This site helped me to learn more about the "position" property

• Author Frontend Mentor - @ajormoses Github page (https://github.com/ajormoses)

• Acknowledgments I want to acknowledge the presence of my friends and also my collegues ANIMASHAUN TAOFIQ T (https://github.com/blade-01) and OMAR (https://github.com/Mbaoma) for mentoring me and also helping me tackle problems i can't solve on my own.