order summary

Community feedback

• 

  Ibrahim Mohammed•640

  @MohammedOnGitPosted 2 months ago

  Hello Karim Hussein!

  Your Order Summary Card HTML structure is looking good. Here are a few enhancements and suggestions:

  1. Image Alt Attributes Alt text should be descriptive. For example, the alt for the music icon and hero illustration can be more specific:

  <img src="./images/illustration-hero.svg" alt="Hero illustration"> <img src="./images/icon-music.svg" alt="Music icon for subscription">

  2. Button Styles Since you are using two buttons (for "Proceed to Payment" and "Cancel Order"), consider styling them differently to indicate their actions more clearly (e.g., a primary and secondary button). This can be handled in your CSS.

  3. Accessibility Enhancements Make sure your buttons are distinguishable for screen readers by specifying aria-label attributes, especially if you have multiple buttons that perform different actions:

  <button aria-label="Proceed to Payment">Proceed to Payment</button> <button aria-label="Cancel Order">Cancel Order</button>

  4. Form Elements Since this is an order summary card, it's likely related to user actions that may involve submitting a form. Consider wrapping the buttons inside a <form> if this section handles submission actions.

  <form action="submit_order"> <button type="submit">Proceed to Payment</button> <button type="button">Cancel Order</button> </form>

  5. Links vs Buttons The "Change" action might work better as a button if it triggers an action (instead of just a navigation link). You can style it as a link while keeping it a button for better semantics:

  <button class="link-button">Change</button>

  6. Footer The footer attribution section could also be wrapped in a footer tag for better semantics:

  <footer class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Karim Hussein</a>. </footer>

  Final Thoughts Your code is clean and follows a solid structure, but adopting these best practices will improve the performance, accessibility, and maintainability of your Order Summary Card project. Keep it up!

  Marked as helpful

  0
• 

  Karim Hussein•270

  @karim769Posted 2 months ago

  thanks a lot ,I loved your tips

  0