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

2nd attempt Results-cummary-component

Anuoluwapo-devβ€’ 80

@Anuoluwapo-dev

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


All feedback are welcome...

Community feedback

Abdul Khaliq πŸš€β€’ 72,660

@0xabdulkhaliq

Posted

Hello there πŸ‘‹. Congratulations on successfully completing the challenge! πŸŽ‰

  • I have other recommendations regarding your code that I believe will be of great interest to you.

CSS 🎨:

  • This solution is perfect in terms of design & code, but forget to add a background-color for the .card
  • So add background: white for the div class="card" to make the component as same per the design

.

I hope you find this helpful πŸ˜„ Above all, the solution you submitted is great !

Happy coding!

0
Arif Faisalβ€’ 580

@arifaisal123

Posted

That's a very good attempt! However, I have the following opinions on your submission that you can consider:

  • For semantics, it is considered a good practice to give the most important heading as <h1> element. Try to look if there are other important headings than <h1>76</h1>.
  • Generally, styles are better kept with external stylesheets which you've rightly done! Nonethless, in some of your text, you have used <b> to bold. It is a better practice to style it in your css file. Maybe, you want to add a <span> around the text. Semantically, <b> does not have any much importance, but if you want to style it using tags, you can use <strong> which semantically refers to something with strong importance.
  • Additionally, you may want to add something more meaningful in your alt, inside the <img> tag. As it will be read by screen readers, you can write as "reaction icon" instead of just icon.

Happy Coding!

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