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 using only HTML & CSS

Tarik 60

@tikeyike

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


I think I need to improve my HTML markup to avoid "div soup", so some feedback on that part would be great.

Also, another thing I think I could improve on is using more generic CSS classes - I do kind of struggle with this part - any feedback or tips on how to improve would be greatly appreciated.

Please point out any other things that can be improved.

Thanks for your time.

Cheers.

Community feedback

P
hardy 3,660

@hardy333

Posted

Hi, first of all website looks very good, everything is on point. In terms of simplicity html and css looks quiet good. looks like you have quite good understanding how things work...

But as you have already mentioned "div soup" - that is a aspect you need to work.

Few suggestions:

  • fro card use semantic element <article></article>
  • Maybe you also can use <main></main> instead of div.container, but not 100% necessary.
  • Always use buttons for things like: "Proceed to Payment" and "cancel request", you game them classNames called "button" - why the hell don't you also gave them button element tags XD ?!! in "cencel order" -this looks like a link but semantically it is button, when user clicks it you have to cancel order, that is button functionality not link functionality... so ya, try to call it className btn-link or even link is OK, but use <button> instead of <div>
  • for div.text, instead of div use <p>.
  • in general try to watch few tutorial on youtube about semantic html and google thing, it will help you.

Marked as helpful

3

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