Skip to content
Submitted almost 3 years ago

Results summary component

AlexBetita•60
@AlexBetita
A solution to the Results summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

  1. Difficulties:
  • Creating the corners for the blocks within the summary section for reaction, memory, verbal and visual were quite challenging.
  1. Areas of unsureness:
  • Not sure if the corner blocks are accurate or that is the proper approach to go on about it. I was looking into linear gradient but had a difficult time trying to get it to work so decided to go with multiple divs instead.
  • Not sure of the spacing and measurements between each divs for each element block.
  • Not sure of the font sizes.
  1. Best Practices:
  • I mostly avoided class names for each div cause it would have been really painful to find proper names for the divs and instead opted for nth child selectors, not sure if this is best practice but I found this implementation to be quicker than having to figure out the names for each div.
Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on AlexBetita's solution.

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