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

btrezzyā€¢ 50

@btrezzy

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


Any suggestions to make it better?

Community feedback

dimar hanungā€¢ 560

@dimar-hanung

Posted

Hi.. šŸ‘‹, Congratulations on completing the challenge šŸŽ‰ .

I have some interest and feedback with your code

That i like:

  1. I appreciate the similarity of your results with the design, a bit different but still good
  2. html is pretty good, not too nested šŸ‘

My Feedback:

  • I suggest you use html semantic convention, for example <div class="main-container"> to <main class="main-container">, it will make it clearer, and will improve seo if you want to submit your website to google, i recomended this article: here

  • Your css naming still doesn't represent its use, for example <div class="item2">Proceed to payment</div> can be <button class="button-primary">Proceed to payment</button>

  • you can seperate file by folder to be more structured, for example:

public/
ā”œā”€ images/
ā”‚  ā”œā”€ illustration-hero.png
ā”‚  ā”œā”€ pattern-background-mobile.svg, etc..
ā”œā”€ styles/
ā”‚  ā”œā”€ main.css
ā”œā”€ favicon.png
index.html

anyways overall is good, nice solution, hope it useful šŸ™Œ

Marked as helpful

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