chats app design

Community feedback

• 

  Ivar•60

  @Ivar112Posted about 2 years ago

  Hi Akash, thanks for the like on my version of this challenge. Here is some feedback: visually your solution differs from the design in quite a few places, I think you can see this as well. I would really encourage you to match the design as closely as possible. That means getting things such as padding, border-radius etc. just right. I think this will really help you develop your skills and improve your eye for detail.

  The phone and the main text do not align vertically on larger screens. This would have been really easy to fix by adding: 'align-items: center' to your container div. I would have added another div wrapping the .mobile and .main-div. This would have given you some options to position the phone and the text relative to each other, whereas now the phone is positioned rather statically with margin-inline. By avoiding positioning the major elements on a page like this, they will always be in the right place, on any screen size.

  I see that the main heading is an h2. Since this is the main and only heading in this design, I think this should have been an h1. One last thing is that would not have put a negative z-index on your .container div. This made it harder for me to select elements to inspect, because you have placed it below the body in the stacking order. One solution for this would have been to place the .design element outside of the container and put the background-color on the body, rather than the container.

  Keep it up and hope to see more from you in the future!

  0