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 and Css

opolis8 330

@opolis8

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


what are the best practices to organize your code?

any feedback will surely be appreciated, Thank you :)

Community feedback

@CarolineLienard

Posted

Hi Opolis, congrats for finishing the challenge ! 🎉

It look really good, you really did a great job.

About the overall design of the project :

  • You forgot the main background image, if you look closely you can see there is like a wavy blueish background on the main container. You can add it using the CSS property background-image

For your code and how to use better practice :

  • You can use min-height or max-height instead of height, this will prevent the content from overflowing its container and maintain aspect ratios. You can replace height: 100vh by min-height: 100vh for example.
  • Don't rely too much on fixed dimensions. Fixed values can lead to layout issues and don't forget to use relative units (like REM and EM) instead of px.
  • Code indentation is important and you don't want to add so many blank line through your index.html.
  • About code/files organization, it's depend on where you work. Everyone have is own method to organize files, components... and it can be really different from one to another company. For HTML/CSS, you can do what you've done by putting the index.html and the readme at the root, maybe you can create a style folder where you will add the style.css and the image folder. Also, no need to keep the readme.md and the styleguide.md they are just documentation to help you trough the challenge.

You have used Flex, create a nice HTML architecture and even used color variable. It's really nice. Keep going ! If you any questions, don't hesitate to ask !

Have a nice day.

Marked as helpful

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