Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Chat App Illustration [HTML, CSS/SCSS]

Ana Z. 240

@vace328

Desktop design screenshot for the Chat app CSS illustration coding challenge

This is a solution for...

  • HTML
  • CSS
3intermediate
View challenge

Design comparison


SolutionDesign

Community feedback

@zahoornoman0

Posted

Such an amazing solution, definitely gonna download and learn tricks. Currently I don't know scss and i am willing to learn it. I know only css and submitted only using only css. I did some amazing with this challenge see it in my solution. This is not well aligned with the screen but amazing placeholder with chat scroll. I don't have pro account so i was not able to make as exact.

0

Ana Z. 240

@vace328

Posted

@zahoornoman0 Hello Noman, thank you for checking out my solution. I'm really glad you like it and I hope you'll find it useful. I don't have a pro account either, not yet, anyway. To achieve the result as close to the design as possible, I manually measure elements from the design photo. It is a bit time consuming, but it helps if you want to achieve better alignment without original Sketch and Figma design files.

0

@zahoornoman0

Posted

@vace328 I wanted to learn sass. Can you give me your insta or something. So that I can get link to the courses of sass and ofcourse javascript

0

@zahoornoman0

Posted

@vace328 how do you measure pixels from the design image?

0
Ana Z. 240

@vace328

Posted

To learn Sass, make sure you read the official documentation. You can also watch some YT tutorials to see how people use it on different examples. Then you can try it yourself on your own projects. If you want to purchase a course, then you will need to do some research and decide which course suits your needs best.

1
Ana Z. 240

@vace328

Posted

To measure distance, open the image in an image viewing and editing software and then use ruler tool. I use Photoshop, but I assume that other programs have the same or similar functionality.

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord