Skip to content
Submitted over 3 years ago

HTML5 and CSS with SASS to compile the CSS.

Flamick•65
@Flamick
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

Please excuse the poor structure of the code. I'm still very new to this and any instruction on how it could be coded better would be appreciated. Thank you.

Community feedback

  • Raymart Pamplona•16,100
    @pikapikamartPosted over 3 years ago

    Hey, good work on this one. Layout in desktop is good and responds as well.

    Davide already mentioned a good pointer about stylings. Just going add a few as well in other aspects.

    • on your .background selector, removing the height: 100vh will remove this bottom hollow part of your website. If you inspect it in dev tools, from the bottom, you can see that your background is only applying to some portions and not the whole layout, because it is only limited to height: 100vh
    • the alt text on the img could have been set to empty since I think it is just for decorative purpose.
    • you need atleast 1 h1 on a page, so maybe you could make the order summary wrapped inside h1 compare to h2.

    Aside from those, good work on this one.

    Marked as helpful
    0
    Flamick•65
    @FlamickPosted over 3 years ago

    @pikamart Yeah, if I remember correctly, I set the height because it had an issue with white space in the background the way that I structured the html. Either way, if styled/structured correctly, I wouldn't need to set a height. I'm not sure how I could forget the h1. XD Probably just because my brain defaulted to a smaller header because of the size it was supposed to be. Thanks for the feedback. :)

    0
  • Davide•1,725
    @Da-vi-dePosted over 3 years ago

    Hi, it looks nice, well done! html code is ok, css no really!

    • Don't use id for styling especially in the way you did (mixed with classes that are children). There's no need to select the parent element every time, just select the specific class, remember one of the main goal in css is reusability, nested code is not reusable so be careful. Also leave some space as you did at the beginning, code needs to be readable!

    Hope it helps a little, keep coding :-)

    Marked as helpful
    0
    Flamick•65
    @FlamickPosted over 3 years ago

    @Da-vi-de Thanks for the feedback. I'll keep that in mind for the next project. :)

    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