QR code using html and css

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hello Demiladeogo, You have done a good work! 😁

  Some little tips to improve your code:

  • add main tag and wrap the card for improve the Accessibility
  • also you can use article tag instead of a simple div to the container card for improve the Accessibility
  • remove all margin from .first-container class because with flex they are superfluous
  • use align-items: center to the body to center the card vertically
  • instead of using px or % use relative units of measurement like rem -> read here

  Keep learning how to code with your amazing solutions to challenges.

  Hope this help 😉 and Happy coding!

  Marked as helpful

  1
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hi @Demiladeogo, congratulations on your solution!👋 Welcome to the Frontend Mentor Coding Community!

  Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

  1.You've missed the align-items: center to have your card centered:

  body {
      background-color: hsl(212, 45%, 89%);
      font-size: 15px;
      display: flex;
      justify-content: center;
      text-align: center;
      min-height: 100vh;
      align-items: center;
  }
  

  2.Replace the <h3> containing the main title with <h1> note that this title is the main heading for this page and every page needs one h1 to show which is the most important heading. Use the sequence h1 h2 h3 h4 h5 to show the hierarchy of your titles in the level of importance, never jump a level.

  3.Clean your code by removing some unnecessary divs, most of the content can stand alone without a div. Use div only for blocks that need a special alignment or the content needs a special positioning.

  4.Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.

  5.Use relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but to all sizes as well.

  Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  Wiktor•110

  @wiktor-rocksPosted about 2 years ago

  Hi, one way to make a page responsive is to add something called a media query to your CSS stylesheet.

  https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

  Use something like this:

  @media (max-width: 1250px) { /* … */ }

  This way you can alter your CSS based on some criteria, in this case it's the screen width.

  Marked as helpful

  0