Skip to content
Submitted over 1 year ago

Summary order card with CSS and HTML only

Mário Vergara•160
@mvergara94
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

I think this exercise is one of my bests so far, If anyone can give me ideas of how to improve this project using JS or some other thecnology please let me know.

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 1 year ago

    Hi, Mário Vergara! 👋

    You do not need to use JavaScript to improve this. It is already good with HTML and CSS.

    Here are some possible improvements.

    • Decorative images should not have alternative text (alt=""). This will tell the screen reader to skip over the image. As a result, it saves screen reader users time navigating the page.
    • For your information, decorative images are images that do not add any information and serve only aesthetic purposes.
    • Alternative text for images should not include any words that are related to the word "image". The semantic meaning of the <img> element tells assistive technologies to pronounce it as an image.
    • Wrap the text with a meaningful element like a paragraph element. There should not be text in <span> and <div> alone.
    • Do not use absolute positioning with the attribution. It removes the attribution from the document flow.
    • Use min-height instead of height to set a height on a <body> element. Never limit the height of the <body>. It will not allow the users to scroll the page when the page content needs more height. Try to look at the site on a mobile landscape view to see the issue.
    • Remove font-size: 16px from the <body> styling. 16px font size in the style guide means 1rem in the CSS code. 1rem font size is already the default styling.
    • Remove @media (max-width: 374px). You should choose either min-width or max-width media queries. In other words, choose either the mobile-first approach or the desktop-first approach. The mobile-first approach is recommended.
    • Do not hide your attribution. It should always be visible on all screen sizes.

    I hope this helps. Happy coding! 😄

    Marked as helpful
    1
  • Don Delice Dushime•150
    @dondelice257Posted over 1 year ago

    No more feedback ! you did it perfectly, keep going on

    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