Design comparison
SolutionDesign
Solution retrospective
Hello there I build this website using react,styled-component, CSS grid,flex-box
if there is any suggestion to optimize this code I will be grateful for any notes
Community feedback
- @0xabdulPosted over 1 year ago
Hi
Saif Mohammedwell congratulations on completing the Manage landing page- A Few Feedback for improve your code and clear the all Accessibility reports
IN HTML 📃 :
L I N K S 🖇️
- link must have text format and link used in proper way Ex :
We use :
<a href="taxhike.html" aria-label="Read more about Seminole tax hike"> [Read more...]</a>- Don't skip that !
L A N D M A R K 🚀
- The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.
- To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements
- Note This Elements are don't sikp
- semantic elements :
<aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect.. - non- semantic elements :
<div> , <span> ect ... - for easy way to clear the Accessibility reports using non semantic elements Ex :
<body> <div class="container" role="main"> // All html code goes here : 📃 </div> </body>- Or
- using semantic elements
- Ex :
<header> should be put heading or logo📸 </header> <nav> //Links here </nav> <main> Main of the contents 📃 </main> <footer> ©copy right here📍 </footer>I Hope it's useful for you and Happy Coding 🤩
0
Please log in to post a comment
Log in with GitHub
Join 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