Skip to content
Submitted over 1 year ago

Results-summary-component

Cesar D.•400
@ThatDevDiaz
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

Not gonna lie, this one took me longer than the other newbie challenges I've tried. I would appreciate some feedback or answering of some of my questions here.

First things first, prettier kept telling me my HTML had an error and it couldn't format properly. The code ran just fine and I could not locate it. Within the HTML I've left some comments so you can locate it. It specified line 34 was not being closed properly but it was? Idk. This one was bugging me.

Secondly, the button has a gray-ish border even though I set box shadow to none and border to match the white background. Not sure why this keeps happening on my button elements. Maybe it's the element itself doing it.

Lastly, figuring out the spacing and all the flex properties was a big game of ping pong. Constant back and forth adjusting things. Maybe I did something to make my workflow tougher and I'd appreciate some feedback on cleaning up my flex.

Overall I'm glad I was able to complete this when just a week ago I had no idea how I would even start.

Thanks for any feedback!

Community feedback

  • markus•2,250
    @markuslewinPosted over 1 year ago

    <div>s aren't allowed inside <p> tags. Prettier complains about this because it thinks you want to omit the end tag (which is allowed in some situations), but then it gets confused when it later finds those </p> tags.

    The border comes from the user agent's border-style, so you'd have to reset that one, or set the border-color: transparent!

    Marked as helpful
    1
    Cesar D.•400
    @ThatDevDiazPosted over 1 year ago

    Thanks a lot. It was driving me nuts because I couldn’t figure it out. I wish prettier was a little more specific. Even chat GPT didn’t catch it. @markuslewin

    1
    markus•2,250
    @markuslewinPosted over 1 year ago

    @ThatDevDiaz ChatGPT should ask me next time

    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