@correlucas
Posted
👾Hello Abdullah Al , Congratulations on completing this challenge!
Your solution is great and the code is working, but the html structure can be reduced by removing unnecessary divs, all you need is a single <main> or <div> to keep all the content inside, and nothing more. The ideal structure is the div and only the image, heading and paragraph.
Here’s one example to show can be cleaner this HTML structure:
<body>
<main>
<img src="./images/image-qr-code.png" alt="Qr Code Image" >
<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>
To reduce the CSS you can use the direct selector for each element instead of using class this way you have a code even more cleaner, for example, you can select everything using the direct selector for (img, h1, and p, main).
Don't forget to use the alt text to allow screen readers to recognize that img. Adding alternative text to photos is first and foremost a principle of web accessibility. Visually impaired users using screen readers will be read an alt attribute to better understand an on-page image.
✌️ I hope this helps you and happy coding!
Marked as helpful
