QR-Code Component using Flexbox

Hi @ProgramJones,

Nice project! Here are a few additional recommendations:

OG Meta Tags: I strongly recommend using OG (Open Graph) meta tags to improve SEO and the shareability of your site. Proper OG tags can significantly impact how your site appears when shared on social media and can make a difference in search engine ranking, potentially affecting whether your site appears in search results.

ARIA Labels: When semantic HTML elements aren't applicable, make sure to add aria-label attributes to your <div> elements. This practice enhances accessibility and contributes positively to SEO by helping screen readers understand the content and purpose of these elements.

Avoid Styling with IDs: Try to avoid using IDs for styling, as it can lead to issues in larger projects. Instead, use classes for better flexibility and maintainability in your CSS.

Custom QR Code Challenge: As an extra challenge, consider creating your own custom QR code. It can be a fun learning experience and something interesting to share with others.

Keep up the great work!

Best, Teodor

Limited Browser Support for :root Variables:

• The :root variables might not work correctly in older browsers. Providing fallbacks could improve compatibility. Here is a quick VIDEO about how you can create a fallback to the variable

Font Sizing and Scaling:

• If the font size is defined in pixels (px), it could create scaling issues on different devices. Using em or rem would be more flexible. And here is how we use rems:

html {
font-size: 62.5% // It means that 1rem = 10px. From this it is easier to use rem
}

p {
font-size: 1.6rem; // Here this paragraph font-size will be 16px;
}

If you don't understand it already here is a VIDEO

Hope you found this comment helpful 💗

Good job and keep going 😁😊😉

its a good platform foor practicing .