Not Found
Not Found
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
Your session has expired please log in again.
Your session has expired please log in again.
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Your session has expired please log in again.
Not Found
Not Found
Not Found

Submitted

Order Summary Component

Chris 100

@DeveloperChrisP

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


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

P

@Islandstone89

Posted

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

@DeveloperChrisP

Posted

@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
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