Skip to content
Submitted 11 months ago

Order Summary Component

Chris•100
@DeveloperChrisP
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

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.

Community feedback

  • Øystein Håberg•10,710
    @Islandstone89Posted 11 months ago

    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.
    1
    Chris•100
    @DeveloperChrisPPosted 11 months ago

    @Islandstone89 Thank you for those positives & the constructive feedback - That all makes sense. I will make those adjustments.

    Annoyingly I realized I'd forgotten to refactor the 'desktop' sizes after I'd uploaded, so will amend that too. Thanks again.

    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