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 using HTML5 and CSS3

Ahmed Faisal 5,095

@afrussel

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


Feedback required

Community feedback

@matthewohreluy

Posted

Yours looks really clean. It's perfect.

Marked as helpful

0

Ahmed Faisal 5,095

@afrussel

Posted

@matthewohreluy Thanks

0

@pikapikamart

Posted

Hey, great work on this one. Layout in desktop and mobile seems fine. The desktop I think is too big.

Some suggestions would be:

  • Avoid using height: 100vh. This will limit the height of the element and it will be fixed to 100% of the viewport's height. If you inspect your website in dev tools at the bottom, you will noticed that it can be scrolled. Instead, replace it with min-height: 100vh, it will take 100% of the viewport's height and it will expand if it needs to. You don't need to have the overflow: hidden, this will just cut the website which is not really good.
  • Wrap the whole content inside a main element. This will make it more structured and help user to navigate in your website.
  • The alt value of the music-icon should be left empty like alt="" since it is not really adding to the content. If the img adds value to the website, add a descriptive alt if it is just decorative like this one, leave it alt="".
  • Also, avoid adding words that relates to "graphic" like "icon, image, illustration" as a value in alt text. Assistive tech will handle those for you.
  • Check the change dimension, try using tab key in your keyboard, you will notice that it takes a large portion compared to its content. You might want to check that one out.
  • Lastly, adding some padding to the top and bottom of the body tag, just to prevent the layout from touching the ceiling and flooring of the screen.

Aside from those, great work.

1
uiGuy 255

@uiGuys

Posted

Great work, so nice. Keep it up

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