Skip to content
Submitted about 3 years ago

Order summary card using HTML & CSS

Cody Kelly•60
@CodyKelly
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I'm trying to go for a more modular approach with the CSS. Someone using my stylesheet should be able to style their components by plugging in different classes in their HTML elements.

Am I succeeding in this goal? Are there any CSS classes that could maybe be broken down even further? Am I sacrificing readability and/or maintainability with this approach?

Thanks!

Code

Please log in to post a comment

Log in

Community feedback

  • Ivan•2,610
    @isprutfromua

    Hi there. You did a good job 👍

    keep improving your programming skills

    your solution looks great, however, if you want to improve it, you can follow these steps:

    🟢I don't think you should separate atomic classes like center-column-items and flex-end and component classes (card for example). It would be better if you followed a single approach.

    🟢try to avoid tag styling

    🟢I think it would be better to use a button than a link for the Change element. Or set the href attribute

    🟢also please set alt attributes for images

    I hope my feedback will be helpful

    Good luck and fun coding 🤝⌨️

    Marked as helpful
  • Grace•32,130
    @grace-snow

    Hi

    There are a few issues with this but all easy to fix.

    1. You need to remove the form. There's no need for a form with no inputs and only buttons
    2. Why are you using anchor tag for change and buttons for cancel and proceed? What would you expect to happen for a user on click? It may be ok, but I suspect the elements need changing
    3. You need to use min-height 100vh, not height. I'll add Screenshots to slack to show you the problems this is causing with content cropped off, and attribution overlapping content.

    I hope this is helpful

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