Skip to content
Submitted over 1 year ago

order summary component

Bowenā€¢280
@bowen-wei
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

Hello everyone! My question is: when you receive an design like this one, how do you analyze it to split it up into smaller html elements? I just divided them into flexboxes, smaller flexboxes and so on, not sure if this is the common way to do it.

Community feedback

  • Fransueltonā€¢220
    @FransueltonPosted over 1 year ago

    Congratulations on completing the challenge! šŸ„³āœØ

    I reviewed your code and you did an excellent job!

    šŸ’” A tip for you would be to create separate files for the variables and the media queries, thus leaving the responsibilities divided. This can help with organizing and maintaining the code, Example: responsive.css and variables.css

    Answering your question:

    Yes, I like to take the image from the project and analyze what tags I can use on each specific part. I always give preference to semantic tags when possible, and then start working in pieces, allowing for gradual development. This approach has several advantages, such as eliminating the confusion of solving many things at once, maintaining the commitment to complete small steps, and focusing energy on each of them, among other things.

    Marked as helpful
    1
    Bowenā€¢280
    @bowen-weiPosted over 1 year ago

    Thanks for your tip!šŸ˜„@Fransuelton

    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