QR Code Component using HTML & CSS

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  Some recommendations regarding your code could be of interest to you.

  HTML

  In order to fix the accessibility issue:

  • Each main content needs to start with an h1 element. Your accessibility report states page should contain a level-one heading. So, you should use one <h1> element in the <main> tag. You can replace your <h3>Improve your front-end skills by building projects</h3> element with the <h1>Improve your front-end skills by building projects</h1> element.

  After committing the changes on GitHub and you need to deploy it as a live site. Finally, you should click generate a new report on this solution page to clear the warnings.

  Hope I am helpful. :)

  Marked as helpful

  1
• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋,

  About your questions:

  🔹One of the easiest way to center the card is using Grid. For example as follows:

  body {
      min-height: 100vh;
      display: grid;
      place-content: center;
  }
  

  🔹Regarding the positioning of the text, a good way to do it could be wrapping it in an element like a <div> and applying padding on it. Then space the elements using margin, or gap if you apply grid or flex to the wrapper.

  In this simple case there may not be that much difference, but in other challenges this way could be much more useful (and easier). Here an example:

  .text {
      display: grid;
      gap: 1rem;
      padding: 1.5rem 1rem;
      text-align: center;
      line-height: 1.25;
  }
  

  Also, perhaps some of this may interest you:

  HTML 🧱, ACCESSIBILITY ⚖:

  🔹This is a meaningful image and therefore the alt text should give a good description in case the user cannot see it for some reason.

  CSS 🎨:

  🔹Length units such as pixels may not be the best alternative because screen sizes and user preferences vary, and absolute units don’t scale. Relative units like em or rem are a better option for scalable layouts (the page will adjust to the user's browser settings) and maintenance (to make changes without having to adjust every pixel value).

  🔹You don't need to use font-weight as 400 and 700 are the default values for normal and bold font respectively.

  Please let me know if you disagree with something or if you would like more information on any of these topics.🙂

  Regards

  Marked as helpful

  1
• 

  Bader Idris•2,880

  @Bader-IdrisPosted over 1 year ago

  You can set the container in the middle of the screen whatever user changes it when you add these properties to it in CSS:

  .container {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  

  the new feature is transform, it has many lovely properties you can discover, I personally love it. Hope it's useful

  1