Skip to content
Submitted 10 months ago

Order-Summary-Card

m07mmad-nasr•160
@m07mmad-nasr
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

Evaluate My Work

Community feedback

  • Øystein Håberg•10,710
    @Islandstone89Posted 10 months ago

    HTML:

    • The image and the icon are both decorative, so their alt text must be emtpy:alt="".

    • I would have "Proceed to payment" as a link, and "Cancel Order" as a button - links navigate to another page, while buttons trigger an action.

    CSS:

    • Performance-wise, it's better to link fonts in the <head> of the HTML than using @import.

    • It's good practice to include a CSS Reset at the top.

    • body must have a min-height instead of height - this way, the content will not get cut off if it grows beneath the viewport.

    • Instead of using absolute positioning and transform to center the card, I would recommend using Flexbox on its parent, the body:

    display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100svh;

    • Remove all fixed widths in px. If needed, add a max-width in rem on the card, so it doesn't get too wide on larger screens.

    • I don't think you need to use Grid at all in this challenge.

    • Paragraphs have a default value of font-weight: 400, so there is no need to declare it.

    • Don't use % for margin or padding.

    • Instead of setting widths in %, use padding on the containers.

    • It is common to do mobile styles as the default and use media queries for larger screens. Remember, media queries must not be in px, but in rem.

    1

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