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

Randal• 120

@rcroper

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 used Flexbox for most of the layout for this project. Is there an advantage to using grid in this situation? How would you make this accessible?

Community feedback

Vanza Setia• 27,795

@vanzasetia

Posted

Hi, Randal! 👋

You should not make everything a flexbox layout. You should use it on the annual plan section to align the music icon and the text. Also, use it to make put the card in the middle of the page—by making the <body> element the flex container of the card. The other should use the default layout.

You should set the main font-size on the <body> element. This way, you don't have to keep specifying font-size property on each text element.

Also, the default font size is 1rem. So, any text element that has font-size: 1rem should be removed.

I recommend making the illustration an image element instead of a background image. This way, you will have to write less CSS code.

I suggest using a CSS reset whenever you start a new project. This can help you set the styling foundation easily. My recommendation — A Modern CSS Reset | Andy Bell

I hope this helps. Happy coding! 😄

0
Islam abozeed• 240

@islamabozeed

Posted

Amazing and wonderful design as first design hope I see great tasks as this one in the future

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