QR Code to Frontend Mentor

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  Hello 👋. Congratulation on successfully completing your first challenge 🎉 ! !

  I have other recommendations regarding your code that I believe will be of great interest to you.

  Metadata 🗃️:

  • Add a title of the page. The <title> tag is used to specify the title of a web page, which is displayed in the browser's title bar or tab, and is also used by search engines as the title of a page in search results.

  Alt text 📷:

  • To make the alt attribute as useful and effective as possible, avoid using words such as "image", "photo", or "picture" as they are redundant because the image tag already conveys that information. Instead, try to make the description as human-readable and understandable as possible.

    The alt attribute should explain the purpose of the image, for example, in the case of a QR code, a description like "qr code to frontendmentor.io" would be more appropriate.

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

  CSS Reset 🔄:

  • You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

    CSS resets that are widely used:

    • Reset CSS
    • "My Custom CSS Reset" by JoshWComeau

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

  Happy coding!

  Marked as helpful

  0

  ---

  

  Mateus Mattos de Sá Barreto•180

  @MMattossPosted over 1 year ago

  @MelvinAguilar thank you so much

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace <div class="center"> with the main tag and <h2> with <h1> to fix the accessibility issues. click here for more on web-accessibility and semantic html

  Add a tittle tag <tittle> within the head tag to fix the error issue. the content of the titttle tag is the tittle of the file.

  The body has a wrong background-color. Use the colors that were given in the styleguide.md found in the zip folder you downloaded.

  To center .center on the page using flexbox or grid, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  To center .center on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  To center .center on the page using grid:
  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  Replace the height in .center with a padding value for all the sides, this will prevent the content from overflowing on smaller screens and its a responsive replacement. padding: 15px

  Give h1 and p the same font-size of 15px, text-align: center, the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

  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

  0

  ---

  

  Mateus Mattos de Sá Barreto•180

  @MMattossPosted over 1 year ago

  @Hassiai thank you so much!

  0