Frontend Mentor | QR Code Component using HTML and CSS coding challenge solution

Community feedback

@ecemgo

Posted over 1 year ago

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

HTML

In order to fix the accessibility issues:

You don't need <header> tags inside the <div class="attribution">
However, you need to replace <div class="attribution"> with the <main class="attribution"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.

<body>
  <main class="attribution">
    <img src = "images/image-qr-code.png">
    <h1>Improve your front-end skills by building projects</h1>
    <p>Scan the QR code to visit Frontend<br> 
      Mentor and take your coding skills to<br> 
      the next level.</p>
  </main>
</body>

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.

CSS

It would be better if you change the name of the div to .attribution and the header to h1:

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

  border-radius: 15px;
  margin: auto;
  background-color: white;
  width: 400px;
  padding: 20px;
}

h1 {     
  font-family: "Outfit", sans-serif;
  font-weight: 900;
  color: hsl(218, 44%, 22%);
  font-size: 15px;
}

Hope I am helpful. :)

Marked as helpful

Bader Idris• 2,900

@Bader-Idris

Posted 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 {
  display: 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

QR Code Component using HTML and CSS

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community