CSS classes, Google Fonts, CSS attributes

Community feedback

• 

  Mahmoud-AbdelKarim•600

  @Mahmoud-Abdelkarim777

  Posted 7 months ago

  I saw your coding, I think it's good, but I have a comment that will help you. Remove the margin and use a height in body and the problem will be solved. I think you should study flexbox more so that you can learn how to center the element in the middle of the screen. body { justify-content: center; align-items: center; font-family: sans-serif; display: flex; background-color: hsl(212, 45%, 89%); flex-direction: column; min-height: 100vh; }

  11

  Marked as helpful
• 

  Asilcan Toper•2,960

  @KapteynUniverse

  Posted 7 months ago

  Merhaba Burak, good job.

  You didn't ask for feedback but here it is :D (I always give feedback to fellow turkish people nonetheless)

  Since you used flex on the body, instead of margin: 15%; you can give body a min-height: 100vh; to center the card vertically.

  Landmarks, (or this page) are essencial for accesibility. Every page needs one main. Wrapping your card div with a main would be good.

  Avoid using fixed values like width: 200px;, for better responsiveness use max-width: 12.5rem;. 200 is a bit small tho, 20rem would be better.

  Images need a meaningful alt text, unless decorative. For this case, i think something like "QR code leading to frontendmentor.io" might be ok.

  Never use px for the font sizes. So people with visual impairment can adjust the font size on their browser. Use rem for especially font sizes and media queries. You can also use clamp function for better responsiveness.

  The WCAG criteria states that line-height should be at least 1.5.

  I recommend you to use a modern css reset for every project. You can check Andy Bells reset too.

  Also using a external CSS file might be better than internal

  11

  Marked as helpful