Results Summary Component - HTML/CSS

Community feedback

• 

  SutonToch•340

  @SutonTochPosted about 1 year ago

  Congrats on completing the challenge!

  • You could add cursor: pointer to your .btn-continue so that it is a little clearer, that you can click it
  • Your .summary-item would probably benefit from a background-color, similar to the specifications, because currently they kinda meld into the background. For that, you'll probably have to also add some padding, and reduce the margin-bottoms. Another way would be to add a light background-color to the body, so that the white background of the .summary-container stands out. Yet another way is to add a box-shadow to your entire .container.
  • You should also switch to mobile a little earlier than 375px. I think some of the smallest phones have 360px in width, but there are many with more, and those currently get the desktop-design. Maybe a breakpoint for 600px and below would be good, but there are many approaches to these breakpoints, and I'd recommend reading up on that if you have the time.

  All in all, your design looks great! When I first started out, I quite struggled with this challenge.. especially centering the circle and it's content. Also, your solution to the .score in the .summary-container is smooth. As a general hint, maybe use a little bit more padding, especially on containers. With padding on .container, you'll need less margin on .result-text, .description and .summary-text. And if you want to change it, you'll only have to change it in one place.

  If you want to further improve, I'd recommend taking a look at CSS-Variables. And finally, if you have any more questions, feel free to throw them my way, I'm always happy to help.

  Be proud of yourself for submitting the challenge to the public! You did a great job! Keep on going :)

  1

  ---

  

  Rymk•40

  @roddejosPosted about 1 year ago

  @SutonToch thank you so much! those are the things that I wanted to know! tho I'm still a bit confuse when to use paddings and margins. It's also my first time encountering "CSS Variables". I'll try to look this up. :)

  1

  

  SutonToch•340

  @SutonTochPosted about 1 year ago

  @roddejos I try to imagine every element I want to style as a box. If content inside that box is supposed to have a certain distance from the edge of that box, I use padding. If I want to create distance between 2 different boxes, I use margin. In case you are still unsure, maybe take a look at the "CSS box model" it helped visualize that concept for me :)

  CSS-Variables are also sometimes called Custom-Properties. I can personally recommend the MDN Web Docs for everything Frontend (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). They are basically a variable that stores a value. Now you use that variable in different places, but if you want to change the value, you only have to do it once, where you declared that variable. This is very nice for media-queries, but also the maintainability of your website.

  1

  

  Rymk•40

  @roddejosPosted about 1 year ago

  gotcha! thank you so much again!

  0