Design comparison
SolutionDesign
Solution retrospective
Really Enjoyed Doing It!
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.
HEADINGS ⚠️:
- This solution generates accessibility error report: Heading levels should only increase by one". This is because headings must be in a sequentially-descending order to be correct logically.
- This webpage contains an <h1>, <h3>, <h4>. It is missing an <h2>. For a more easy accessibility would recommend you change your <h3> tags to <h2> tags and <h4> tags to <h3> tags.
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="container"> element with the semantic element <main> along with <div class="header"> into a <header> element also the <div class="navBar"> into a <nav> element also the <div class="main"> into a <section> 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>.
I hope have been of help, Please feel free to ask any question
Happy Coding 🎉
Marked as helpful0@vedantlambaPosted over 1 year ago@Samdevtechnology Thankyou For Correcting Me On Those Semantic Elements Thing! I'll Fix That In This Project Soon, And On My Next Projects I'll Keep That In Mind!
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