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 Challenge using HTML and CSS

@driespindola

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 challenge seemed hard at first but I think it was the most satisfying result so far! Please tell me where I should improve!

Community feedback

P
Fluffy Kas 7,735

@FluffyKas

Posted

Heyo,

This looks like a pretty good solution, well done ^_^ There's a few things you could do here though:

  1. To make the background pattern cover the whole width you can add a background-size: contain to the body.

  2. Buttons come with a lot of default styles that need to be overwritten, like font-family. If you don't specify font-family, your buttons will just use the browser's default (as they do now).

  3. You could add some hover states to the buttons and links, it would look nice!

  4. If you'd like to make any text bold, style them with css and not with adding <b> tags, as that has a semantic meaning to it (that I don't think is necessary here).

  5. Add alt texts to your images. Not sure why this wasn't picked up by the accessibility report. All images need to have alt texts. If you consider these images decorative, you can leave them empty, but they still need to be there.

  6. You have an unnecessary flexbox on your main, this could be removed entirely.

  7. To make the hero image responsive, you could add this:

display: block;
max-width: 100%;
height: auto;
  1. There's also an unnecessary width and height on the payment section, you could just remove them.

I hope some of these tips were helpful. Happy coding!

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