Chat-app illustration Html & Css

Community feedback

• 

  Joran Minjon•610

  @DrKlonk

  Posted over 4 years ago

  Hi AbdulKareem,

  I would also check out the accessibility issues in the generated report. Those are quite relevant.

  Design wise, the biggest thing for me would be the font and the way the text is styled. Check out here how to add a font to your page.

  The padding on the paragraph makes it off line with the heading, which looks strange. I'd just remove the padding.

  Also, your background is a bit darker than the design, making for less contrast on the paragraph, which makes it a bit more difficult to read.

  In the code you use px and em for sizes a lot, I think it's well worth looking into using rems for all your sizes. It allows you to resize basically your entire site by setting the font-size in a media query. Check out this article on px vs rem, or do some googling on it.

  Cheers, Joran

  01
• 

  

  ApplePieGiraffe•30,525

  @ApplePieGiraffe

  Posted over 4 years ago

  Greetings, AbdulKareem! 👋

  Good effort on this challenge! 👍 Your CSS illustration looks pretty nice! 🙌

  I'd like to suggest adding a max-width to the main container or wrapper of the page to prevent the content of the page from becoming too wide when the width of the screen increases in the desktop layout.

  As for the background shapes in this challenge, I think an easy way to add and position them would be to use pseudo-elements on the body. You could give each of the background shapes an explicit width and height and absolutely position them relative to the body of the page. Just remember to set overflow: hidden to the body then to avoid any overflow issues. 😉

  Keep coding (and happy coding, too)! 😁

  06
• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted over 4 years ago

  Great work on your css you got there. Though some little small things is not present like the arrow-left button and the 3 little smalls dots but is fine for now.

  Regarding your queries. Okay practices.

  • In this challenge, well there is the upper and bottom background parts right, so as we noticed they are not really a important component in here, so creating div elements for them seems unnecessary, what we could do is that use the body tag psudo elements body::before and body::after. We could just use them instead of creating divs right for the background. Using these pseudo elements really helps us to avoid unwanted elements in the structure, like again for example. The top part of the mobile, the cut out, the color white. Instead of creating a div for that, we just use again the ::after of the .mobile-wrap selector. So when creating things, look for a way to minimize your html.
  • Foreground. As I noticed, your mobile seems not popping out like it should do, since the background-color of the mobile is white. So adding those box-shadows really helps the user eye to identifies boundaries of different components.

  But as you code further, you will get better and better as long as you think first about the layout. List the components which you think have the same styling as other components, so that in your css, you could reuse such selector for different elements. By the way, learning sass is simple, it's like you're just writing css, and it really is, you're just writing css with the addition of preprocessed outputs.

  Good work and good luck for further coding^^

  02