Basic QR-Code challenge using CSS custom properties

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

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

  HTML 📄:

  • You should not use inline-CSS because it is not a good practice. Instead, you should use an external stylesheet to style your page. By doing this, you will be able to have a better organization of your code and will be able to understand it better.

  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. 📘.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  2

  ---

  

  João P. Kiyoshi•200

  @jpkiyoshiPosted almost 2 years ago

  @MelvinAguilar thanks! Very useful tips!

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <article class="card-wrapper"> with the main tag to fix the accessibility issue. click here for more on web-accessibility and semantic html

  This challenge does not require a box-shadow.

  To center .card-wrapper on the page using grid, replace the height in the body with min-height: 100vh.

  There is no need give .card-wrapper a height value . Give h1 and p the same font-size of 15px.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  João P. Kiyoshi•200

  @jpkiyoshiPosted almost 2 years ago

  @Hassiai Thanks for the feedback, my friend!

  0