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

HTML and CSS solution using flexbox and media queries

@Ullvang

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


Hey, I am curious about font-size and size of margin, padding etc. Do you usually use px? And is it best to change it with media queries?

Community feedback

darryncodes 6,430

@darryncodes

Posted

Hi Jon,

Nice work, I think your design looks great!

  • it's best practice to use relative units instead of absolute units in responsive design. This is just the tip of the iceberg but once you get it right it helps immensely. Worth doing some research on relative units and how to use them.
  • you could clear up your accessibility and html report with a few fine tweaks. Use semantic html <main> instead of your <section> tag. Use a <footer> tag instead of a <div> on your .attribution block.
  • lastly headings should descend in order <h1> > <h2> > <h3> and so on

Good luck, keep grinding 🤙

Marked as helpful

1

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