Used HTML5 and CSS to complete this project.

Community feedback

• 

  P

  solvman•1,650

  @solvmanPosted 9 months ago

  Very well done! 🎊🎉🚀

  Remember, heading levels represent levels of heading subsections, not typographical decoration. It would be best if you did not skip sections; <h1> should be followed by <h2> and so on. I suggest you replace <h3> with an <h2> element, which is the most appropriate for a card-like widget. 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

  Visually hidden class 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;
  }
  

  I love your use of the semantic HTML <main> element. I suggest you use the <article> element to wrap your card. Remember, <div> elements are non-semantic elements. Strive to use semantic elements where it is possible. It will benefit SEO and the accessibility of your project big time.

  <main>
        <h1 class="visually-hidden">Frontend mentor project submission</h1>
        <article class="card">
          <div class="card__image-container">
            <img src="./images/image-qr-code.png" alt="qr-code" />
          </div>
          <div class="card__content">
            <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>
          </div>
        </article>
  </main>
  

  Otherwise, very well done! 🚀 Impressive! 🎉 Keep it up! 👍 I hope you find my suggestions useful 🫶

  Marked as helpful

  1

  ---

  

  Victor Bruce•140

  @victorbrucePosted 9 months ago

  Thank you very much @solvman for your detailed feedback. I agree with you on using semantic HTML where necessary, especially for SEO and accessibility reasons instead of using divs. Moreover, I felt uncomfortable using the h3 element immediately as I knew it went against the heading hierarchy rule in HTML. I love your CSS class hack, I will modify my code to correct the suggestions you've raised.

  Lastly, I want to find out, what will happen if I modify the .visually-hidden class and set only the visibility property to hidden. Will that also count?

  Thank you once again.

  1

  

  P

  solvman•1,650

  @solvmanPosted 9 months ago

  @victorbruce

  There possibly several approaches to hiding an element:

  1. display: none completely removes the element from the layout, as if it weren't there.
  2. visibility: hidden hides an element but will still take up the same space. The element will be hidden but still affect the layout. It is accessible to screen readers.
  3. The .visually-hidden class keeps the element within the document flow. It makes it visually invisible, partially removes it from the layout, makes the footprint as small as possible (It will still count as a node of grid or flexbox), and makes it 1px small. However, it is 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

  I hope it was helpful 🫶

  1

  

  Victor Bruce•140

  @victorbrucePosted 9 months ago

  @solvman Yes, it was. Thank you. 🙏

  0
• 

  Kulyk-Volodymyr•660

  @Kulyk-VolodymyrPosted 9 months ago

  Nice solution!

  I think you did everything right - his component can be done without media queries. The only thing that can be changed - height: 100vh in body to min-height: 100vh. After that this component will not be partialy hidden on mobile horizontal screen.

  2

  ---

  

  Victor Bruce•140

  @victorbrucePosted 9 months ago

  @Kulyk-Volodymyr Thank you for viewing my code and I agree with your suggestion of using min-height to avoid cutting off the card on smaller device screens.

  1