Skip to content
Submitted over 3 years ago

Order Summary Page

accessibility, bem, lighthouse
Chitrang•150
@cwebdev
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi,

This is my first time using CSS custom properties. I am planning to use it more in future. Any feedback regarding that is welcome.

Any other general feedback is also welcome. Happy Coding!

Code

Please log in to post a comment

Log in

Community feedback

  • Alexander Lippitsch•120
    @LipAlex1

    Hi Chitrang,

    you may want to look at the report as there are ally issues. Make sure you use semantic html (main, header, nav, section, aside, footer etc.). Assigning classes to main, header and footer tags is redundant code as these tags are meant to be used non-repetetively.

    Also, make sure you use ONE h1 tag since this is important for SEO reasons and it's the quasi standard in webdev.

    The background doesn't look like the specs. There is more work to be done on background image and background-colors to get it to look right.

    The site is not fully responsive particularly because there are no breakpoints in the design and the font-sizes are set to fixed widths that hurt the design on smaller viewport widths.

    Designing the entire HTML structure with divs only is considered bad style but not necessarily wrong. Semantic tags as well as button, input and list tags would make that code leaner, faster and easier to maintain. Commenting the code is doing yourself a favor as it saves you time when revisting the code.

    Keep up the good work and 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