@correlucas
Posted
👾Hi @IscMiguelAngel, congratulations on your solution!👋 Welcome to the Frontend Mentor Coding Community!
Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:
- Use
<main>instead of a simple<div>this way you improve the semantics and accessibility showing which is the main block of content on this page. Remember that every page should have a<main>block and that<div>doesn't have any semantic meaning. - Your HTML code is not optimized yet, since it's too long and has some unnecessary elements. To make it clean you start by removing some unnecessary
<div>. For this solution you wrap everything inside a single block of content using<div>or<main>(better option for accessibility) and put inside the whole content<img>/<h1>and<p>.
<body>
<main>
<img src="./images/image-qr-code.png" alt="QR Code Frontend Mentor" >
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</main>
</body>
Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR
✌️ I hope this helps you and happy coding!
Marked as helpful
@IscMiguelAngel
Posted
Hello, thank you for your observations.
I made the necessary corrections to improve accessibility, replacing <div id="root"> with <main id="root">, however the card container elements will not be removed anymore which are part of the goal of REACT JS, which is to create reusable elements. I invite you to analyze the code of my solution.
Greetings ✌️.
