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

Summary component using CSS custom properties and data attributes

R Hayes 240

@ryanthayes

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Hassia Issah 50,650

@Hassiai

Posted

Replace <h2> with <h1> to fix the accessibility issue.

Every html must have <h1> to make it accessible. Always begin the heading of the html with <h1> tag wrap the sub-heading of <h1> in <h2> tag, wrap the sub-heading of <h2> in <h3> this continues until <h6>, never skip a level of a heading.

You forgot to give the body a background-image with a background-size of contain and background-repeat of no-repeat. The background-image can be found in the images folder in the zip folder you downloaded.

This challenge requires a media query , in the media query you have to change the background-image of the body.

You forgot to give the button a box-shadow value.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

0

R Hayes 240

@ryanthayes

Posted

@Hassiai I don't understand switching to H1. I thought an HTML page should have ONLY ONE H1 tag. If this is a component, wouldn't be part of a larger page? Thus, you'd have TWO H1s?

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