Hi there o/
I have a few suggestions on improvement:
-
When hover effects are involved, try to use either
<a>or<button>elements. Interactive elements typically link you to another page or triggers something to happen on the page. Using the right semantic elements would ensure better accessibility - think of navigating with the keyboard to highlight/trigger these elements. -
The
h2element by default is adisplay: blockwhich means it stretches to the full width. As the:hoveris added directly to h2, it means that if your mouse is on the empty space to the right of the text, the hover effect would be triggered which is a little weird. Following point 1, I'd suggest something like this to fix the issue:
<h2><a href="#">Equilibrium #3429</a></h2>
a {
color: white;
text-decoration: none;
}
a:hover,
a:focus {
color: cyan;
}
-
For image alt text, if it is a decorative image, keep the alt text but leave it as empty, e.g.
<img src="/images/icon-clock.svg" alt="">. For non-decorative images, remember to add an alt text describing what the image is. -
Try to use landmark HTML elements. For example,
<body>
<main>
...
</main>
</body>
Hope this helps!
Marked as helpful
@Kortlish
Posted
@Milleus Thank you for your advices! I'll be using those solution in the future :)
