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

HTML/SASS chat_app

Magda 70

@magpe30

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


Hi! That was a fun challenge! My solution is far from being perfect. Any advice welcome:)

Community feedback

David Payne 1,205

@dpayne713

Posted

Magda,

Looks nice, Nicely done -

  • Looks like your media query could happen a bit earlier so the text doesn't get smashed up against the phone object.
  • One minor thing is I prefer to add classes to even the nested h1, p, etc tags so they have the same specificity. [See this link for a bit more]{https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#Specificity_2}

Keep it up!

David

1

Magda 70

@magpe30

Posted

@dpayne713 Hi David!

Thank you very much for the review and very helpful advice. I will change the media queries to maybe 1000px. I will remember to add classes next time! Thank you once again :)

0
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hello there, Magda! 👋

Good job on this challenge! 👏 Your CSS illustration looks pretty good!

I'd like to suggest,

  • Decreasing the size of the heading and paragraph text in the mobile layout of the site (they are a bit large, then).
  • Adding some space between the top of the CSS phone and the screen in the desktop layout using margin/padding so that there's always some room between the two on different screen sizes. 😉

Keep coding (and happy coding, too)! 😁

0

Magda 70

@magpe30

Posted

Hi! Thank you very much for your advice! I will surely change it - I also think the text is too big and there should be a gap between the top and screen. Thank you again and have a great day :D

0

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