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

Desafio do Order Summary concluído

Decfalter 40

@BrianMunizSilveira

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

@DylandeBruijn

Posted

Hi again @BrianMunizSilveira,

Another great solution, looks very clean! I like that you added the attribution in the card, it fits well. Did you run into any trouble or did you have any specific questions?

I have a couple of friendly suggestions after viewing your solution:

Good idea to add some padding to the body element. However because you have height: 100vh on the body this causes a problem and overflow issues. I suggest the following change.

body {
    background: hsl(225, 100%, 94%) url(../images/pattern-background-desktop.svg) no-repeat;
    background-size: contain;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

So I removed the width: 100% because the body is a block level element with a default width: auto so it already takes up the full width of it's parent. I changed the width: 100vh into min-width: 100vh so the body still scales in height with the content inside.

I would use a tags for the buttons as they seem to navigate the user to a different page and an a tag is generally used for that. A button tag is generally used to do an action on the page itself.

I hope you find my feedback helpful and happy coding!

Marked as helpful

0

Decfalter 40

@BrianMunizSilveira

Posted

Hey again😅 @DylandeBruijn,

I'm glad you're giving me great suggestions, this is what I need most at the moment. In this challenge I got a lot of help from a developer who recorded a video explaining this project (I used it as a basis so that I wouldn't feel too lost in my first challenge here at Frontend Mentor), so it was more 'hands on'. I will adhere to your suggestions for the final project (today if possible) for sure and in my opinion I'm doing well 😅.

Thank you very much for your help, the world needs more people like you, keep it up!

1

@DylandeBruijn

Posted

Hi @BrianMunizSilveira,

Thank you for your kind words! In my opinion there is nothing wrong with watching a video to find some guidance about a project. Everyone learns in a different way and sometimes you just need a way to start. I'm glad to help out and you are making good progress.

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