Design comparison
Solution retrospective
This challenge had a speechbubble that I struggled with a bit. I made it but I still don't fully understand what I did so I'll have to work on it. I am also still learning how to make things responsive so this page isn't. But when I change the size of the screen, the speechbubble doesn't move with the rest of the components. I haven't figured out why.
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing your first challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
HEADINGS ⚠️:
- This solution generates accessibility error reports due to lack of level-one heading
<h1>
- Every site must want at least one
h1element identifying and describing the main content of the page.
- An
h1heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.
- So we want to add a level-one heading to improve accessibility by reading aloud the heading by screen readers, you can achieve this by adding a
sr-onlyclass to hide it from visual users (it will be useful for visually impaired users)
I hope you find it helpful ! 😄 Above all, the solution you submitted is great
Happy coding!
0 - @0xabdulPosted over 1 year ago
Hey there ! 👋 Congratulations you finished the Fylo data storage component...🎉
- some suggestions for you improve your code
Html 🏷️:
- for Accessibility reports you using the and div tag to wrap the whole html code and put attribute role="main" is correct way 🎯 and using the header tag those all are problem to occur the Accessibility reports
- In Fact using the img tag you mentioned the alt attributes but there is not description the alt 🤔 Ex :
<img src="logo.jpg" alt="logo"></img>
<body> <div class="container" role="main"> //Whole html code <h1> </h1> <h2> </h2> <h3> </h3> //by ordering using the header tag </div> </body>- I Hope it's useful for you and wating for your next project ❤️
- 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