Semantic HTML5 markup, CSS, Flexbox Mobile-first

Community feedback

• 

  Anderson Paulo•50

  @AndersonPaulo

  Posted 5 months ago

  Congratulations, your code is easy to understand, it was perfect, I'm following your way of developing responsive websites. I have a long way to go.

  00

  Marked as helpful
• 

  P

  Kamran Kiani•2,780

  @kaamiik

  Posted 5 months ago

  • Decorative images and avatar images do not need alt and the alt should be empty like alt="". You can read more about how to add a good alt text here: https://www.craigabbott.co.uk/blog/how-to-write-good-alt-text-for-screen-readers/

  ---

  • Your a should wrap inside h1. You did the opposite.

  ---

  • Your font-size and max-width should be in rem unit not px. You can read this article about it and why you should not use px as a font-size.

  ---

  • Use min-height: 100vh; instead of height:100vh;. height: 100vh strictly limits the height to the viewport size, potentially causing overflow issues if the content is larger than the viewport. On the other hand, min-height: 100vh allows your element to grow in height if the content exceeds the viewport size.

  ---

  • You do not need media query for max width. And you just need one max-width in container. and no need for other max-widths in your code.

  ---

  • This min-width: 73px; is wrong. let the browser decide about with. You should not limit it.

  00
• 

  ChNokia•20

  @ChNokia

  Posted 5 months ago

  Thanks for comment

  00