Responsive Chat App ilustration with animations

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted almost 4 years ago

  👋Hi Jakub!

  Regarding to your questions:

  • In this challenge you have to create the background and the illustration from complete scratch, that's why this is an intermediate challenge. If all the images has been prepared this might be a junior challenge 😁. In my opinion the two background needs to be bigger.
  • The property order is matter. For instance if you do this, then the body background would be blue.

  body {
    background-color: red;
    background-color: blue;
  }
  

  • OR, the property order that you mean is maybe like sorting the property based on alphabetical order? Well, I would recommend the CSS Concentric property order.

  /* Alphabetical Order */
  body {
    background-color: red;
    color: white;
    display: flex;
    justify-content: center;
  }
  

  • Based on CSS Guidelines, it's good to "title" your CSS for every section. But, it's not always a must to have comment.

  Feedback:

  • Use rem or sometimes em unit instead of px. It's a good practice to never use px most of the time, like in this case.
  • For any decorative images, like in all the images, you should leave the alt="" empty and add aria-hidden="true" to make sure all screen readers ignore those images.

  That's it! Hopefully this is helpful!

  00

  Marked as helpful
• 

  Dušan Lukić•1,660

  @dusanlukic404

  Posted almost 4 years ago

  Hi Jakub, I did this challenge a few days ago so I think it can be helpful for you to hear my suggestions.

  First, I will answer on your questions.

  • Every challenge on Frontend Mentor should be from scratch but in this case you did not have any images so you have to use only CSS. I think you did good job
  • You shouldn't have problems with properties order. They are only specificity. I recommend you to have a look on w3schools about it or on Mozilla Dev Network
  • You should always have comments on your code, so it is awesome

  Also, I have a few suggestions for your solution:

  • Make heading and paragraph text smaller on mobile devices
  • Chat text shouldn't be bold

  00

  Marked as helpful