Design comparison
Community feedback
- @3eze3Posted 9 months ago
Hi OliCB , very good solution for this challenge. 🎊
I have some recommendations that may help you in future challenges.
HTML:
-
Starting every project with an <h1>, although it makes use of a <header>, does not have the same meaning as an <h1>.
-
When we find ourselves with images that are only decorative, do not have a strong impact, then we can choose to use an aria-hidden. in the decorative images:
<img class="card__icon" src="assets/images/icon-star.svg" alt aria-hidden="True" />
-
Use of semantic tags, <article> to represent in itself a self-contained or complete element, for example it would be better to use the <article> to encompass an entire side of the letter or better a section, and you could separate it into two sections Front and back section.
-
The use of forms a direct interaction with the user and where they send some kind of data, it would be better that you replace the <div> by <form> and use <inputs> of type radio buttons, since you will receive data, and instead of <div> as button, replace it directly with the <button> tag so that the HTML code has a value by itself and is not something generic, but something semantic in which search engines and screen readers have references and know where they are.
Also, although it may seem more complicated to structure in this way, at the time of making interactions with Js, it is much easier and more flexible.
I hope these tips help you and keep going.
Happy coding 🥏
Marked as helpful1 -
Please log in to post a comment
Log in with GitHubJoin 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