Skip to content
OverviewSolutions
9
Comments
1

Ahmad Syafiq Aqil Wafi

@SyafiqjosSurabaya, East Java, Indonesia170 points

Game Developer is my lifetime target. But currently learning Front-end Web Development. Actually, I love all about Graphics Technology!

I’m currently learning...

Currently learning Front-end Web Development. I want to learn more about vanilla html, css and js. I tried Vue before and successfully created an app from it. Looking forward to learn React and Tailwind soon!

Latest solutions

View more solutions

Latest comments

  • Ahmad Syafiq Aqil Wafi•170
    @Syafiqjos

    Hi @ACdev27,

    Congratulations on finishing the challenge!

    I checked the live website, it's working great and responsive but I have some opinion about them.

    1. The card is seems to be really wide on max-width of 757px. The user who read the text probably got tired to read all the long from left to right. Maybe try to shrink it? so the text appear easy to read from top to bottom.

    2. I see that you using manual margin for the stats. It's great but, there is other efficient and fast approach.

    Change from this..

    .stats {
  display: flex;
  justify-content: flex-start;
  margin-top: 18%;;
}
.stats div {
  margin-right: 15%;
}
.stats div:nth-child(3) {
  margin-right: 0;
}

    Into this..

    .stats {
  display: flex;
  justify-content: space-between;
  margin-top: 18%;
}
.stats div {

}
.stats div:nth-child(3) {

}

    Also if you still want to use your current approach it's fine, but it's easier to change div:nth-child(3) into div:last-child to make it even more versatile.

    1. Also I think it isn't necessary to put alt in the image, you could leave it empty alt="", since it's not required for us to describe it. Usually alt is used to describe or make a more explanation to the user based on the paragraph or text. But in this challenge the image is only appeared as a background image, there is no relation between the text and stats. It's better that you use role="presentation" or aria-hidden="true" to make screen reader ignore that image.

    2. Last but not least, I think there is slight typo on the queries stats. It's should be "12M+" instead of "12m+".

    Thats all from me, have a good day and keep improving!

    • syafiqjos
    Marked as helpful