Submitted 11 months ago

Order Summary Component using basic HTML and CSS

kwokkw•80

@kwokkw

Preview site View code

This is a solution for...Order summary component

HTML
CSS

1newbie

Design comparison

SolutionDesign

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

Melvin Aguilar 🧑🏻‍💻•61,140
@MelvinAguilarPosted 11 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 helpful
0
kwokkw•80
@kwokkwPosted 11 months ago
Hello @MelvinAguilar,

Thank you for advice! Lesson learned!
0
Harry-Crocksick•70
@Harry-CrocksickPosted 11 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
kwokkw•80
@kwokkwPosted 11 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

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