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

Results summary component - SCSS

P

@Bamo-D-Abdallah

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I used fetch() and created some of the elements manually through JavaScript DOM API.

What specific areas of your project would you like help with?

I think I over complicated my code, any overall code tip would be highly appreciated.

I couldn't make perfect circle unless I set both height and width which AFAIK it is not good idea to use height but I don't know if this is the way to do it.

Also I couldn't make the linear gradient match the one in the image.

Community feedback

@damigand

Posted

I don't see any reason as to why height is not a good idea to use. I've never heard that using height is bad, but if you want to make a perfect circle, you can set the width property to your desired value, use border-radius for the roundness and then add a property called aspect-ratio: 1 / 1. This ensures that the aspect ratio between the height and the width remains as 1 / 1, therefore making it a square / circle. But again, I don't see why you wouldn't want to use the height property instead.

0

P

@Bamo-D-Abdallah

Posted

@damigand

Setting height restricts the space for the content of the box, they can't get more than already given to them or they will overflow, there is no need to use height, your browser will give your element enough height based on much the content need.

If you set height then you have to use @media query any time the content overflow and I don't know why you would want that, the website is responsive by default and setting any unnecessary style will remove some of its responsiveness, by setting explicit height you are removing the automatic responsiveness of the website and you have to do it manually yourself.

There are a lot of courses and tutorials out there that teach the syntax and concepts to beginners but they don't teach good pracitcies, sometimes they over-complicate things.

0
P

@Bamo-D-Abdallah

Posted

But in rare cases like making perfect circle you don't have to worry about overflowing content or making it responsive, in those cases it is ok to use height or use aspect-ratio: 1/1.

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