@Aggressive-Mohammed
Posted
Hello clickglue!!!
Your HTML structure is clean and follows basic best practices, but there are a few improvements you can make to enhance both structure and accessibility.
Suggested Improvements: Move the <body> Tag: The <body> tag should directly follow the <head>. Currently, the <header> and <main> tags are placed outside the <body> tag, which breaks the structure of the HTML document.
***Alt Text Enhancement: **** The alt text for the QR code image can be more descriptive. Mention what the QR code does:
<img src="./images/image-qr-code.png" alt="QR code that links to Frontend Mentor website" />
***Ensure Semantic HTML: *** The <main> tag is correctly used for the main content. However, since there’s no content in <header> and <footer>, consider removing them unless you plan to add content in those sections later. This simplifies the structure:
***Use of Classes: *** The class names like ff-outfit-700 and ff-outfit-400 could be replaced with more descriptive class names, indicating the purpose of the text instead of the font weight. Example:
<h3 class="headline">Improve your front-end skills by building projects</h3>
<p class="description">
Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
</p>
Accessibility Improvements:
Wrap the main content inside an <article> for better semantics, as it's a self-contained piece of content:
<main>
<article>
<img src="./images/image-qr-code.png" alt="QR code that links to Frontend Mentor website" />
<h3 class="headline">Improve your front-end skills by building projects</h3>
<p class="description">
Scan the QR code to visit Frontend Mentor and take your coding skills to
the next level.
</p>
</article>
</main>
By following these suggestions, your code will become more structured, accessible, and easier to understand both for users and developers. You did great. Keep it up!!!
Marked as helpful
@clickglue
Posted
@Aggressive-Mohammed Hi Ibrahim, thank you so much for your very helpful feedback! Great that you spend time and attention to help newbies like me!
