Skip to content
Submitted over 1 year ago

Order Summary Component

Chris•100
@DeveloperChrisP
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

HTML/CSS project cause I was too scared to attempt a Javascript one. I used grid to house the image/heading/paragraph; This seemed to work, I'm not sure if there's a better way.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Øystein Håberg•13,280
    @Islandstone89

    Hey, you have done a really good job here! What I like:

    • Including the <main> and <footer> landmarks.

    • Proper CSS Reset at the beginning of the stylesheet.

    • Good use of Custom Properties.

    Here are a few things to take note of:

    HTML:

    • The image is decorative, so its alt text should be empty: alt="".

    • Personally I see "Proceed to payment" as a link, as it would navigate to the next page.

    • Text in .attribution must be wrapped in a <p>.

    CSS:

    • .attribution has font size in px, which is bad for accessibility. Change it into rem.

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