Skip to content
Submitted almost 2 years ago

Order-summary-component-v1.0

Alper•1,010
@adonmez04
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

Hi everyone, I really spent a lot of time on this but I couldn't finish it, so I gave up... Maybe I should focus on some specific topics like responsive design... However, this project improved my coding skills a lot. I feel that.

I have two problems here: 1 - How can I make this project responsive? Should I change every element or just some container elements? I couldn't understand it.

2 - How can I use .svg files as a background image? This topic is totally new for me. I checked some resources on the internet but I don't understand them.

Until I finished my code, I changed my main structure a lot. I still have a problem with my nested structure and class names in HTML.

I'll wait for some good responses from the community like my first project. They're so beneficial to me. Thank you so much.

Community feedback

  • Grace•31,270
    @grace-snowPosted almost 2 years ago

    Hi

    I hope this helps a bit

    • remove all the headers article/ sections. You're misusing them. Better to focus on the important parts of html semantics: heading order and choosing the right interactive elements
    • the component should not have a width or height, only a max-width
    • font size must never very be in px. Use rem
    • use cover or contain for background size instead of px values
    • mobile styles should be the default. There actually isn't much that needs to change in a madia query on this. I think it's only the padding on the card content.
    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