Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

order summary component

Bowenā€¢ 280

@bowen-wei

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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ā€¢ 210

@Fransuelton

Posted

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-wei

Posted

Thanks for your tip!šŸ˜„@Fransuelton

1

Please log in to post a comment

Log in with GitHub
Discord logo

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