Skip to content
Submitted 9 months ago

QR-code component

Olanrewaju•80
@LANRIE-DEV
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud of my hunger for more insight and knowledge. and each time I embark on a challenge, I make sure I apply my corrections and learn more from them.

What challenges did you encounter, and how did you overcome them?

No challenges whatsoever.

What specific areas of your project would you like help with?

Accessibility and hierarchy rules.

Community feedback

  • solvman•1,650
    @solvmanPosted 9 months ago

    Very well done! 🎊🎉🚀

    I have a few suggestions for you:

    • ⭐️ Great job using semantic HTML! Such widgets as cards are more suited to be constructed with the <article> element, which encapsulates reusable, self-contained content.

    • ⭐️ A card-like widget's most appropriate heading level is likely <h2>. Great job!

    To avoid breaking hierarchy heading rules, I added an invisible <h1> heading to announce "Frontend mentor project submission" to accessibility users. Visually hidden class (it is also called sr-only which is "screen reader only") for the <h1> :

    .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

    You could add it above the card like so:

    <body>
  <main id="container">
    <h1 class="visually-hidden">Frontend Mentor project submission</h1>
    <article class="card">
...

    • ⭐️ Consider using REM units for margin, padding, and font size.

    • ⭐️ Consider the use of custom global variables. 👍

    Otherwise, very well done!🎊 Keep it up!👏 I hope you find my comments useful 🫶

    Marked as helpful
    2
    DPOsengo•50
    @DPOsengoPosted 9 months ago

    @solvman Hi, very interesting additions, I learned the sr-only trick and about the correct semantic sizes for card's titles!

    2
    Olanrewaju•80
    @LANRIE-DEVPosted 9 months ago

    @solvman Thank you for the feedback, really appreciated.

    Will get to the corrections promptly.

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord