Design comparison
Solution retrospective
Hi ! i'm new to coding so i tried my best to complete this challenge. Everything is kinda hard for the moment So ! Feel free to leave me a comment and give me some tips and tricks.
Community feedback
- @SamdevtechnologyPosted over 1 year ago
Hello there 👋. Congratulations on a job well done! 🎉 🎉 🎉
- I would like to make some suggestions concerning your code that might be of help.
HTML 🏷️:
- This solution generates accessibility error report: "All page content should be contained by landmarks". This is due to a non-semantic markup, which causes a lack of landmark for a webpage.
- So fix this by replacing the <div class="qr-code-container"> element with the semantic element <main> along with <div class="attribution"> into a <footer> element in your index.html file.
- What is meant by landmark ?: They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers. We make use of sematic elements to provide landmarks to our webpage example includes <main>, <aside>, <footer>, etc., instead of relying on generic elements like <div> or <span>.
HEADINGS ⚠️:
- This solution generated accessibility error report: Page should contain a level-one heading. This is due to the lack of a level-one heading <h1>.
- Headings provide structure to a webpage. It helps Search engines and Users to determine the most important piece of texts in a webpage.
- Every webpage must have at least one h1 element identifying and describing the main content(text) of the page.
- Would recommend to change the <h3> to a <h1>, As it the main heading in the page.
CSS 🎨:
In the Design Just the Outfit font is used for all text. to achieve this in your code add font-family: 'Outfit' to the body selector and remove the font-family style from the h3 and the p selector.
body { font-family: 'Outfit'; }
Marked as helpful0@Matt971xPosted over 1 year ago@Samdevtechnology Wow thanks a lot for this answer, i'm taking some notes ! i'll try to not make the same errors next time ! Thanks you so much !
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord