Skip to content
Submitted almost 3 years ago

Responsive design using Flexbox and media queries

Nerdytoo•30
@olalemi
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

Kindly peruse my work. Please comment where improvement is needed Thanks

Community feedback

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

    👋 Hi Nerdytoo!

    I would recommend removing all the tags that you are using since you are only using plain HTML and CSS. In case you don't know, you can leave the tags empty 😉

    Anyway, here are my feedback:

    • 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.
    <body>
  <main>
    page content goes here...
  </main>
</body>

Note: Swap the div with an id of main with
main tag
    • Every page should contain one h1. In this case, you can make <h2 class="obj_2">Order Summary</h2> as h1.
    • The text below the Order Summary should not be a heading. It should be a paragraph. Also, don't use br elements for presentational purposes. Read what MDN documentation says about it. I would recommend controlling the text with the padding of the parent element.
    • Don't make all the text content as h2 🙂
    • Use interactive elements (e.g. a, button, etc) for any elements that have :hover or :active states.
    • FYI, anchor tags are for navigation - moving to different pages or content on the same screen, while the button elements are for actions like opening a modal, submitting a form, toggling element, etc.
    • <div obj_1> is not a valid HTML. See the validator
    • <div class = "container"> There's no need to put a space before and after the equal sign.
    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only.
    • Best Practice (Recommended)
      • Write your code with consistent style (e.g. the indentation, quotes, whitespace, etc). If you write your code with consistent style, it will make it easier to read for everyone (including you, yourself).
      • Always use classes to reference all the elements that you want to style. Using id is going to make your stylesheet have high specificity (hard to maintain).

    That's it! Hopefully, this is helpful!

    Marked as helpful
    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