QR-Code Design for desktop and mobile view

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @Joker4mas 👋, good job completing this challenge! 🎉

  I have some suggestions you might consider to improve your code:

  • Use the <main> tag to wrap all the main content in your solution instead of using <div class="container"> to improve the accessibility of the website.

  • Use <footer> instead of <div class="attribution">. The <footer> element contains authorship information.

  • Setting element width with percentages or VW will cause your component to behave weirdly on mobile devices and high-resolution desktops. You can set the max-width at 380px or 23.75rem.

  • Add descriptive text to the alt attribute of the QR image to explain what the QR image does. Upon scanning the QR code, you will be redirected to the frontendmentor.io website, so an example of alternative text would be "QR code to frontendmentor.io". You can read more about alternative text here.

  • The container isn't centered correctly. You can use flexbox or grid layout to center elements. You can read more about centering in CSS here.

  • Use an h1 tag for your solution. The <h1> element is the main heading on a webpage, also, there should only be one <h1> tag per page. Swap the <h3> tag with <h1>.

  • The <br> tag is not a semantic tag, so you should not use it. Also, if a screen-reader reads the text, it will break the flow of reading at the line break tag, so it should not be used to add vertical spacing. There are only a few cases where it is necessary (for example, in a poem or an address), and it is possible to avoid them by applying padding and margin styles via CSS. More information here.

  • You can use either the CSS @import rule to import the font-family Reference

  In your CSS file add this line of code:

  @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@500;700;900&display=swap");
  

  And use it as follows:

  .class-selector {
     font-family: "Outfit", sans-serif;
  }
  

  Please don't worry if your suggestions are long, they are just details. In the end, the project is well done 👏. Hope you find those tips helpful! 👍

  Good job, and happy coding! 😁

  Marked as helpful

  2
• 

  CodzSchach•150

  @Joker4masPosted about 2 years ago

  Thank you for the observations @MelvinAguila, your advice was timely and considered. I was able implement some changes to the challenge and it work out great. Thanks once again👍

  0