Design comparison
Solution retrospective
I used fetch()
and created some of the elements manually through JavaScript DOM API.
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
- @damigandPosted 4 months ago
I don't see any reason as to why
height
is not a good idea to use. I've never heard that usingheight
is bad, but if you want to make a perfect circle, you can set thewidth
property to your desired value, useborder-radius
for the roundness and then add a property calledaspect-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 theheight
property instead.0@Bamo-D-AbdallahPosted 4 months ago@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 useheight
, your browser will give your element enoughheight
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@Bamo-D-AbdallahPosted 4 months agoyour browser will give your element enough height based on much the content need.
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 useaspect-ratio: 1/1
.0
Please log in to post a comment
Log in with GitHubJoin 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