Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Request path contains unescaped characters
Request path contains unescaped characters
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

HTML, CSS - Order Sumary Card

Adrian Salinas• 160

@a-dri-an-S

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


Hi all!

This is my first time using frontendmentor.io and I'm very excited to share my solution.

A few thing I would like feedback on are:

  • Clean Code
  • Responsiveness
  • Industry best practices (am i doing it right?)
  • Class naming (are they clear? do they make sense?)
  • Anything else you would like to share!

Community feedback

Juveria Dalvi• 1,375

@Juveria-Dalvi

Posted

Clean code contains semantic tags check out your accessibility issue click

Marked as helpful

0
Raymart Pamplona• 16,140

@pikapikamart

Posted

Hey, awesome job on this one. Layout in general looks fine.

Regarding your queries, i'll just address them here in the suggestions :>

  • Wait, why are there a h element? The data starting from the meta tag and link all of those should be inside the head element of the html. In the starter files for each project, the index.html already have a template you just need to populate, did you customize it?
  • On the body tag or in any other large element container, avoid using height: 100vh, this will limit the height of your element, based on the remaining screen's height. Instead, you can just remove this or replace it with min-height: 100vh.
  • Always have a main element on each webpage. On this one, the .card selector could use the main instead of using div.
  • The alt for the vector image should have been left empty like alt="" and with aria-hidden="true", if an image only acts as a decoration, use alt="" on it, but if the image adds content, then use a meaningful alt value. Also, when using alt on img, avoid using words that relates to "graphic" like "image, icon, logo.." , assistive tech will handle those for you.
  • The music icon as well should be using alt="" on it and aria-hidden="true".
  • The "proceed to payment" and "cancel order" could use anchor tag a because it doesn't look like the component is a form or built like a form.

Aside from those, great job on this one.

0

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