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

Note: Delete this note and update the table of contents based on what sections you keep.

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: Add solution URL here
• Live Site URL: live site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Tailwind CSS
• Vite
• Mobile-first workflow

What I learned

This is my first project using tailwind css, and also the most toughest project I have ever made. I try my best to replicate the design but it is not easy.I get to know about many properties of tailwind and how to use it to create mobile first websites. The best part of this project is creating the design of the mobile, it is trickiest part of this tricky project.

Continued development

There are stills some bugs in the project, like I didn't able to design my radio inputs in the mobile design and it also overflow at some places when used in small screens but I will solve this issues in the future.

Author

• Github - gitanshu
• Frontend Mentor - @gitanshu18
• linkedin - Gitanshu Sankhla