Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Order Summary Card component using Bootstrap 5.2 and SCSS

@berta-rf

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@MelvinAguilar

Posted

Hi @berta-rf πŸ‘‹, good job completing this challenge, and welcome to the Frontend Mentor Community! πŸŽ‰

I have some suggestions you might consider to improve your code:

  • Use the <main> tag to wrap all the main content in your solution.
  • Use <footer> instead of <div class="attribution">. The <footer> element contains authorship information.
  • Since the images do not contribute anything to the content, and only serve as decoration, so it can be hidden for screen-readers if aria-hidden="true" is added and its alt attribute is left empty: <img src="./images/illustration-hero.svg" class="card-img-top" alt aria-hidden="true">
  • In my opinion, the "Change" element should be a button, not a link, since it should perform an action, which is to change the plan and show the new plan's price. Use buttons to perform actions such as displaying a modal, performing calculations. Use anchor tags to redirect users to a part of the page or to an external site.
  • Always avoid skipping heading levels; Always start from <h1>, followed by <h2>, and so on up to <h6> (<h1>,<h2>,...,<h6>). Swap the <h5> tag with <h1>.

Please don't worry if your suggestions are long, they are just details. In the end, the project is well done πŸ‘. Hope you find those tips helpful! πŸ‘

Good job, and happy coding! 😁

Marked as helpful

3

@berta-rf

Posted

Hi @MelvinAguilar! πŸ‘‹I now got my <main> and <footer> elements on, I made "Change" a button, and I have also updated the img for accessibility. 3 days ago I didn't even know what Bootstrap was 🫣 so I really appreciate all feedback! Thank you so much for your help!

1

Please log in to post a comment

Log in with GitHub
Discord logo

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