Skip to content
Submitted almost 2 years ago

Order Summary HTML + Vanilla CSS [project #6]

Zou•190
@zouvier
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

Decided to go back to Vanilla CSS and focus on getting better with it.

Learned a good bit, and solidified some skills

This challenge made me finally understand how to make a site responsive. Please leave feed back on how i can improve! thanks

[UPDATE - 1]

  1. Fixed responsiveness with smaller screens

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    Hi, Zou!

    There are a few changes you could make to this solution better.

    • illustration-hero.svg is a decorative image. So, leave the alternative text empty (alt="").
    • For your information, decorative images are images that don't add any information and serve only aesthetic purposes.
    • Decorative images that are using inline SVG should have aria-hidden="true" to prevent them from getting pronounced by screen readers.
    • <button> element must always have type attribute to prevent unexpected behavior. Source: Checklist - The A11Y Project #use-the-button-element-for-buttons
    • Remove font-size: 1rem from the <body> styling. It is already the default styling.
    • Prefer unitless numbers for line-height values to avoid unexpected results. Learn more — line-height - CSS: Cascading Style Sheets | MDN

    I hope you find this useful.

    Marked as helpful
    1
    Zou•190
    @zouvierPosted almost 2 years ago

    @vanzasetia Thanks, I've gone through and updated everything that you've said, ty

    0
    Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    @zouvier

    You are welcome!

    For the decorative SVG, you should put aria-hidden="true" and focusable="false" on the <svg>.

    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