Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order Summary Component using basic HTML and CSS

kwokkwโ€ข 80

@kwokkw

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@MelvinAguilar

Posted

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

@kwokkw

Posted

Hello @MelvinAguilar,

Thank you for advice! Lesson learned!

0
Harry-Crocksickโ€ข 70

@Harry-Crocksick

Posted

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

@kwokkw

Posted

@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 GitHub
Discord logo

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