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.
Note: Delete this note and update the table of contents based on what sections you keep.
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
- Solution URL: github.com/thesohailjafri/Chat-app-css-illustration
- Live Site URL: fm-chat-app-css-illustration.netlify.app
I started by creating and aligning background color blocks then i create chat app block using nested combination of divs and spans and then the Intro section and aligned Mobile and intro using css grid-template-column.
- Semantic HTML5 markup
- SCSS custom properties
- Flexbox
- CSS Grid
- Desktop-first workflow
How to use Grid-template Columns and Rows.
To see how you can add code snippets, see below:
main {
display: grid;
grid-template-columns: [a] 250px [b] auto;
column-gap: 120px;
}
- Grid Flow and Basics - helped to understand grid flow.
- Website - Sohail Jafri
- Frontend Mentor - @thesohailjafri