Skip to content
Submitted 3 months ago

Responsive order summary component with semantic html and css grid

DMVDEV•230
@thedmvdevaustin
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What challenges did you encounter, and how did you overcome them?

The only challenge I encountered was getting the background image to match the design. I overcame them with some trial and error

What specific areas of your project would you like help with?

I would like help with semantic html, just checking to see where I can improve and any other areas I can improve on that are noticable

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • drelu•150
    @dreelu

    Ok, here we go!

    1. Instead of using a <section>, it is recommended to use a <main> in section.order-summary. Do not use <section> as a generic container.

    2. Using an <h2> for the main title looks wrong. Instead, respect the hierarchy of the title and use an <h1>.

    3. In section.order-summary__plan, section.order-summary__plan-type-container and section.order-summary__plan-type, the <section> is again being used as a generic container. Instead, try using a <div>.

    4. I also saw several <span> in your code. It is not wrong to use it, but it is preferable to use it only when you want to customize a specific part of a text using css or JavaScript. Spans like span.order-summary__plan-type__name and span.order-summary__plan-type__cost should be replaced by a <p> tag, for example, while span.order-summary__plan-change could be replaced by an <a>, with an href="#" inside the tag (This makes the aesthetic and practical part of the link work, but it doesn't take you anywhere. Very useful when the focus is just on designing.)

    I only pointed out a few things, but overall, your project is very beautiful and well done, congratulations!!

    I hope I was useful. Happy coding!!

    Marked as 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