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

Display, Border, Border-shadow, Radius, etc.

Luka• 320

@lukakavtarra

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


Check my solution. I'm still learning bases of front-end I would love to hear some advices :))

Community feedback

Joran Minjon• 610

@DrKlonk

Posted

Hi Luka, nice to see you on the platform!

Some (unordered) things that stick out to me:

The centering doesn't really work on smaller screens, as Simone pointed out. Use margin auto, flexbox or grid for this to keep it nice and responsive.

It seems like the responsive.css is the same as style.css. No need to repeat everything in a media query, just the things that are changing.

The border radius of the card seems a bit off, I think it can be just one value.

Using rem instead of px is usually preferred, because it increases responsiveness and thereby accessibility.

Naming classes is hard, but can definitely be improved here. Try to come up with something that describes the content of the element. "Annual-plan" is a decent name in that sense, "div-button" is not. You might want to call that "button-group". Also "rand-text" suggests the text to be random, which it is not.

Naming things is super important, even more so when collaborating with others.

The annual-plan class can be centered more cleanly by removing max-width and left properties and introducing margin: 0 2rem or something similar

Marked as helpful

0
Christian Holm• 500

@Madmanden

Posted

Great work Luka! The padding on the card is a bit off though it seems.

0
Luka• 320

@lukakavtarra

Posted

Report shows me 3 accessibility issues ... can someone explain how to solve them?

0

Simone• 170

@Giulo25

Posted

Hi @lukakavtarra you should use semantic tags to structure your html. I suggest you use the <main> tag to wrap all the code and enhance the indentation to make everything more readable. Then to keep the card always in the center I suggest you use margin: 0 auto, not position: absolute

1
Luka• 320

@lukakavtarra

Posted

@Giulo25 Thank u so much it helped - 0 issues

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