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 flexbox

@muturi254

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


How better can I write the CSS? How differently would I have approached it?

Community feedback

Hania B. 1,340

@techanthere

Posted

Few tips:

  1. Please use at least one semantic tag like the main element under the body tag is sufficient here which will contain all the other code.
  2. Use h1 here rather than h2
  3. Try to replace the units in px to rem instead because that makes content small or big relative to the root size. like the font-size can be changed to rem. You can also use an online px to rem unit calculator for this purpose, but it is rarely required unless you can't guess the right value for rem in your code.
  4. You don't need to use 100vw in the parent class as the width is set to 100% by default and if you ever need to change the width to something else, use rem units rather than vw or percentages.
  5. Use an anchor tag <a> wherever you see hover effect and replace the button code with a and keep the same styling as for button. Similarly change the p tag around the 'Cancel' to anchor tag. Hope it's helpful. Good lucks.
1

@muturi254

Posted

@techanthere Thank you for the feedback will make sure to implement it in the next challenge.

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