Skip to content
Submitted about 1 year ago

Alex-order-summary-component

Pedro Beltran•70
@Alex-Beltran97
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What did you find difficult while building the project?

Implementing size and style adjustments to the components from Lit Element. Which areas of your code are you unsure of?

I wanted to implement Sass but I didn't know how. Do you have any questions about best practices?

Perhaps about how I could better modularize the components?

Community feedback

  • _nehal💎•6,710
    @NehalSahu8055Posted about 1 year ago

    Hello Coder 👋.

    Congratulations on successfully completing the challenge! 🎉

    Few suggestions regarding design.

    • Don't using margins to center the card ,To properly center the card

    • USING FLEXBOX and

    body{  
    display: flex;
    justify-content: center;
   align-items: center;
   min-height: 100vh;
   ...
}
    • Your background is not upto the mark
    • Try this:
        background-image: url('../images/pattern-background-desktop.svg');
    background-repeat: no-repeat no-repeat;
    background-size:100% 50%;
    background-color:#E1E9Ff;
    • Use Semantics for the proper design of your code.
    <body>
<main>... main content goes here ...</main>
<footer>... .attribution div goes here ... </footer>
</body>
    • Button should have cursor:pointer for interactive to users

    I hope you find this helpful.

    Happy coding😄

    Marked as helpful
    0
    Pedro Beltran•70
    @Alex-Beltran97Posted about 1 year ago

    @NehalSahu8055

    Thank you very much. I have applied the changes you said and it seems to have improved quite a bit and I learned a few things. Thank you very much for your input 😁

    1
    _nehal💎•6,710
    @NehalSahu8055Posted about 1 year ago

    Tip: You can generate a new screenshot after making necessary changes

    0

Please log in to post a comment

Log in with GitHub

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