Frist Project: QR Code

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  HTML 📄:

  • The text Improve Your Front-End Skills by Building Projects is considered a heading element (h1).

  Alt text 📷:

  • The alt attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a better alt attribute would be QR code to frontendmentor.io

    If you want to learn more about the alt attribute, you can read this article. 📘.

  CSS 🎨:

  • Centering an element with position: absolute would make your element behave strangely on some screen sizes, "there's a chance the content will grow to overflow the parent". You can use Flexbox or Grid to center your element. You can read more about centering in CSS here 📘.

  I hope you find it useful! 😄 Happy coding!

  0
• 

  Navendu•270

  @AshxaryaPosted almost 2 years ago

  Hi! 😊

  I have some feedback to help you out.

  Make sure you look at the accessibility report you're provided with below your solution.

  HTML 📄:

  As you can see in your accessibility report, you are recommended to use a level-one heading as in h1 for the first text. H tags improve user experience in the sense that they're part of a web page's hierarchical structure. Think of them less as a way to size font and more of a way to show the order of headings, since the size can be manipulated in CSS regardless.

  CSS 🎨: For ease of access in future projects, you can create variables of different colors at the beginning of your sheet. You can read more here to learn about this here.

  You may want to also use rem instead of pixels for font-sizes! You can learn more about this topic here , similarly you can search for why you might want to use em values instead of px for padding, margins etc in some cases aswell.

  Have a great day/night ^^

  0