Responsive Notifications page
Solution retrospective
- The "Mark all as read" button is a <p> element. On the preview image when the mouse hovers on it the cursor changes. I don't think that it would make sense to make it into an <a> since it doesn't link anywhere. So I just changed the cursor type in CSS. Did I make the right choice?
- For the small image on the right side I used outline instead of border in the hover state because with border it would push the element below it down every time you hover over it and it looked awful. Does the outline and border have some major difference(beside that the former doesn't take up space) that I should look out for?
Thank you for the feedback.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Eileenpk
Hi Decimo, your project looks good.
To answer your first question, a
<button>tag should be used in HTML when you want to create a clickable button that can be interacted with by the user. This can be used for form submissions, triggering JavaScript actions, or linking to other pages. It is important to use the<button>tag instead of other elements, such as<div>or<a>, to ensure that the button is properly formatted and accessible to users. If you don't want to use a<button>tag always include role="button" as an attribute in the substitute tag, to let screen readers know the context of it.For your second question, I think it's ok that you used an outline, just watch out because the outline is drawn outside the element's border and it can overlap other content.
Hope you found this helpful!
- Let's connect on LinkedIn! - @Eileenpk
Marked as helpful
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