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 html, css (media querys, flex)

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


Please, i appreciate if u give me feedback about my work. Thak you.

Community feedback

@pikapikamart

Posted

Hey, awesome work on this one. Layout in general looks great.

Some suggestions would be:

  • Avoid using height: 100vh on a large container especially the body tag, this makes the element's height limited to the current remaining screen's height. Instead, use min-height: 100vh, this takes full height and will expand if it needs to.
  • Also, I would not alter the width of the body tag, you could alter the main.
  • The alt value for the vector image should have been left empty like alt="" since it is only decorative, also add an aria-hidden="true" attribute on the img element as well.
  • When an img acts as decoration only, use the above method, but if the image adds content to the site, then make a meaningful alt value.
  • Always include a h1 on a webpage, for this one, you could use h1 on the order summary but really, it is not suited to be h1 therefore, you could make the h1 a sr-only text, you can look that one up on the net:>
  • The music icon also should have used the mentioned method above since it is decorative only. Also, when using alt attribute, avoid adding words that relates to "graphic" such as "icon, logo, image.." it is already an image so no need to describe it as one.

Aside from those, great work on this one again.

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