Skip to content
Submitted about 3 years ago

Order Summary Card using CSS

Tamara Carlos•30
@aramatsolrac
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

At the beginning of this challenge, I thought I would not be able to finish. However, I kept going and trying to figure out how to do it, and now I could not be more proud of myself that I did it! :D

So, please feel free to give me any feedback. I am sure that I will learn a lot from that! I am looking forward to reading it!

Thanks! :)

Community feedback

  • Grace•31,270
    @grace-snowPosted about 3 years ago

    Overall this is really good

    Just some common beginner improvements to make

    • swap section for a main element
    • remove the alt text value on music icon and leave of intentionally blank like alt=“”. To ensure this is ignored by all assistive tech and search engines, I recommend adding aria-hidden true or role presentation
    • it’s best practice to include a css reset at the start of all css projects. That removes different browser styles. I like Andy bells modern css reset, but there are loads out there. Eg it will set images to be display block
    • in css never put font size in px. Use rem instead
    • probably change height 90vh to min-height.

    There may be other things but all pretty minor so I’ll leave it there.

    Good luck on your next challenge 👍

    Marked as helpful
    1
    Tamara Carlos•30
    @aramatsolracPosted about 3 years ago

    @grace-snow I just finished all the improvements! I couldn't be more thankful for your feedback. I feel like I have learned a lot in the couple of days that I have been studying to put it into practice. Thanks again :)

    1
  • Grace•31,270
    @grace-snowPosted about 3 years ago

    You’ve removed an essential meta tag from the html head that makes this viewable on mobile. You need to put that back in - it’s something about viewport. If you redownload the starter files it will be there or just google viewport meta tag and should find it

    Marked as helpful
    0
    Tamara Carlos•30
    @aramatsolracPosted about 3 years ago

    @grace-snow Thanks for the feedback. :D I just fixed that.

    0
    Grace•31,270
    @grace-snowPosted about 3 years ago

    Well done @aramatsolrac

    So now I can preview on mobile I can see it doesn’t fit on my screen. This is where the advice below comes into play, like using max width instead of width 400px, and adding padding on the outer wrapper or margin on the component to prevent it ever hitting screen edges.

    Good luck

    Marked as helpful
    0

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