Not Found
Not Found
Not Found
Request path contains unescaped characters
Request path contains unescaped characters
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

Result Summary Component

Emre 180

@alwaysJunior

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


Great example for Flexbox. If you notice any problem, please give feedback about that.

Community feedback

@rmartin93

Posted

Only issue I really see is the button doesn't have a cursor hover effect on it. I would also look into using transition to control the speed at which the color changes. It's a small improvement, but one you'll use in everything once you know about it.

Happy coding!

0

Emre 180

@alwaysJunior

Posted

@rmartin93 Hi,

I actually add the hover for the button but yeah you are right I forgot to use transition, thank you for your feedback.

Happy coding my friend.

0
Joachim 840

@Thewatcher13

Posted

  • You should have a main landmark element
  • Can you explain why did you choose the h3 tag on "your result"?
  • Can you explain why did you choose the b tag on "great", reaction, the scores?
  • Why did you choose the h1 tag for the "76" and a p tag for "100"
  • Don't set an alt on icons/decorative pictures
0

Emre 180

@alwaysJunior

Posted

@Thewatcher13 Hello,

There is no spesific reason for the h3 tag, I just used that h3 tag for "Your Result and Summary". (.title class)

For the b tag, actually I never use b tag but this time I thought if I use that tag maybe I won't need any css for the font-weight, I just tried but after that I forgot the revoke it.

At the beginning, I used p both for 76 and 100 but then I couldn't set the color of the 76, so I didn't want unnecessary CSS that is why I changed it as h1. That was easier to write.

Also, I noted your landmark and icon advices. Thank you for the feedback, I hope I was able to explain myself.

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