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

Responsive Order summary component

Joshuaβ€’ 130

@dyntbn

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

teamieβ€’ 470

@tea-scripts

Posted

Great job completing the challenge. Some points

  • You might want to consider using an article instead of a section. This is somewhat a card and not an entire section. an article can be placed inside of a section and also vice-versa.
  • Another thing missing is a transition on your buttons. You want the :hover to take effect over time and not instantly. This makes your design more pleasing to the user and gives better experience.

You did an amazing job. Happy coding πŸ‘!

Marked as helpful

1

Joshuaβ€’ 130

@dyntbn

Posted

@coder-teamie

So glad you told me that, because I've been doing that for a while. πŸ™ƒ

By the way, is there a particular resource that helped you understand HTML element placement better? Right now, I'm using MDN Docs and sometimes YouTube videos for help.

Also you're right about the transitions, going back through it right now, it does look plain.

I'll make both of those changes in the Github repo, and thank you so much for the pointers Teamie. πŸ˜„

1
teamieβ€’ 470

@tea-scripts

Posted

@dyntbn That’s great. The resource I use to understand the HTML semantics is W3Schools HTML Semantic Tags. This resource is self explanatory with examples and yes the MDN is also another wonderful resource to learn better about HTML elements.

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