Skip to content
Submitted over 2 years ago

order-summary-component using css flexbox

Mibenin•490
@MIBENIN
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

Community feedback

  • Yari Morcus•500
    @YariMorcusPosted over 2 years ago

    Hi @Mibenin,

    First of all, congratulations on completing this challenge! I took a look at your design, and it looks pretty good.

    However, I do have some feedback I want to share with you so that you can become even a better developer than you already are.

    My feedback is divided into sections to make it more clear.

    Mobile

    1. I think you forgot to add whitespace on both the left and right sides of the card component. It is currently clung against both sides.
    2. The 'Proceed to Payment' button should be a little higher according to the design.
    3. The text within the 'Proceed to Payment' button should have a larger font size.

    Desktop

    1. Your 'Change' button has been made up with <a>. You should be using <button> instead according to the <a>: The Anchor element page on MDN. The anchor element is something you should only use when you navigate to a real hyperlink (which wouldn't apply in this case, because if it was a functional application, it would probably bring up a dropdown menu).
    2. Your 'Cancel Order' button has been marked up with <p>. You should be using <button> instead, because the latter conveys important information to assistive technologies such as screen readers. You did use <button> for the 'Proceed to Payment' button, so that is good.
    3. The text color of the 'Cancel Order' button does not change on hover, and cursor: pointer; is not shown either. This has probably to do with the prior point.
    4. The 'Cancel Order' button should have font-weight: 700; if I am seeing this correctly in the design (it is a little thicker than the 'You can now listen to.....' text).
    5. You have both a horizontal and vertical scrollbar on desktop view. Is there a reason why you applied overflow: scroll; to .container?

    I also want to give tips to you based on looking at your code.

    1. Try to be as specific as you can be in the lang attribute on <html>. In this case: lang="en-us". This is important for not only search engines but also browsers. Search engines for example, know what language your document is in and in which language your page should be ranked. Browsers on the other hand, know better what dictionary has to be applied to make sure the right grammar and spelling checks are applied.
    2. The content within <title> should always read from specific to general. In this case, that would be "Order summary card | Frontend Mentor". This is important for SEO reasons, because search engines always truncate text that is longer than a specific amount of characters (I thought this was between 155 and 160). In this case it is a short title so it should not cause any problems, but try to make it a habit.
    3. Try to use a little bit more of the semantic HTML5 elements, such as <main>, <article> and <section>. This is important for assistive technologies because it communicates better what the role of a specific element is. A div or span for example, does not communicate any meaning or role, which is important for people using these technologies.

    I could give you some more feedback and tips but I think this should do it for now.

    However, I hope you can do something with the feedback and tips I gave you. If you have any more questions, feel free to ask me.

    If I made a mistake somewhere in this post, feel free to correct me and keep building awesome things 😄

    Marked as helpful
    0
  • Mibenin•490
    @MIBENINPosted over 2 years ago

    Thank you brother for your feedback.I will use your tips on building next challenge. Accessibility is the topic i have to improve a lot.I have no idea about it.

    0
    Yari Morcus•500
    @YariMorcusPosted over 2 years ago

    @MIBENIN You are welcome!

    I will give you three tips on how you can easily make your challenges more accessible:

    1. With every part of your design, ask yourself: what is the function of this part? Based on your answer, you can find the corresponding semantic HTML element. You can find a short list (there are more) of the semantic HTML elements on the semantics MDN Web Docs Glossary. As an example: when you see a time within your design, you mark up that time with the <time> element.
    2. If <img> is decorative, use an empty alt attribute or CSS background image.
    3. If you use flexbox and/or grid, don't use the order property to completely rearrange interactive design elements (when people can navigate to it with their keyboard, because this affects your keyboard navigation order negatively).

    There are of course more things to consider, but this is a good starting point.

    Good luck with your next challenge!

    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