Normal QR Code Website Using Flex

Community feedback

• 

  Alberto Raúl José•610

  @alberto-rjPosted 8 months ago

  Congratulations, @abrarishere! You have improved the previous solution!

  But the background and foreground colors do not have a sufficient contrast ratio

  You can solve this problem by changing the text color of the paragraph and footer (including the links). This tool can help you solve this problem

  Convert the QR Code image to next-gen formats, such as WebP and AVIF because those formats often provide better compression than PNG or JPEG. Learn more here

  This website can help you solve this problem

  Make the QR Code image responsive, but not simply with the CSS declarations, such as:

  img {
    width: 100%;
    height: auto;
  }
  

  Or

  img {
    max-width: 100%;
    height: auto;
  }
  

  Images that are appropriately-sized to save cellular data can improve the load time of the page. Learn more here

  Marked as helpful

  0

  ---

  

  Muhammad Abrar•160

  @abrarisherePosted 8 months ago

  @alberto-rj Thanks but I have no any other format of qr code.So I can't better it anymore

  1

  

  Alberto Raúl José•610

  @alberto-rjPosted 8 months ago

  Okay, @abrarishere! I understand you. You don't need to do this now.

  But know that the tool I shared with you, only allows you to convert a PNG or JPEG to WebP, it does not require you to have another image format.

  Marked as helpful

  0

  

  Muhammad Abrar•160

  @abrarisherePosted 8 months ago

  @alberto-rj Please check my Clipboard Landing page and tell me what changing and improvements should i made?

  0

  

  Alberto Raúl José•610

  @alberto-rjPosted 8 months ago

  @abrarishere! Are you using the Frontend Mentor Discord server? If so, would you be available to talk more there? Because that way it will be easier.

  0

  

  Muhammad Abrar•160

  @abrarisherePosted 8 months ago

  @alberto-rj No, I don't have discord

  0

  

  Alberto Raúl José•610

  @alberto-rjPosted 8 months ago

  It would be nice if you used it, @abrarishere! Mainly the Frontend Mentor Discord. This way, you will be able to get more help from other community members.

  0
• 

  Alberto Raúl José•610

  @alberto-rjPosted 8 months ago

  Hi, @abrarishere! Congratulations on investing your time and leveling up with the challenge, QR code component.

  I'm Alberto and I have some code suggestions that can help you improve your solution to this challenge.

  ADD A META DESCRIPTION TO YOUR HTML DOCUMENT

  Meta descriptions may be included in search results to concisely summarize page content. Learn more here

  Example

  <meta name="description" content="QR code component, the first challenge of Frontend Mentor">

  SPECIFY THE ALTERVATIVE TEXT FOR THE QR CODE IMAGE

  On line 95 of your HTML: This image is not decorative, it is informative. Every informative or essential image for the page content must have alternative text. It's good for SEO, Accessibility...

  Bad

  <img src="images/image-qr-code.png" alt="">

  Good

  <img src="images/image-qr-code.png" alt="QR code to frontendmentor.io">

  SPECIFY THE MAIN TITLE OF THE PAGE

  On line 96 of your HTML: Replace the h3 by h1 tag, so that search engines and screen readers know how to identify the main title of the page.

  Bad:

  <h3>Improve your front-end skills by building projects</h3>

  Good:

  <h1>Improve your front-end skills by building projects</h1>

  SPECIFY THE FOOTER OF THE PAGE

  Replace the <div class="attribution">...</div> by <footer>...</footer> the HML code, because the footer is not just for decoration. It contributes to usability, SEO and gives a good experience for the users.

  Bad

  <div class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. <br>
      Coded by <a href="https://github.com/abrarishere">M. Abrar</a>. 
  </div>
  

  Good

  <footer class="attribution">
    <p>
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. <br>
      Coded by <a href="https://github.com/abrarishere" target="_blank">M. Abrar</a>.
    </p> 
  </footer>
  

  Consider using the Lighthouse extension if you don't already use it. It can help improve the best practices, performance, accessibility and SEO for your next projects.

  Keep learning, coding and sharing! 🌟

  Happy coding! 🚀

  Marked as helpful

  0

  ---

  

  Muhammad Abrar•160

  @abrarisherePosted 8 months ago

  @alberto-rj

  Thanks Sir, Please check now

  0