Design comparison
Solution retrospective
I am unsure of the structure and CSS of the inner container that contain the image, text, price, and link.
<div class="card-plan-container">
<!-- How would you describe this alt text? -->
<img src="images/icon-music.svg" alt="This is a music icon.">
<p>
<span class="plan-text">Annual Plan</span>
<span class="price">$59.99/year</span>
</p>
<a href="#" class="link-change">Change</a>
</div>
Also, how would a professional give a detailed alt
to the hero image and music image on this page?
Any additional comment/advice will be greatly appreciated. Mahalo!
Community feedback
- @MelvinAguilarPosted 12 months ago
Hello there ๐. Good job on completing the challenge !
I have other suggestions about your code that might interest you.
- If the images on the page are purely decorative and don't add meaningful content to the page, it's appropriate to leave the alt attribute empty (
alt=""
). This signifies that the image is decorative, and it allows assistive technologies like screen readers to ignore the image, reducing unnecessary noise for users who rely on those technologies.
- For the pricing section, since they are two distinct pieces of information, you could consider replacing your
<span>
tags with<p>
. Then, use a<div>
to group these two paragraphs. Additionally, consider changing the "change" element to a<button>
. Even though it has styles resembling a link, the expected action is to click and change the plan, which is better represented by a button.
I hope you find it useful! ๐
Happy coding!
Marked as helpful0 - If the images on the page are purely decorative and don't add meaningful content to the page, it's appropriate to leave the alt attribute empty (
- @Harry-CrocksickPosted 12 months ago
You don't need to give alt attribute's value an explanation like 'This is a music icon'. You can give an appropriate name like 'Music Icon' straight. Better not divide paragraph with <span> inside <p></p>. Btw great job!
0@kwokkwPosted 12 months ago@Harry-Crocksick
Hello, thanks for your advice. I was not sure how to stack the Annual Plan and the price. Do you know what is the best practice to achieve that?
0
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