Skip to content
Submitted over 2 years ago

Order Summary Component

Karen Lourenço•380
@KarenMascarenhasLourenco
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Is my code understandable?

Did I use the semantic HTML tags correctly, should I add more or less?

In what areas of my code can I improve on?

All feedback is greatly appreciate. It helps me to improve as a frontend developer. Thanks!

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Agnik Bakshi•480
    @Agnik7

    Hi, Congrats on completing this challenge. You have written the code using semantic HTML very effectively. I have some suggestions that I feel might help you improve in the future.

    • In the div id="plan" block, you could write the Annual Plan text using p tag instead of h3. It would be better to use the header tags for headings only, that way the functionality is kept consistent. You could use the p tag, while making the content bold. This will also help you get rid of the accessibility issue. <p><b>Annual Plan</b></p>
    • For the CSS part of your project, you don't need to use the media query. Instead of specifying the width of the main tag, specify it's max-width, that way, media query won't be required.
    main{
max-width: 25rem;
}
    • Instead of percentages, try using relative units like rem and em, for better responsiveness of your code.

    Hope this comment helps you in improving. Please feel free to correct me, if I said anything wrong. Have a nice day!!

  • Vanza Setia•27,715
    @vanzasetia

    Hi, Karen Lourenço! 👋

    Here are some suggestions for improvements.

    • The music icon and illustration are decorative images. You should leave the alternative text empty.
    • For your information, decorative images are images that don't add any information and serve only aesthetic purposes.
    • Don’t skip heading levels. In other words, heading levels must always be in order to give structure to a page.
    • Remove width: 100% from the <body> styling. It is already the default styling.
    • Don't use id selectors for styling. There are two reasons for not using ID’s to style content:
      • They mess up specificity because they are too high (the most important reason).
      • They are unique identifiers. So, they are not reusable on the same page.
    • <button> element must always have type attribute to prevent unexpected behavior. Source: Checklist - The A11Y Project #use-the-button-element-for-buttons
    • Never use px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSS
    • Set max-width with rem unit to the <main>—or the card. You don't need to use a media query to make the card responsive. Remove the width property.

    I hope this helps. Have fun coding! 😄

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