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 using Flexbox

@LuisRoft

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 had problems with the .svg backgrounds, the height did'nt fill the screen. Can someone explain to me how that works?

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

Hi, Luis! 👋

Good effort on this challenge! I love the overall looking of the site, it looks similar to the design. Overall the HTML markup looks great and has no accessibility issues have been reported.

Anyway, here is some feedback,

  • I would recommend having one CSS file instead of having three CSS files. Having one CSS file is makes sense for this challenge since it is a small project. Also, having one CSS file would speed up the loading speed of the site.
  • I also would recommend that you are writing the styling using the mobile-first approach. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.
  • I notice that there's no href attribute for the Cancel Order link.
  • Always specify the type of the button. In this case, set the type of them as type="button". It's going to prevent the button from behaving unexpectedly (like submitting).
  • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
  • I would suggest using max-width and not specifying the height of the card. By doing that, you make the card more responsive.

Overall, you have done good work. You are using semantic HTML markup and get no issues from Frontend Mentor automatic report. Also, if you have one CSS file, it does not only boosts the loading speed but also prevents you from writing the same styling.

I hope this helps! Keep up the good work! 👍

Marked as helpful

1

Vanza Setia 27,795

@vanzasetia

Posted

@LuisRoft About your question, the SVG background should not have full height and if see the design, the SVG background is not full height either. So, nothing to worry about. 🙂

0

@LuisRoft

Posted

Hi @vanzasetia, thanks for the feedback :)

1
Vanza Setia 27,795

@vanzasetia

Posted

@LuisRoft You're welcome! 😁

1

@Ahmed666313

Posted

Hey, make sure the code's right and think first before you do it.

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