Skip to content
Submitted about 1 month ago

Responsive Result Summary Component using CSS Grid

glowri57•130
@glowri57
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I am proud of being able to complete this challenge.

What challenges did you encounter, and how did you overcome them?

  • I had issues with making the icons and text lay side by side but could use transform: translateY() to balance the icons and text.

  • I also had issues with making the button expand to the width of the container and I solved this issue by using width: 100%

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

Any feedback would be welcome. Thanks

Community feedback

  • Kamran Kiani•1,280
    @kaamiikPosted about 1 month ago

    Hi congrats for doing this challenge. I have some notes that I wanna mention:

    1. For your summary-items here is a good situation to use ul with li. Using semantic tags always better.

    2. Decorative images should not have an alt text.

    3. After your main, use a footer instead of div for the .attribution part.

    4. Your button should be an a tag because It takes you to a new page.

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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