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

HTML SASS(SCSS) CSS GRID

Will 30

@bws10

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


This is my first attempt at one of these challenges.

I'm trying to teach myself and have no previous experience but looking to learn CSS and JS front end development.

I'm sure my code is a bit messy and i welcome any constructive feedback.

Community feedback

Amon 2,560

@A-amon

Posted

Hello! It looks great. So is the responsiveness~ 😀

Here are few suggestions:

  • Wrap your site's main content into a <main> tag. 🏠
  • Have a <h1> heading. Probably something like this:
<h1 class="sr-only">Order summary component</h1>

Note: The .sr-only class is to hide it from view but still available for screen reader. Here is one way to do it. 😉

  • Use <button> or <a> for your 'Proceed to payment" and "Cancel" elements.
  • After fixing the <h1>, you can read up on heading levels if you get Heading levels should only increase by one accessibility issue 👌
2

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