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 - card project using CSS Flexbox

P

@gokhan-guneri

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


It was a nice work especially for reinforcing CSS Flexbox applications. I will be here for those who want to ask suggestions and questions. Enjoy your work...

Community feedback

@thomashertog

Posted

almost looking exactly like the design, so that's very good

few improvements can be made though

HTML/accessibility

  • There's no landmark being used. Yes you used a <section> however, that doesn't correspond with a landmark role.
  • You have a lot of <div> wrapper elements which are (mostly) unnecessary

CSS

  • there's a breakpoint for the smaller screen sizes but that one also has a minimum
  • you'll be better off coding things mobile-first instead of desktop-first (which i feel you're doing now)
  • a lot of px-based values, which are totally unresponsive
  • you should use min-height as opposed to height so elements get room to expand when needed instead of causing issues with overflow
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