@denielden
Posted
Hi Kristina, congratulations on completing the challenge, great job! π
Very clean code and amazing animation on the hover effect!! I love it.
Some little tips for optimizing your code:
- use the
main
tag to wrap the card and improve the Accessibility - you can use
article
tag instead of a simplediv
to the container card for improve the Accessibility - Using
<hr>
for the line is not the best way because this tag have a semantic meaning... in this case use div withborder-bottom
because this line is decorative
Hope this help! Happy coding π
Marked as helpful
@KristinaRadosavljevic
Posted
@denielden Thanks for your feedback, Deniel! :)
I did consider just using a border for the line, but I wasn't aware that <hr>
is semantic so I opted for that. Lesson learned! :D
And I actually did use the <main>
tag for the entire card in HTML, I just selected it using its class name in CSS, not sure if that messes with accessibility somehow and what the best approach is?
Anyway, great points and thanks again for taking the time to review my solution, much appreciated! :)
@denielden
Posted
@KristinaRadosavljevic You are welcome and keep it up :)
The best approach is to use main for the purpose of accessibility and then use it to contain all the central elements and contents of the page, as written in the docs
The <main> HTML element represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.