Skip to content
Submitted almost 3 years ago

Order Summer Component - HTML & CSS

steezyza•90
@steezyza
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

No questions. I just realised I need some practice with Flexbox and Grid.

Community feedback

  • Jessica•880
    @perezjprz19Posted almost 3 years ago

    @steezyza To add to what @vanzasetia said, if it's a decorative image for which you will leave the alt attribute empty, you can also add aria-hidden = true to the image that way it will be hidden from assistive technologies.

    Here is an article on it:

    https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden

    Marked as helpful
    1
  • Vanza Setia•27,775
    @vanzasetiaPosted almost 3 years ago

    👋 Hi Steezyza!

    🎉 Congratulations on finishing this challenge! I have some feedback on this solution:

    • Accessibility
      • All the page content should live inside landmark elements (header, nav, main, and footer). By using them correctly, you can make users of assistive technology navigate the website easily. In this case, you can wrap all of it with main tag,except the attribution. The attribution should be lived inside the footer.
    <body>
  <main>
    page content goes here...
  </main>
  <footer class="attribution">
      attribution links goes here...
  </footer>
</body>
    • img tag must always have alt attribute. In this case, you leave the alt="" empty since all the images are decorative.
    <img src="/images/illustration-hero.svg" alt="">
    • Headings must be in a logical order. Heading tags can be used by users of assistive technology to navigate the website. If headings are not in a logical order, those users might get confused.
    • Never use heading tags to make the text bigger or bold. Use CSS instead.
    • <h2>Order Summary</h2>, you can make it as a h1.
    • The same as img tag that must have alt attribute, the same goes with anchor tag that must always have href attribute.
    <a href="/">Change</a>

Note: The forward-slash (/) means that it is going to stay
           it is going to stay on the home page (root).
    • Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (by using Tab key) easily.
    • Always specify the type of the button. In this case, you can set the type of them as type="button". By doing that, you prevent the button from behaving unexpectedly (like submitting).
    • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
    • Best Practice (Recommended)
      • Put all the styling on a separate CSS file. Inline CSS can cause a problem since it has the highest specificity or priority.

    That's it! Like @viniciushenri96 has said to you, keep practicing and hopefully, this is helpful!

    Marked as helpful
    0
    steezyza•90
    @steezyzaPosted almost 3 years ago

    @vanzasetia HTML Semantics, accessibility and use of external CSS files. Got it Vanza, thanks. I will start off another similar challenge later today.

    1
  • Vinicius Henrique•590
    @viniciusshenri96Posted almost 3 years ago

    Hello @steezyza 👋, always try to put some value in the alt attribute inside the <img> tag for accessibility reasons.

    Example:

    <div class="top-wrapper">
        <img src="/images/illustration-hero.svg"  alt="icon illustration hero">
</div>

    and always try to make your HTML code as semantic as possible, independent of the project. great job, keep practising.

    Marked as helpful
    0
    Vanza Setia•27,775
    @vanzasetiaPosted almost 3 years ago

    @viniciushenri96 Just to let you know, it doesn't have to be always, since for decorative images (doesn't add any information), you don't need to put any value to the alt attribute.

    That way the users of assistive technology like screen reader only listen to the meaningful information of the page.

    0
    Vinicius Henrique•590
    @viniciusshenri96Posted almost 3 years ago

    @vanzasetia Thanks, I didn't know about that detail.

    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