QR code container using basic HTML and CSS

Community feedback

• 

  P

  solvman•1,650

  @solvmanPosted 9 months ago

  Hi @emtee-1023 👋

  Very well done! 🎊🎉🚀

  It was great that you used the main element to wrap the page's content. However, you don't need to wrap every single element with a div. You can assign CSS classes to those elements directly. Remember, div is a non-semantic element. Strive to use semantic elements where it is possible. It will benefit SEO and the accessibility of your project big time. With that being said, you could do something like that:

  <main role="main" class="container">
     <h1 class="visually-hidden">Frontend mentor project submission</h1>
     <article class="card">
        <img class="card__qr-code"src="images/image-qr-code.png" alt="qr code">
        <h2 class="card__title">Improve your front-end skills by building projects</h2>
        <p class="card__text">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
     </article>
  </main>
  

  Remember, heading levels represent levels of heading subsections, not typographical decoration. The best-fitting heading for the card is most likely h2. It would be best if you did not skip sections; h1 should be followed by h2 and so on. In this project, you could temporarily add a visually invisible h1 element to avoid breaking hierarchy rules. You may read more about heading hierarchy in HTML - Live Standard - Headings. Having hidden semantic elements like that significantly improves accessibility. Though it is not visible on the page, it will be read by screen readers announcing its title, and it maintains a hierarchy of headings. The visually hidden class could look like this:

  .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;
  }
  

  Otherwise, very well done! 🚀 Impressive! 🎉 Keep it up! 👍

  Marked as helpful

  2

  ---

  

  Mark Talamson•110

  @emtee-1023Posted 9 months ago

  @solvman I appreciate your feedback, quite helpful.

  However, regarding the class "visually-hidden", is it ok to simply use display: none; ?

  1

  

  P

  solvman•1,650

  @solvmanPosted 9 months ago

  @emtee-1023 Great question 👍

  In short, display: none completely removes the element from the layout, like it wasn't there at all, whereas having a hidden class, still keeps the element within the document flow. It makes it visually invisible, but still accessible to screen readers. Thus, the name of the class 😊

  You may read more about it in the following articles:

  • ⭐CSS display:none and visibility:hidden – What's the Difference?
  • ⭐Design vs. accessibility and the CSS visually-hidden class

  Marked as helpful

  0