Skip to content
Submitted about 3 years ago

Order Summary Card - Using HTML and CSS

meenal•10
@meenalh
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

Solution retrospective

This is my very first front-end challenge. Any feedback will help me improve, so hopefully, you'll let me know.

Community feedback

  • Jason Moody•300
    @MoodyJWPosted about 3 years ago

    Hello! You did a great job on this. I noticed a few things, so I'll list out some pointers that might help you out in the future. A lot of the points below are accessibility issues, which aren't so important for making things look the way you want, but are incredibly important for people using screen readers.

    • on your body you've set the margins using each side like this margin-right: 0px, margin-bottom: 0px, etc. You can simply do margin: 0 and it will set all sides to 0 pixels. You can also shorthand to margin: 0 5px 0 5px where each value is a side, starting at the top and moving clockwise. Or even margin: 0 5px where the first value is top and bottom, the second is for both sides.

    • an html standard is to wrap content in a <main> tag. I'd suggest putting it around everything inside the <body>

    • you don't want to use headings out of order, so always start with <h1> and work your way up within each section and avoid using heading tags for anything that isn't an actual heading. So your <h3> for Order Summary is good, but it should be an <h1> and the <h5> you've used on the cancel action should honestly just be a button.

    • like I mentioned before, you generally want to use buttons if clicking the element completes an action (think cancel, submit, save, etc)

    • your code is a bit sloppy, which is understandable because html and CSS are nightmares to format properly. However, there's an easy solution! If you're using Visual Studio Code, I'd suggest an extension like Prettier or other formatters. You can set them up to automatically format everything when you save

    • you're adding the font to a few different classes, but if you put it on the body you won't need to do it again unless you want to override with a different font

    That's all for now! Hope this helps you out.

    Marked as helpful
    1

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