QR Code Components

Hello

There are some important principles to learn in this challenge

1. Content should always be contained within landmarks. That means you need a main at least on every page so it's good to get into that habit now. Place the attribution content in a footer landmark outside of main too.
2. Learn about image alt text, what it is and how to use that attribute in meaningful vs decorative images. There is a good post in the discord resources channel about how to write good alt text. In this, you must Change the alt text you have written so far. It is not code, it is content. It needs to say what the image is (QR code) and where it goes (to FrontendMentor.io)
3. Keep html as simple as possible. Think about this. Do you need a text div at all in this?
4. Always use a modern css reset at the start of the styles. Andy Bell has a good one you can look up and use.
5. The component max width should be in rem not px. This avoids a horrible narrow card for users who enlarge their font size.
6. IMPORTANT - never write font size in px! Use rem.
7. Keep css selectors as low specificity as possible. Use single class selectors not nested selectors if at all possible

Hi @TariCodes,

Great job completing this project! 🎉

I have a couple of suggestions:

📌 First: You should swap colors for the body background and paragraph text.

📌 Second: You should always start with <h1> element, not <h2>. In HTML, <h1> through <h6> tags are used to define headings, with <h1> being the highest level. Using them in order helps maintain the semantic structure of the document. It is important for SEO, accessibility, and semantic correctness. When you think of an h-tag, think not of style and size but more of the semantic structure of the document.

📌 Third: wrap the main content of your HTML in the <main> element, which is also a semantic element representing the document's main content. Remember, <div> is not a semantic element and does not provide any meaning for SEO and accessibility. Instead of <div class="card-wrapper"> you should do <main class="card-wrapper">.

Otherwise, very well done! 🎉🚀❤️

Hi,

Good job, one thing I would change is text color in the description paragraph, use darker one for better readability, u can use coolors site for checking contrast ratio between text and background color.