Skip to content
Submitted 12 months ago

result summary component challenge

Tamara Bartley•50
@emmecee
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

This was a struggle because Im not good at Grid and I feel for this it would've been best. Also how were you guys able to make the first number ( 72 / 100) to be bold without having to create extra classes if possible?

Community feedback

  • Ruan Figuereido•500
    @huanfsPosted 12 months ago

    in smaller components like this, you can use flexbox to build the layout, its more easy

    Marked as helpful
    0
  • Jacob Roberts•80
    @jacobaroberts1993Posted 12 months ago

    I used <span> elements to target the "72" and other x / 100 numbers and make them bold. I've found span elements very useful for targeting specific pieces of text like that in-line, among other things. Hope this is helpful!

    Example:

    <p><span id="score">72</span> /100</p>
    Marked as helpful
    0

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