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

Order Summary Component

Dalia Muj 40

@DaliaMuj

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison

SolutionDesign

Reports

Accessibility report (2)
warning

Document should have one main landmark

<html lang="en">
Learn more
warning

All page content should be contained by landmarks

<div class="container">
Learn more

Dalia Muj’s questions for the community

I really enjoyed doing this project! I tried to make it as close to the desired design as I could. Any advise about my code is welcome!

Community feedback

Ken 975

@kenreibman

Posted

Hi @DaliaMuj ! I'm happy that you enjoyed the project, you did a great job!

I have a few things that stand out to me which I hope would benefit you:

  • The first thing I notice is your background. Most times when you set a background with an image, your image will repeat indefinitely. Sometimes it's great. However in this challenge, to match the original design, you only need one background image.

  • In order to prevent that, in your css, give the body where the background-image is being set, another line called: background-repeat: no-repeat.

  • Then give it another line background-color: and set the color to the slightly lighter blue that the ReadMe file gave you, and you've got a very similar looking background to the original!

  • There are some weird horizontal scrolling in your project which I also fixed by change your height: 100vh to min-height: 100vh

  • I would also give your body a margin: 0 and padding: 0 to reset any default margins and padding that html puts onto your elements.

  • Usually you want your site's content to be wrapped in a main element. I would change your div with the class of container to a main element with the class of container to make it semantically correct. <main class="container"></main>

  • The two buttons - "Proceed to Payment" and "Cancel Order" are currently input tags which are strictly used for form fields, like when you want a user to input their email/password. In this case, you wouldn't want that here. Instead I would use an a tag (anchor tag) and style them. You did it correctly for the "Change" button. Anchor tags are also more "style-able" if you give it a display: block as well.

  • Also remember to style your :hover and :focus states for those two buttons to visually show that it is interactable.

I hope this helps, great job! Keep it up!

0

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!