Submitted 10 months ago

Qr-code-component

PROMISE UZOR OKWUDIRI•660

@upovibe

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Qr-code-component 👨🏽‍💻

Technologies used 🚀✨

HTML🏗
CSS️🎨

Features 🎯

Semantic Arrangement✨
Dynamic Animations🎭
Prettier Arrangement🌈

You can check me out

Ready to tag along on my coding escapades? Join my adventure, where I challenge projects here.

🌌 Feel free to add your opinion about any possible improvements to the code and accessibility. 🙃

Community feedback

solvman•1,650

@solvmanPosted 10 months ago

Very well done! 🎊🎉🚀

I have a few suggestions for you:

⭐️ Great job using <main> semantic element! Semantic elements significantly improve the SEO and accessibility of your project. First, the <main> landmark element represents the primary content of the document and expands on the central topic of the document. You should wrap your content in <main>. Such widgets as cards are more suited to be constructed with the <article> element, which encapsulates reusable, self-contained content. The attribution piece most likely fits to be encapsulated by the <footer> semantic element.
⭐️ Titles and headings are usually denoted by <h1>, <h2>, <h3>, and so on. Do not skip levels of headings. Regular text is generally encapsulated by <p>. A card-like widget's most appropriate heading level is likely <h2>.

With that being said, I would redo your code as so:

<body>
  <main id="container">
    <h1 class="visually-hidden">Frontend Mentor project submission</h1>
    <article class="card">
      <img src="./images/image-qr-code.png" alt="QR Code">
      <h2>Improve your front-end skills by building projects</h3>
      <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </article>
  </main>
  <footer class="attribution">
      ... attribution goes here
  </footer>
</body>

As mentioned above, the <h2> heading is the most appropriate for the card-like widget. 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;
}

Learn more about semantic HTML elements here

You don't need to use Flex for the card contents. Please remember that block-level elements stack one on top of the other. The only element not block level within the card is <img>, which could be "converted" to block level through a simple reset, which you already did. I suggest you not hard-set the image size since it makes it not responsive to viewport size changes.

⭐️ You don't need margin-left: auto and margin-right-auto. You can center the text by doing text-align: center;
⭐️ Great job using Flex to place the card in the middle of the screen. It is a perfectly viable choice. There is another method that does the same. I prefer the Grid since it is only a line shorter:

body {
    height: max(100vh, 700px);
    display: grid;
    place-content: center;
}

⭐️ Consider using REM units for margin, padding, and font size.
⭐️ Great use of custom global variables. 👍

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

Marked as helpful

PROMISE UZOR OKWUDIRI•660

@upovibePosted 10 months ago

@solvman thanks for the clearification

Craig•190
@cchiversPosted 10 months ago
Awesome job, this looks really good!!
Marked as helpful
1
PROMISE UZOR OKWUDIRI•660
@upovibePosted 10 months ago
@cchivers thanks for the appreciation
0
Petrit Nuredini•2,860
@petritnurediniPosted 10 months ago
Congratulations on finishing the QR code project! It's great to see your commitment to learning and improving your front-end development skills. Here are a few recommendations to enhance your project:

Semantic HTML:

Replace the non-semantic <main> <h1>Heading 1</h1> with a more descriptive heading that reflects the content of your page. If it's not needed, consider removing it entirely.

Use a <figure> and <figcaption> element around your QR code image and its description for better semantic structure.

CSS Styling:

For .qr-card img, avoid fixed heights for responsive design. Instead, use max-height or height: auto; to maintain the aspect ratio of the image.

The .attribution class in CSS is positioned absolutely at the bottom. Ensure it doesn't overlap with other content on smaller screens. You might want to consider placing it within the normal document flow or adjusting its position responsively.

Accessibility and SEO:

Add alt text for images that is descriptive of what the image represents, especially for the QR code. This helps improve accessibility for screen reader users.

The <title> tag content 'Qr-code' is a bit vague. Consider a more descriptive title for better SEO and accessibility.

Learning Resources:

Semantic HTML: MDN Web Docs - HTML elements

CSS Best Practices: MDN Web Docs - Responsive images

Accessibility and SEO: WebAIM - Alternative Text

Keep up the good work! Your progress is evident, and every project you complete brings you one step closer to mastering front-end development. Stay curious and keep experimenting!
0

Please log in to post a comment

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