Skip to content
Submitted over 1 year ago

Results summary barebone

matryosha•190
@matryosha
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

  • Used em and rem quite irresponsible. Probably should've used rem only and think if I need em.
  • Implementation of partial borders for an category item are "borrowed" from here. But the suggested implementation needed a tweak as without any changes borders won't have the same width and height. I fixed it in kinda "hacky" manner because changing the height of bottom borders will render it at wrong place so I fixed it by setting negative top.
  • By the way, I would love to implement those border without adding these addition two divs for every category for sake of readability. I thought of using pseudo elements but you can't create that much with them. Need to see how other people implemented it.
  • Without using any css preprocesses such as SASS the naming become the problem. I'd like to use "self explanatory" style names but it hurts html readability. The same thing applies to css: even with such a small project the wall of styles make it hard to move.
  • Especially when I had to create a hacky partial borders as it creates a small wall of utility css. Not sure how to handle it but I started appreciated scoped styles more than ever.
  • BEM looks good in theory but that "__" everywhere hurts my eyes.

Community feedback

  • matryosha•190
    @matryoshaPosted over 1 year ago
    • Should add more spacing to between score in category ✔
    • The card shadow should not be straight black. Now I see there is some color here. ✔ kinda
    • Did I really messed up with the main grading on left card? Colors seem wrong. ✔
    • The shadow should take more space
    • "Summary" and "Your results" text are a little bit off. Need to make them bigger.
    • "Great" text's weight is more than needed.
    1
    faramarzsakhi•150
    @faramarzsakhiPosted over 1 year ago

    @matryosha these are good points if you want to be very very percise . i want to do this project. and is bootstrap a good choice for this project or i should use plain css?

    0
    ThanHtike（テンタイ）•110
    @CGM-ThanHtikePosted over 1 year ago

    @faramarzsakhi Just use pure css bro. Bootstrap is nothing but a funcy custom css classes when u mastered the pure css. Trust me!

    1
    matryosha•190
    @matryoshaPosted over 1 year ago

    @faramarzsakhi I would agree that using no framework is more beneficial as I see "Frontend Mentor" is created to master css skills. Bootstrap is quite useful for prototyping though when you need to create something functional and not ugly.

    I am no css master so using nothing but css helps me in understanding foundation and I worry that without that using Bootstrap or any other framework could lead to situation where overwriting framework properties, to make a design more precise, would require much more knowledge I don't possess for now.

    2

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