Skip to content
Submitted over 2 years ago

Order Summary using Flexbox

Adenike Adeyemi•40
@nikea1
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This was a bit more involved than expected. Especially that Annual Plan div. Also, I noticed that when I used flexbox the div would stick out of the container at times. I think I fixed but what's the best way to avoid that behavior?

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    Nice work on this challenge, Adenike! 👍 You wrap all the page content with the correct landmark elements and use the heading tags in order. Well done! 👏

    There are some areas that you could improve.

    • Not all images need alternative text. In this case, all images are decorative only so I would suggest leaving the alt="" empty and adding aria-hidden="true" to prevent the VoiceOver screenreader pronounce the empty alt images.
    • Always specify the type of the button. In this case, set the type of them as type="button". It's going to prevent the button from behaving unexpectedly (like submitting).
    • Always use a meaningful element to wrap text content. I notice that the attribution text is wrapped by a div.

    I hope you find this information useful! Keep up the fantastic work! 👍

    1

Please log in to post a comment

Log in with GitHub

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