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

Desktop-First Using SCSS, FlexBox, CSS GRID

Folarin Akinloyeโ€ข 1,240

@folathecoder

Desktop design screenshot for the Chat app CSS illustration coding challenge

This is a solution for...

  • HTML
  • CSS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


This challenge looked very simple before I attempted it. I laughed in my "evil villain" ๐Ÿ˜ˆ voice when I saw the "intermediate" tag.

I thought it was a mistake!

I was wrong! ๐Ÿ˜‚

Building the illustration app alone tested my CSS skills. It was hard, in a fun way!

Please rate my implementation and suggest how I can improve!

Community feedback

P
ApplePieGiraffeโ€ข 30,545

@ApplePieGiraffe

Posted

Hello, Folarin Akinloye! ๐Ÿ‘‹

Nice job on this challenge! ๐Ÿ‘ It's good to hear that you enjoyed creating it! I've definitely underestimated the difficulty of a challenge before, too!

Overall, your solution looks good and responds pretty wellโ€”there's just a second vertical scroll bar that appears when the width of the screen decreases in the desktop layout that you might want to get rid of.

And it looks like only half of the background shape on the left of the page is visible when the width of the screen increases in the desktop layoutโ€”making that a complete background shape would improve the look of the design, I think. ๐Ÿ˜‰

As always, keep coding (and happy coding, too)! ๐Ÿ˜

1

Folarin Akinloyeโ€ข 1,240

@folathecoder

Posted

@ApplePieGiraffe Thank you so much APG! I didn't notice earlier probably because of my screen, I will look into that.

Thanks๐Ÿ˜‡

1
P
ApplePieGiraffeโ€ข 30,545

@ApplePieGiraffe

Posted

@folathecoder

NP! Keep going with these challenges! ๐Ÿ‘

1
Folarin Akinloyeโ€ข 1,240

@folathecoder

Posted

@ApplePieGiraffe Hey APG, check out the animation I added to the illustration, I used animate.css library to execute it.

1
P
ApplePieGiraffeโ€ข 30,545

@ApplePieGiraffe

Posted

@folathecoder

Oh hey, that's cool! ๐Ÿ˜€ Animate.css is such a nice little library and it really does add some extra spice to an otherwise somewhat lifeless site! ๐ŸŽ‰ Nice work! ๐Ÿ‘

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